jquery.bxslider スライダープラグイン
jquery.bxslider.js

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

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

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

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

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

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

環境
php 5.6.12
WordPress 4.3.3
テーマ Twenty Fifteenバージョン: 1.1

サンプルとしてはKURUBUSI.netのTOPページを単純化した感じのもが出来上がります。汗
jquery.bxslider.jsでAJAXでWPの投稿を取得する

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はあるので、そういうファイルの中に追加して下さい。

解説

・WPでajaxをするための準備
WPでajaxをするためにwp_enqueue_scriptsで、wp_localize_scriptを使ってfunctions.jsで使えるオブジェクトを作って表示させています。
wp_enqueue_scriptsフックは、jsやcssを読み込むタイミングで使う例のやつですね。
TwentyFifteenのテーマでもデフォルトで読み込むcssやjsが有りますので、既にfunction.phpの上の方で使われていますので、include_scripts()の中身はまるまるその中に書いてもOKです!

wp_localize_scriptは、

wp_localize_script( '値を送りたいjsのハンドル', 'オブジェクト名(任意)', array(
	'送りたいデータのキー' => 値
));

の様に使用します。そうすると、header.phpwp_head();で吐き出された時に、今回の場合は下記のように出力されます。

<script type='text/javascript'>
/* <![CDATA[ */
var functions_vars = {"ajaxurl":"ドメイン/wp-admin\/admin-ajax.php","get_template_directory_uri":"ドメイン/wp-content\/themes\/twentyfifteen\/","home_url":"ドメイン/"};
/* ]]> */
</script>
<script type='text/javascript' src='http://ドメイン/wp-content/themes/twentyfifteen/js/functions.js?ver=20150330'></script>

ちょっと説明が難しいですが、wp_enqueue_scriptsはすごく単純で、jsに渡したいオブジェクトをスクリプトを読み込む直前にvarでjsオブジェクトにしてしまおうっていうwpの機能です。

因みに「値を送りたいjsのハンドル」ってのは、今回はfunctions.jsに値を渡したいので、TwentyFifteenテーマがデフォルトで使用しているwp_enqueue_scriptsフックで引っ掛けてるfunctions.jsのハンドル名を使用します。

wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20150330', true );

↑のtwentyfifteen-scriptの部分ですね。ですので、twentyfifteen-scriptの部分は渡したいjsファイルごとに変わりますからねー。ですので決してheader.phpにベタ書きしているjsに値は渡せませんので【WPでjsの追加cssの読み込みはwp_head()から】の様にjsファイルなどはwp_head()で吐き出されるようにしておきましょうね。

・PHPからもjsからも呼び出せるget_post的な関数
ここは、送られてきた$paramをそのままget_posts( $param )に渡して、postデータを取得している部分です。
PHPから呼ばれれば関数の引数になって送られてきて、jsから呼ばれれば$_POST['param']で送られてくるので、どっちでも行けるようにしています。
後、送られたpostデータをHTMLを作る関数に渡して出来上がったものをそれぞれPHP用とjs用と分けて処理しています。
あっ因みに

add_action( 'wp_ajax_kthepost', 'kThePost');             //wp_ajax_アクション名
add_action( 'wp_ajax_nopriv_kthepost', 'kThePost' );     //wp_ajax_nopriv_アクション名

の部分はこういうルールです。
下の方で説明するjsでアクション名ってのを付けてajaxで送っています。鍵みたいなものですかねー。wp_ajax_アクション名で送られてきたら、kThePostの処理をしなさいよ、的な命令です。

・kThePostで呼びだされた配列からHTMLを作成
ここはget_postsで取得したデータでHTMLを作ってるだけなので、いい感じに変更して下さい。

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.phpwp_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_postsoffsetに渡すデータです。
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シリーズまとめとさせて頂きます。
ちょっとわかりづらいと思うので、もし「やってみようと思うけどうまくいかないぞー!」「おこだぞー!」って方はコメント欄から聞いてくださいね!

連載INDEX

WPでjquery.bxslider.jsを使いこなしてみる

jquery.bxslider スライダープラグイン今回はjqueryのスライダー「jquery.bxslider.js」を使って色々やってみようということで、基本的な使い方の説明から、細かいオプションのご紹介と、最終的にはajaxでWPの投稿記事を取得するまでをやってみました。PHPで全記事取得してしまうのは表示スピード的にもSEO的にもよろしくないことですからね。

著者