WordPressにて、ランダムの記事をAjaxを用いて表示する方法をご紹介します。サイドバーに常に入れ替わるランダム記事を挿入することができますし、これを応用すれば、スライドショー用のカスタム投稿タイプを作成した後、ランダムに1件ずつ表示することでデータベースと連動したスライドショーを作成することもできるかと思います。
WordPressのAjaxを利用する
Ajaxで読み込むPHPプログラムをWordPress連携させるにはどうしたらいいのか悩んでいたのですが、少し調べると用意されているようで感心しました。
以下の方法で、まずはAjaxを利用する下準備をします。
参考URL：http://hijiriworld.com/web/wordpress-ajax/
読み込むパスを宣言
WordPressでAjaxを利用する場合は、「/wp-admin/admin-ajax.php」にリクエストを送るようにするとのことです。参考URLのようにwp_headやwp_footerにフックしてもいいでしょうし、テンプレートファイルに直接書いてもいいと思います。
ついでに、ajaxを記述する用のjsファイルも読み込んでしまいます。
|
1 2 3 4 |
echo '<script>'."n"; echo "t".'var ajaxurl = "'.admin_url('admin-ajax.php').'";'."n"; //ajaxリクエスト用のパスを宣言 echo '</script>'."n"; echo '<script type="text/javascript" src="'.get_option('home').'/js/random.js"></script>'; //ajaxを記述するjsファイルを読み込み |
以下は、functionwp_headやwp_footerにフックする場合です。
|
1 2 3 4 5 6 7 |
function add_my_ajaxurl() { echo '<script>'."n"; echo "t".'var ajaxurl = "'.admin_url('admin-ajax.php').'";'."n"; //ajaxリクエスト用のパスを宣言 echo '</script>'."n"; echo '<script type="text/javascript" src="'.get_option('home').'/js/random.js"></script>'; //ajaxを記述するjsファイルを読み込み } add_action( 'wp_footer', 'add_my_ajaxurl', 1 ); |
ランダム記事を出力する関数を作成
次に、「wp_ajax_(action)」と「wp_ajax_nopriv_(action)」を用いて出力する関数を登録します。wp_ajax_(action)はログインユーザー用、wp_ajax_nopriv_(action)は非ログインユーザー用とのことです。
これをajaxに組み込み、出力させる流れです。functions.phpに記述します。
|
1 2 3 4 5 6 |
function my_random_post(){ //処理 die(); } add_action( 'wp_ajax_my_random_post', 'my_random_post' ); add_action( 'wp_ajax_nopriv_my_random_post', 'my_random_post' ); |
処理のところにランダムで取得した記事を出力する処理を記述するわけですが、ランダム記事の取得方法は、get_postsやWP_Query、$wpdbなどたくさんあると思うのでお任せします。
ここではget_post()を利用した場合の記述になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function my_random_post(){ global $post; $rand_posts = get_posts('posts_per_page=5&orderby=rand'); echo '<ul>'."n"; foreach($rand_posts as $rand_post): $rand_id = $rand_post->ID; echo '<li><a href="'.get_the_permalink($rand_id).'">'.get_the_title($rand_id).'</a>'."n"; endforeach; echo '</ul>'."n"; wp_reset_postdata(); die(); } add_action( 'wp_ajax_my_random_post', 'my_random_post' ); add_action( 'wp_ajax_nopriv_my_random_post', 'my_random_post' ); |
ここの処理を色々と変更すれば、冒頭で述べたカスタム投稿タイプを利用したスライドショーなどを作成できます。
jQueryとajaxの記述
上記の「/wp-admin/admin-ajax.php」を読み込むパスを宣言した際についでに読み込んだjsファイルに以下を書き込みます。
ajaxを発動させるタイミングや、リクエストから受け取った情報の処理を設定します。
以下ではsetTimeout()を利用して、「#randamBox」に対し一定時間でランダム記事を表示し続けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(function(){ WaiteTime = 5000; //切り替わる時間 RandTarget = $('#randamBox');//ランダム記事を挿入する包容タグ $.fn.DoRandomPost = function(config){ return this.each(function(i, elem) { $.ajax({ type: 'POST', url: ajaxurl, data: { 'action' : 'my_random_post',//登録したアクションフック }, success: function( response ){ RandTarget.fadeOut(function(){ RandTarget.empty().append(response).fadeIn(); timerID = setTimeout(function(){RandTarget.DoRandomPost();},WaiteTime); }); } }); return false; }); } $(window).load(function() { RandTarget.delay(WaiteTime).queue(function(next) { $(this).DoRandomPost().dequeue(); }); }); }); |
HTMLの記述
ここにjsファイルで指定した、ランダム記事を挿入するHTMLを記述しますが、javascriptを利用していない人やSEOなども考えて、最初から表示してあるランダム記事を出力しておいた方がいいかもしれません。
|
1 2 3 |
<div id="randamBox"> <!--ここにajaxで取得したランダム記事が出力される--> </div> |
まとめ
以上になります。PHPやjavascriptの処理を変えたりと応用すれば色々とできると思うので、実際に作成したものをテンプレートとしてとっておいたら便利かもしれません。
コメントを残す