勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

WordPressで構築されたサイト内でAjax通信を行う方法

   2025/08/01  WordPress CMS

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 CMS

  関連記事

WordPressのPolylangで言語毎に分岐処理する方法

WordPressで多言語サイトを作成するにあたりPolylangというプラグイ ...

WordPressで翌日以降に編集した記事のみ最終更新日を表示する方法

WordPressで翌日以降に編集した記事のみ最終更新日を表示させたい。逆に言う ...

WordPressのContact Form 7から送信した内容をダッシュボードから確認及びCSVファイル化する方法

WordPressのContact Form 7プラグインで実装されたお問い合わ ...

WordPressでスケジュール実行される日時を調べる方法

WordPressであるシステムを実装し、その際に毎日1回スケジュール実行(WP ...

Contact form7でフォーム送信時に別サーバへもデータを送信する方法

contact form7でフォーム送信時に別サーバーでフォーム内容をPOST送 ...