WordPressでjQueryのAjax処理

  • このエントリーをはてなブックマークに追加

wordpressを使用しない場合と比べて対応方法が異なります。

プラグインでAjaxを使う方法はWP Codex の AJAX in Pluginsにて掲載がありますが、今回は対応する際に使用している方法を記事にしています。作業の流れは次のようになります。

1:functions.php でajaxを使用可能にするURLを追加
2:phpで非同期にデータを取得する記述
3:jQueryのajaxを用いてphpからデータを受け取る記述

1:functions.php でajaxを使用可能にするURLを追加

通常のajaxであればurlにターゲットとするurlを指定するのですが、wordprssの場合は admin-ajax.php を利用する必要があるそうです。二つ目のcodexの引用文にちらっと書いてある’admin side’とそうでない場合の違いは、「2:phpで非同期にデータを取得する記述 」にて。

To parse AJAX, WordPress must be reloaded through the admin-ajax.php script

https://codex.wordpress.org/AJAX_in_Plugins#Debugging

Note: Unlike on the admin side, the ajaxurl javascript global does not get automatically defined for you, unless you have BuddyPress or another Ajax-reliant plugin installed. So instead of relying on a global javascript variable, declare a javascript namespace object with its own property, ajaxurl. You might also use wp_localize_script() to make the URL available to your script, and generate it using this expression: admin_url( 'admin-ajax.php' )

https://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side

なので、admin-ajax.phpを読み込む記述をヘッド内に追加しておきます。

2:phpで非同期にデータを取得する記述

functoins.phpやテーマファイルにファイルを新規追加して記述します。テスト用に、「ajax test」という文字列を返す関数を用意します。コード中にあるアクションについては後程説明。

9行目のwp_ajax_...はログインユーザーが利用可能にするもの。10行目のwp_ajax_nopriv_...は非ログインユーザーが利用可能にするものです。

So, if you want it to fire on the front-end for both visitors and logged-in users, you can do this:
add_action( ‘wp_ajax_my_action’, ‘my_action’ );

add_action( ‘wp_ajax_nopriv_my_action’, ‘my_action’ );

https://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side

3:jQueryのajaxを用いてphpからデータを受け取る記述

footer.phpに記述してもよいですし、個別のテーマファイルに記述してもよいです。

デバッグ・レスポンスの確認方法

Chromeなら開発者ツールのネットワークタブで確認できます。まずはネットワークタブを選択

Crome ネットワークタブ

続けて、ファイル名をクリックしてResponseを選択。

ファイ不明を選択してResponseをクリック

レスポンスを消しゴムで消してしまっていますが、真っ白のところに何かしら帰ってくる値が表示されます。今回であれば「ajax test」が出るはず。

codexに書いてあったデバッグ方法もメモ程度に。

ob_clean();
echo $whatever;
wp_die();


https://codex.wordpress.org/AJAX_in_Plugins#Debugging
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す