Advanced Custom Fieldsとslick（スライダー）の組み合わせ
Advanced Custom Fieldsとslickを組み合わせて、サムネイル付きのスライダーを設置してみました。
画像は5点までで、空の画像があった場合は、それは表示されない設定にしてます。
Advanced Custom Fields上の画像のスラッグは、img-product～img-product_5にしてあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<div class="slider slider-for"> <div> <?php $image = get_field('img-product'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?> </div> <div> <?php $value = get_post_meta($post->ID, 'img-product_2', true);?> <?php if(empty($value)):?> <!--空欄の時の処理--> <?php else:?> <!--空欄では無い時の処理--> <?php $image = get_field('img-product_2'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?> <?php endif;?> </div> <div> <?php $value = get_post_meta($post->ID, 'img-product_3', true);?> <?php if(empty($value)):?> <!--空欄の時の処理--> <?php else:?> <!--空欄では無い時の処理--> <?php $image = get_field('img-product_3'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?> <?php endif;?> </div> <div> <?php $value = get_post_meta($post->ID, 'img-product_4', true);?> <?php if(empty($value)):?> <!--空欄の時の処理--> <?php else:?> <!--空欄では無い時の処理--> <?php $image = get_field('img-product_4'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?> <?php endif;?> </div> <div> <?php $value = get_post_meta($post->ID, 'img-product_5', true);?> <?php if(empty($value)):?> <!--空欄の時の処理--> <?php else:?> <!--空欄では無い時の処理--> <?php $image = get_field('img-product_5'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?> <?php endif;?> </div> </div> <div class="slider slider-nav"> <div> <?php $image = get_field('img-product'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?> </div> <?php $value = get_post_meta($post->ID, 'img-product_2', true);?> <?php if(empty($value)):?> <!--空欄の時の処理--> <?php else:?> <!--空欄では無い時の処理--> <div> <?php $image = get_field('img-product_2'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?> <?php endif;?> </div> <?php $value = get_post_meta($post->ID, 'img-product_3', true);?> <?php if(empty($value)):?> <!--空欄の時の処理--> <?php else:?> <!--空欄では無い時の処理--> <div> <?php $image = get_field('img-product_3'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?> <?php endif;?> </div> <?php $value = get_post_meta($post->ID, 'img-product_4', true);?> <?php if(empty($value)):?> <!--空欄の時の処理--> <?php else:?> <!--空欄では無い時の処理--> <div> <?php $image = get_field('img-product_4'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?> <?php endif;?> </div> <?php $value = get_post_meta($post->ID, 'img-product_5', true);?> <?php if(empty($value)):?> <!--空欄の時の処理--> <?php else:?> <!--空欄では無い時の処理--> <div> <?php $image = get_field('img-product_5'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?> <?php endif;?> </div> </div> <!-- slick--> <script type="text/javascript"> $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-nav' }); $('.slider-nav').slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: '.slider-for', dots: true, centerMode: true, focusOnSelect: true }); </script> |
で、ヘッダーのソースにcssと他の読み込みjsを記述します。
|
1 2 3 4 5 6 7 |
<link rel="stylesheet" type="text/css" href="サーバーのパス/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="サーバーのパス/slick/slick-theme.css"/> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="サーバーのパス/slick/slick.min.js"></script> |
slickは、ワードプレス用のプラグインも出てるんですが、今回は通常版をDLして、FTPで直接設置しました。