WPでjquery.bxslider.jsを使ってAjaxで投稿記事を取ってくるコンテンツスライダーを作る

TOPページにコンテンツスライダーを設置。Ajaxで新着投稿を取得

今回は、WPでjquery.bxslider.jsを使ってajaxで投稿を取得するコンテンツスライダーを作るならこういう感じでどうですか的なサンプルを書いてみました。
初心者のかたでもわかるように細かい説明も入れていますが、多分コードとタイトル部分だけ見てコピペでOKだと思います。

最初はKURUBUSI.netのTOPページでやっているのをそのまま紹介しようと思っていたんですが、ソースを集めてみたらなんか冗長になってしまったので、ちょっと単純化したものを書いてみました。

今回は説明用として、TwentyFifteenのテーマのTOPページに新着情報のコンテンツスライダーを組み込むことを想定しています。
テスト環境は下記の感じ。

下記の作業を行う前にjquery.bxslider.js設置方法を見てjquery.bxslider.jsを設置しておいてくださいね。

サンプルとしてはKURUBUSI.netのTOPページを単純化した感じのもが出来上がります。汗

functions.phpに追加するコード

functions.phpの一番下にでも下記のコードを追加してください。

//WPでajaxをするための準備
function include_scripts(){
	global $post;
	wp_localize_script( 'twentyfifteen-script', 'functions_vars', array(
		'ajaxurl' => admin_url('admin-ajax.php'),
		'get_template_directory_uri' => get_template_directory_uri() . '/',
		'home_url' => home_url('/')
		)
	);
}
add_action( 'wp_enqueue_scripts', 'include_scripts');

//PHPからもjsからも呼び出せるget_post的な関数
function kThePost( $param = "") {
	$param = isset( $_POST['param'] ) ? $_POST['param'] : $param;
	$myposts = get_posts( $param );
	$html = addScrollThumbnailL( $myposts );
	wp_reset_postdata();
	if ( isset( $_POST['param'] ) ) {
		echo $html;
		die();
	} else {
		return $html;
	}
}
add_action( 'wp_ajax_kthepost', 'kThePost');
add_action( 'wp_ajax_nopriv_kthepost', 'kThePost' );

//kThePostで呼びだされた配列からHTMLを作成
function addScrollThumbnailL( $myposts ) {
	global $post;
	$html = '';
	foreach ( $myposts as $post ) :
		$html .= '<article class=""><dl class="taglist_1">' . "\n";
		$html .= '<dt class="taglist_img"><a href="' . get_permalink() . '">' . "\n";
		$img = get_the_post_thumbnail($post->ID, 'medium');
		if($img !== ''){
			$html .= $img . "\n";
		}else{
			$html .= '<img src="' .get_template_directory_uri() . '/images/noimage.jpg" />';
		}
		$html .= '</a></dt>' . "\n";
		$html .= '<dd class="taglist_title"><a href="' . get_permalink() . '">' . "\n";
		$html .= get_the_title() . "\n";
		$html .= '</a></dd>' . "\n";
		$html .= '</dl></article>' . "\n";
	endforeach;
	
	return $html;
}

今回はTwentyFifteenに追加してみましたが、違うテーマの時でもfunction.phpはあるので、そういうファイルの中に追加して下さい。

functions.jsに追加するjs

functions.jsの$( document ).ready( function() { } );内に記載するコード。
bxSliderでajaxをするときの、bxSliderの呼び出し方の参考例にもなってます。
他の参考例はjquery.bxslider.js使用例のページも参考にしてください。

( function( $ ) {
	$( document ).ready( function() {  //コレの中に記載

		$( ".new_list" ).each( function () {  //new_listクラスに対して下記を実行
			var self_ = $( this ),
					slider = self_.bxSlider( {  //bxSlider実行　オプション設定
						infiniteLoop: false,
						hideControlOnEnd: true,
						controls: true,
						adaptiveHeight: true,
						onSlideNext: function () {     //コントロールボタンが押された時に実行
							//本当はココで取ってこようと思ってたけどなんか上手く行かなかった・・・
						},
						onSliderLoad: function (){     //スライダーが読み込まれた後に実行します
							var wct_posts_ = self_.data("wct_posts") || [],
									wct_no_ = self_.attr("data-wct_no") || 1,
									posts_per_page_ = wct_posts_.posts_per_page || 10,
									param = $.extend( wct_posts_, { 'offset': posts_per_page_ * wct_no_ } );
							$.ajax( {         //スライダーが読み込まれた後にAjaxで他の投稿を取ってくる
								type: 'POST',
								url: functions_vars['ajaxurl'],
								data: {
									'action' : 'kthepost',  //この部分さっき書いたアクション名
									'param' : param,
								},
								success: function( response ){
									if ( response !== "" ) { //PHPが用意してくれたHTMLをドキュメントにアペンド
										self_.append( '<div class="list_inner_w">' + response + '</div>' ); //アペンド
										self_.attr( 'data-wct_no', parseInt( self_.attr("data-wct_no") ) + 1 );
										slider.reloadSlider();
									}
								}
							} );
						}
					} );
		} );

	} );
} )( jQuery );

