Wordpress:Ajaxでランダムの記事を取得し、切り替えさせる

WordPressにて、ランダムの記事をAjaxを用いて表示する方法をご紹介します。サイドバーに常に入れ替わるランダム記事を挿入することができますし、これを応用すれば、スライドショー用のカスタム投稿タイプを作成した後、ランダムに1件ずつ表示することでデータベースと連動したスライドショーを作成することもできるかと思います。

WordPress:Ajaxでランダムの記事を取得し、切り替えさせる

作成日
2015/02/03
更新日
2016年8月16日

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ファイルも読み込んでしまいます。

以下は、functionwp_headやwp_footerにフックする場合です。

ランダム記事を出力する関数を作成

次に、「wp_ajax_(action)」と「wp_ajax_nopriv_(action)」を用いて出力する関数を登録します。wp_ajax_(action)はログインユーザー用、wp_ajax_nopriv_(action)は非ログインユーザー用とのことです。
これをajaxに組み込み、出力させる流れです。functions.phpに記述します。

処理のところにランダムで取得した記事を出力する処理を記述するわけですが、ランダム記事の取得方法は、get_postsやWP_Query、$wpdbなどたくさんあると思うのでお任せします。
ここではget_post()を利用した場合の記述になります。

ここの処理を色々と変更すれば、冒頭で述べたカスタム投稿タイプを利用したスライドショーなどを作成できます。

jQueryとajaxの記述

上記の「/wp-admin/admin-ajax.php」を読み込むパスを宣言した際についでに読み込んだjsファイルに以下を書き込みます。
ajaxを発動させるタイミングや、リクエストから受け取った情報の処理を設定します。
以下ではsetTimeout()を利用して、「#randamBox」に対し一定時間でランダム記事を表示し続けます。

HTMLの記述

ここにjsファイルで指定した、ランダム記事を挿入するHTMLを記述しますが、javascriptを利用していない人やSEOなども考えて、最初から表示してあるランダム記事を出力しておいた方がいいかもしれません。

まとめ

以上になります。PHPやjavascriptの処理を変えたりと応用すれば色々とできると思うので、実際に作成したものをテンプレートとしてとっておいたら便利かもしれません。

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Category

Archive