WordPressで構築されたサイト内でAjax通信を行う方法
2025/08/01
WordPressで構築されたサイト内でボタンクリック時等にAjax通信を行いたいというケースがあった。適当なディレクトリに処理用のファイルを設置し、そちらに対してリクエストしても正常に動作せず、何故なのか調べたところWordPress用のお作法みたいなのがあるらしい。以下に対応方法をメモ。
目次
対応方法
Ajax送信側
Ajax送信したいページ(ファイル)に以下を記述する。
admin_url()はWordPress用関数になるが、これを使いたくない(JSファイルで完結させたいような)場合は「/wordpress/wp-admin/admin-ajax.php」のように適宜変更すること。
$(document).on(`click`, `.button`, function(){ $.ajax({ url: `<?php echo admin_url("admin-ajax.php")?>`, //admin-ajax.phpに対して送信(ここは固定) type: 'POST', data: {}, //何らかのデータを送信する場合はこちらで指定 }).done(function( result ){ }).fail(function() { }).always(function() { }); return false; });
受信側
functions.php等に以下を記述する。wp_ajax_{$action}はログイン済みユーザー、wp_ajax_nopriv_{$action}は未ログインのユーザーによるAjaxアクションを実行するためのフックになる。
function ajax_function(){ //何らかの処理 //値を返したい場合はechoで出力 echo $result; //終了させる wp_die(); } add_action( 'wp_ajax_ajax_function', 'ajax_function' ); add_action( 'wp_ajax_nopriv_ajax_function', 'ajax_function' );
リファレンス
admin_url
https://developer.wordpress.org/reference/functions/admin_url/
do_action( "wp_ajax_{$action}" )
https://developer.wordpress.org/reference/hooks/wp_ajax_action/
do_action( "wp_ajax_nopriv_{$action}" )
https://developer.wordpress.org/reference/hooks/wp_ajax_nopriv_action/
関連記事
-
-
WordPressにてPHPのAPCuを使用して高速化を図る方法
先日本サイトのサーバにAPCuを導入した。しかしながら所感にも書いたとおりAPC ...
-
-
WordPressで複数あるクリック広告をランダムで表示させる方法
同じクリック広告をずっと貼っているとクリック単価が下がると聞いた。WordPre ...
-
-
WordPressで画像にカテゴリを設定し、記事投稿の際の画像選択時に指定したカテゴリの画像のみ表示させる方法
WordPressのメディアライブラリに画像を沢山登録していると、記事投稿の際の ...
-
-
WordPressで実行されているSQL文をページ上に表示する方法
WordPressにてWP_Queryで記事を取得しようとしたものの希望の挙動に ...
-
-
WordPressでユーザー毎にフラグを持たせ分岐処理を行う方法
WordPressでユーザー毎に何らかのフラグを持たせて、フラグによって分岐処理 ...