質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.52%

FlexSliderを使って登録した画像をスライド表示したいです。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,197

t-maekawa

score 38

お世話になります。
現在作成中のサイトで投稿画面でカスタムフィールドを使って画像を複数登録し
その画像をスライドショーのように表示させたいのです。

現在は画像1、画像2、画像3という形で登録(アップロード)した画像は問題なく表示されております。

いろいろ方法を検索して考えたのですが
一番近い形でできるのが
FlexSliderではないかと思いダウンロードして
紹介サイトのように
使っているテーマフォルダの中に
jQuery.flexslider-min.js(FlexSlider2の本体・縮小版)
flexslider.css(FlexSlider2のスタイルシート)
fontsフォルダ(矢印などのアイコンフォントが入っている)
をアップロードし
function.phpには

function my_scripts(){
    wp_enqueue_script( 'jquery' );
    if(is_single()){
        wp_enqueue_style( 'flexslider-css', get_template_directory_uri() . '/css/flexslider.css');
        wp_enqueue_script( 'flexslider-js', get_template_directory_uri() . '/js/jquery.flexslider-min.js', array(), '2.2.2', true);
    }
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

と記載してアップ
single.phpには
</head>の前に

<?php if(is_single()): ?>
<script type="text/javascript">
jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide",
    slideshow: false,
    controlNav: "thumbnails"
  });
});
</script>
<?php endif; ?>


と記載してアップしています。
CSSも

src:url('../fonts/flexslider-icon.eot');
src:url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/flexslider-icon.woff') format('woff'),
    url('../fonts/flexslider-icon.ttf') format('truetype'),
    url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');

と記載しなおしてアップしました。

出力したい箇所には

<div class="flexslider">
<ul class="slides">
<li><img src="<?php 
$image = get_field('image01');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
    // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];

    if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?></li>
<li><img src="<?php 
$image = get_field('image02');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
    // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];

    if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?></li>
<li><img src="<?php 
$image = get_field('image03');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
    // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];

    if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?></li>

</ul>
</div>

と記載してアップしました。

スライダーとしては機能しているのですが、
スライド画像の左上に
小さい画像が表示されない形でテキストのみで表示され
本体画像が画質が荒く
3枚登録しているのですがその3枚のサムネイルが左上の画像と同じで(テキストなし)空の画像で表示されます。

3~4枚しか登録しないので本体画像以外は消したい、というのと以上に画質が粗い原因を知りたいです。

コード中のimg src=""の""部分はカスタムフィールドで画像登録したものを出力する際に必要なコードをそのまま記入しております。

こちらは現在そのまま別の場所に記載しており(スライダーが完成したらはずす予定)、問題なく表示されており画質も劣化無くきれいに写っております。
同じものを表示しているのにスライダーだけ画質が劣化するのはなぜなのでしょうか?

知識不足で申し訳ありませんがよろしくお願いいたします。

また、もし別の方法がありましたらご教授いただけましたら幸いです。

よろしくお願いします。

以下にコードを記述いたします。

<div class="flexslider">
<ul class="slides">
<li>
      <img src="<?php 
$image = get_field('image01');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
        // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];

   if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>

<?php endif; ?>
    </li>
    <li>
      <img src="<?php 
$image = get_field('image02');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
        // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];

   if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>

<?php endif; ?>
    </li>
    <li>
      <img src="<?php 
$image = get_field('image03');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
    // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];

     if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?>
    </li>


</ul>
</div>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • t-maekawa

    2016/10/28 10:10

    お世話になります。<div class="flexslider">内記述いたしました。

    キャンセル

  • kei344

    2016/10/28 12:48

    追記されたものはPHPのソースか、それで無ければPHPが動いていないことになります。ブラウザで「ページのソースを表示」という表現はわかりにくいでしょうか。

    キャンセル

  • t-maekawa

    2016/10/28 14:01

    お世話になります。ページのソースを表示、という表現は理解できます。

    キャンセル

回答 1

check解決した方法

0

解決ができないため現在使用をやめております。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる