【WordPress】「ランダムに表示するコンテンツ・スライダー」の実装方法 | Webクリエイターな備忘録

このサイトはフリーランスでWeb制作をするクリエイターの備忘録なメモサイトです。 Webサイトを作る際に気になった事やjavaScriptなどのライブラリの事などWebサイト制作に関する事、また気になるでき事、日常の事などを気ままに勝手に書き綴っています。

【WordPress】「ランダムに表示するコンテンツ・スライダー」の実装方法

【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で装飾して、完成したのがこんな感じです。

今回の記事で参考にさせて頂いたサイト

今回の記事で参考にさせて頂いたサイト一覧です。

コメントは受け付けていません。