上記を書き込むのは特にどのjsファイルに書き込んでもいいんですが、TwentyFifteenのテーマでは、先ほど述べたfunction.phpのwp_enqueue_scriptsでデフォルトで読み込まれていたもので。。
とにかくwp_enqueue_scriptsで読み込まれているjsファイルの中の$( document ).ready( function() { /*ココ*/ } );の様な場所にコードを書いてくださいねー。
bxSliderのオプションに関しては【jquery.bxslider.jsオプション】にあります。
コールバックが用意されていて便利ですね。
'action' : 'kthepost'の部分がさっき言ってた「wp_ajax_アクション名」のアクション名ですね。

style.cssに追加するstyle

これはとりあえず今回の最低限のサンプルの為のcssですね。どこか読み込まれる部分に書いて下さい。

.thumbnail_medium article {
	width: 27%;
	height: 200px;
	float: left;
	margin: 0 3.16%;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.taglist_1 {
	width: 100%;
	overflow: hidden;
	margin-bottom: 0;
}
.taglist_1 .taglist_img {
	margin-bottom: 2px;
}
.taglist_1 .taglist_img img {
	width: 100%;
	height: auto;
}
.taglist_1 dd {
	margin: 0;
}
.taglist_1 .taglist_title {
	padding: 0em 0 0em 0;
}
.taglist_1 .taglist_title a {
	text-decoration: none!important;
	border-bottom: none!important;
}

.bx-wrapper {
  -moz-box-shadow: none!important;
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
  border: none!important;
}

front-page.phpを作って使ってみる

やっと準備が完了です。では実際に今まで説明したphpとjsを使ってみましょう。
TwentyFifteenのテーマには最初はfront-page.phpが無いので、index.phpをコピーして、front-page.phpを作ってみました。

<?php
/**
 */
get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
			<section class="no-results not-found">
				<header class="page-header">
					<h1 class="page-title">jquery.bxslider Ajax test</h1>
				</header><!-- .page-header -->
				<div class="page-content clearfix">
					
					<!--ここから-->
					<div id="new_list1" class="new_list thumbnail_medium" data-wct_no="1" data-wct_posts='{"orderby":"post_modified", "posts_per_page":"6"}'>
						<div class="list_inner_w"><?PHP echo kThePost( array( 'orderby ' => 'post_modified', 'posts_per_page' => 6, 'offset' => 0 ) ); ?></div>
					</div>
					<!--ここまで-->
					
				</div>
			</section>
			
		</main><!-- .site-main -->
	</div><!-- .content-area -->

<?php get_footer(); ?>

'post_modified', 'posts_per_page' => 6, 'offset' => 0 ) ); ?>
の部分で、function.phpで作ったkThePost()を呼び出しています。get_postsを呼んでるだけなので、パラメーターはget_postsのまま、カテゴリとかを指定できます。

これで最初の一枚目のスライダの内容をPHPで表示しています。
それを囲っている部分でajaxに独自属性などを渡すようにしてみました。

.new_listに対してbxSlider()を行います。
data-wct_noはページ数です。get_postsのoffsetに渡すデータです。
data-wct_postsは、こんな感じの書き方でget_postsに渡すデータをjsに渡しています。。。（説明が難しいっ汗）
カテゴリとかを指定したいときは
data-wct_posts='{"orderby":"post_modified", "posts_per_page":"6", "category":"2' }"
とかしてください。

まとめ

ということで今回は「WPでjquery.bxslider.jsを使ってAjaxで記事を取ってくるコンテンツスライダーを作る」というテーマで書いてみました。
まあ正直jquery.bxslider.jsを使って無理してajaxしなくてももっと良いやり方があるのかなと思いますけど、jquery.bxslider.jsのオプションの使い方と、wpでのajaxのやり方の参考にしていただけると幸いです。

あと、新着投稿記事を取ってくる程度でわざわざajaxでとってこなくてもいいちゃいいし、表示スピードも大して変わらないかもしれませんが、indexページなどに全ての記事のリンクを取ってきてしまうのはSEO的によろしくありませんので。

これでjquery.bxslider.jsシリーズまとめとさせて頂きます。
ちょっとわかりづらいと思うので、もし「やってみようと思うけどうまくいかないぞー！」「おこだぞー！」って方はコメント欄から聞いてくださいね！