【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で装飾して、完成したのがこんな感じです。
今回の記事で参考にさせて頂いたサイト
今回の記事で参考にさせて頂いたサイト一覧です。