お世話になります。
現在作成中のサイトで投稿画面でカスタムフィールドを使って画像を複数登録し
その画像をスライドショーのように表示させたいのです。
現在は画像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には
<?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>
回答1件
あなたの回答
tips
プレビュー