ページ内を賑やかにするためや、お客様からの依頼などで、非同期で外部のAPIを利用して情報を取得したいというお話は結構あると思います。
ただ、ワードプレスでAjaxを使おうとすると、「/wp-admin/admin-ajax.php」を介さないといけないといったような特有の決まりごとがいろいろ有るんですよね・・・
functions.phpやjavascriptファイルや処理を行うPHPスクリプトなど、あっちにも書いて、こっちにも記述してなど、若干ややこしく思えます。
実装したい内容によって違いはあるかと思いますが、PHPに慣れていて、Javascript側で色々と処理させるのが面倒と思われる方には、とりあえず稼働させるだけであればこれが楽なのかなと思えたのでまとめてみました。
Ajaxで外部のAPIを利用する事を想定しています。
functions.phpへの記述
まずは、「function.php」に非同期で動かしたいPHPファイルを読み込む処理を記述します。
ここではダイレクトにPHPファイルを指定しています。
function ajax_my_test() {
// Ajaxで機能させたいPHPファイルを指定
// ※このファイルでAPIにリクエストし、受け取ったjsonデータをHTMLなどに生成して吐き出す
require_once(get_template_directory().DIRECTORY_SEPARATOR.'hogehoge.php');
}
add_action('wp_ajax_my_test', 'ajax_my_test'); // ログイン済みユーザー向け
add_action('wp_ajax_nopriv_my_test', 'ajax_my_test'); // 非ログイン済みユーザー向け
Javascript（jQuery）の記述
AjaxはJavascriptで行う非同期の処理ですので、Javascriptの記述はある程度必要となります。
以下は、特定の要素がクリックされた時に「hogehoge.php」に処理を投げて、そこで生成されたHTMLソースを指定の要素内に表示させる感じです。
とりあえず、jQeuryで・・・
$('#GoAjax').on('click', function() {
// 決まりごととして記述 [サイトのURL]/wp-admin/admin-ajax.php
var ajaxUrl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
// フォームのデータをオブジェクト化
var fd = new FormData($('#AjaxForm').get(0));
// functions.phpに記述したメソッド（ajax_my_test）を使用する
fd.append('action', 'my_test');
$.ajax({
type: 'POST',
url: ajaxUrl,
data: fd,
processData: false,
contentType: false,
timeout: 5000,
dataType: 'html',
success: function( response ) {
alert('情報を取得出来ました！');
$('#Result').html(response);
},
error: function(xhr) {
alert('エラー！情報を取得出来ませんでした。');
},
complete: function(xhr, msg) {
}
});
});
jqueryの読み込み後に直接記述したり、Wordpressのフック「add_action」でフッター部分に反映させるなどして下さい。
メインの処理となるPHPの記述
そして最後に、APIへのリクエストをして、取得できたjsonデータをゴニョゴニョして表示させたいHTMLを生成し出力するPHPスクリプトです。
大分簡略化していますので、実際には受け取ったPOSTデータの検証作業や、表示したいHTMLを生成するための処理が必要になります。これはやりたい内容によってクラス化するなどした方が良いでしょう。
// Googleや楽天などWEB APIへリクエストするURLを生成する
// POSTの内容の検証や、APIサービスを利用するためのIDなどは省いています。
$request_url = https://xxxxxxxxxx.com?.http_build_query($_POST);
// エラー時もデータを取得できるように
$context = stream_context_create(array(
'http' => array('ignore_errors' => true, 'timeout' => 10)
));
// jsonデータを受け取る
$result = file_get_contents($request_url, false, $context);
$html = "";
if( $result === false ) {
// エラー時
// エラーの内容を把握する部分（ステータスコードやタイムアウトの判別など）は省いています。
$html = "<p>エラーがあります！</p>";
} else {
// 正常時
// 受け取ったjsonデータを連想配列に
$data = json_decode(html_entity_decode($result), true);
$html = create_html($data);
}
// HTMLソースを出力！
echo $html;
function create_html($data) {
// 受け取ったデータをアレコレして公開側で表示させたいHTMLにして返す
return "生成したHTMLソース"
}
以上です。
また、functions.php内でwp_localize_script()とwp_enqueue_script()を使用して、Ajax用のJavascriptを生成する方法もあったりします。
こちらではハッシュ値を使って正当性を確認してやり取りするなどもできますが、より厳密にしたいのであればこれらを活用する方が良いでしょうね。
たまにワードプレスに触れる程度の方はどこから手を付けていいか悩む事もあるのではと思いますが、決まり事を理解すればそれほど嫌悪感を抱かなくても良さそうです。
