wordpressでajax!!
個人的にはajax遷移の動きが非常に気に入っている。
Wordpressで使得時の、実装方法をまとめてみた。
僕がよくやる、ajax&PHPで仕組みを作る場合、
・jsでトリガー
・PHP関数に値を投げる
・json形式で結果を受け取る
・jsでエレメントを描画
とゆう流れなんだが、これをWordpressでやってみる。
まず、必要なのはjs, php
今回は練習として、アーカイブページでカテゴリー検索！というのを作ってみる。
■ Create JS
onload_post_archive.jsの名前でファイルを作成。
themedir/js/に置く。
■ Hook the action.
ここで、ajax_archive_posts.phpというファイル作成。
themedir/に置くとする。
この中に、以下を記載。
// Add js
add_action( 'wp_head', 'add_script_for_ajax_post_archive' );
if(!function_exists("add_script_for_ajax_post_archive")):
function add_script_for_ajax_post_archive(){
wp_enqueue_script('onload_post_archive', get_template_directory_uri(). "/js/onload_post_archive.js");
wp_localize_script('onload_post_archive', 'OLPR', array(
'endpoint' => admin_url('admin-ajax.php'),
'action' => 'get_ajax_pdf_request'
));
}
endif;
// Define function
add_action('wp_ajax_get_ajax_post_archive, '_get_ajax_post_archive);
add_action('wp_ajax_nopriv_get_ajax_post_archive', '_get_ajax_post_archive);
function _get_ajax_post_archive(){
// この中に処理を書いていく
}
ポイントとなるのは、
・wp_localize_script
・add_action の wp_ajax_
・add_action の wp_ajax_noriv_
で、wp_localize_scriptだが、３つのパラメータがある。
wp_localize_script( $handle, $object_name, $l10n );
$handle はファイル名。
$object_name はajaxで渡すオブジェクト名。詳しくは後述。
$110n が完全に理解できてないんだけど、配列でendpoint、ajaxで渡されるphp関数名を格納する。
詳しい説明は、以下。
http://codex.wordpress.org/Function_Reference/wp_localize_script
次に、wp_ajaxについてだけど、
これのフォーマットはこう。
wp_ajax_$youraction
（$youraction = ajaxで渡す関数名）
このフックで、下のget_ajax_post_archiveを呼び出す事ができる。
ちなみに、wp_ajax は管理画面用で、公開画面で使う場合に、wp_ajax_norivフックも使う必要があるらしい。
さて、枠組みが出来た所で組み込み開始。
表示される場所は、
archive.php の中に
ここにしよう。
それとサイドバーにこんなかんじに、
cat_1
カテゴリーリストを置く。
class=”1″は、カテゴリIDとしよう。
そしたら、カテゴリ名をクリックした時の挙動をjsにコーディング。
(function($){
$(document).ready(function(){
var getCategoryArchive = {
cid:'',
fire: function(){
getCategoryArchive.onloading = true;
$.post(OLPR.endpoint, {
action: OLPR.action,
cid: getCategoryArchive.cid,
}, postSelectedVal.result);
},
result: function(response){
},
clearResults: function(e){
}
};
$("#sidebar").find("ul").find("li").find("a").clink(function(){
var cid = $(this).attr("class");
getCategoryArchive.cid = cid;
postSelectedVal.fire();
});
});
})(jQuery);
かなりシンプルですが、クリックアクションでajaxを発火される例。
そして次、cidを受け取る _get_ajax_post_archive() を書いていきます。
こっちも練習用という事でシンプルに、
function _get_ajax_post_archive(){
// この中に処理を書いていく
$cid = $_POST["cid"];
$results = array();
$post_array = new WP_Query( array(
'post_type' => "post",
'cat' => $cid,
'order' => 'desc',
'orderby ' => 'modified',
) );
$count = 0;
while ( $post_array->have_posts() ) : $post_array->the_post();
$results[$count]["title"] = $post->post_title;
$results[$count]["guid"] = $post->url;
$count++;
endwhile;
wp_reset_postdata();
header('Content-Type: application/json; charset=utf-8');
echo json_encode($results);
die();
}
同一カテゴリ内のタイトル・リンクのみを入力します。
後は、jsで展開していくだけと。