【WordPress】「ランダムに表示するコンテンツ・スライダー」の実装方法
今回もまた【Wordpress】ネタです。
前回の投稿同様にECサイト系に設定されている場合が多い「登録商品をランダムに表示するコンテンツ・スライダー」を作ってみましたので、その備忘録を！
この記事の目次
コンテンツ・スライダーのプラグイン
前回同様にまずは、Wordpressのプラグインの中から「コンテンツ・スライダー」を実装できる物がないか探してみます。
ネット検索していると、ひとつ良さそうなのを発見しました。
見つけたのが「WP Posts Carousel」です。カールセルに特化したプラグインの様です。コンテンツのスライドもできるようです。
早速、プラグインをインストールし、プラグインの設定を開くと、設定項目が多い！！
まっ設定項目が多いという事は、詳細に表示などが調整できる証拠なのですが…。
いろいろと設定してみましたが、カールセルが表示しない！なぜだ！！
「登録商品をランダムに表示するコンテンツ・スライダー」を作ってみる
「コンテンツ・スライダー」に表示したいのは
- 商品画像
- 商品タイトル
ぐらいでしょうか！
あとは画像かタイトルをクリックしたら商品詳細ページに飛んでくれれば良い感じ！
WordPressの表示したいテンプレートに、作ってみた下記のコードを追記しました。
＜div class="randg"＞
＜?php
$args = array(
'posts_per_page' =＞ 20,
'orderby' =＞ 'rand',
'post_type' =＞ 'post',
'category__in' =＞ $category_child,
'post__not_in' =＞ array($post -＞ ID),
);?＞
＜?php $post_query = new WP_Query($args);?＞
＜?php if($post_query-＞have_posts()):?＞
＜h2＞オススメ商品＜/h2＞
＜ul class="bxslider related_post clearfix"＞
＜?php while($post_query-＞have_posts()): $post_query-＞the_post();＞
＜li class="related clearfix"＞
＜figure＞
＜a href="＜?php the_permalink();?＞" title="＜?php the_title_attribute(); ?＞"＞
＜?php $mainimg = get_post_meta($post-＞ID,'image_id',true); ?＞
＜?php if(has_post_thumbnail()):?＞
＜?php the_post_thumbnail(array(200,200));?＞
＜?php else:?＞
＜img src="＜?php bloginfo('template_url');?＞/img/no-image.jpg" width="200"＞
＜?php endif;?＞
＜/a＞
＜/figure＞
＜div class="related-title"＞
＜h3＞＜a href="＜?php the_permalink();?＞" title="＜?php the_title_attribute(); ?＞"＞＜?php the_title_attribute(); ?＞＜/a＞＜/h3＞
＜/div＞
＜/li＞
＜?php endwhile;?＞
＜?php else:?＞
＜p＞登録商品がありません＜/p＞
＜/ul＞
＜?php endif;?＞
＜?php wp_reset_postdata(); ?＞
＜/div＞
jQueryスライダーの「bxslider」用javascript
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true, //自動再生
speed: 4000, //スライドのスピードを4000ミリ秒にする
maxSlides: 5, //画面に表示する最大要素数
moveSlides: 3, //一回のスクロールで動かす要素数
slideWidth: 200, //一つの要素の幅
slideMargin: 10 //要素間のマージン1
});
});
登録した商品を「20商品」ランダムに取得させています。
またデザイン部分は、取得した20商品を「bxslider」を使用してコンテンツ・スライダーの状態で表示しています。
jQueryスライダーの「bxslider」を使用してみますので、headerかfooterに、「bxslider」のjsとcssの読み込み記述を追記しています。
あとは適所、CSSで装飾して、完成したのがこんな感じです。
今回の記事で参考にさせて頂いたサイト
今回の記事で参考にさせて頂いたサイト一覧です。
