WordPressでAjax（非同期通信）

WordPressでAjax（非同期通信）を使用する方法です。WordPress内で必要なステップは３つとなります。

１．リクエスト送信先パスをJavaScrpitに渡す

WordPressでAjaxを使用する場合、リクエストをadmin-ajax.phpに送信する決まりになっています。admin-ajax.phpのパスは以下のようにして取得できます（PHPの場合）。

$ajax_url = admin_url('admin-ajax.php');

取得したパスをJavaScriptに渡す必要があります。渡す方法としては「wp_headアクションを使用する」、「テンプレートのヘッダに入れる」があります。
テンプレートでヘッダとして読み込んでいるファイルがあるなら、以下のように記述を追加するのが簡単です。

<script>
    var ajax_url = "<?php echo admin_url('admin-ajax.php');?>";
</script>

２．JavaScriptを記述する

JavaScriptからAjaxを利用するコードを記述します。jQueryを使用する場合、以下のようなコードになります。
ajaxを実行する際、dataにactionという項目を追加します。actionには実行されるPHP関数の名前を指定します（以下の例では、my_login_check）。

<input type="text" id="name">
<input type="password" id="pass">
<button type="button" id="send">送信</button>

<script>
$(function() {
    $('#send').on('click', function() {
        var id = $('#name').val();
        var pass = $('#pass').val();
        
        $.ajax({
            url: ajax_url,
            type: 'POST',
            dataType: 'text',
            data: {
                'action': 'my_login_check',  // 実行されるPHP関数
                'id': id,
                'password': pass
            }
        })
        .done(function(data) {
            alert(data);
        })
        .fail(function() {
            alert('失敗しました。');
        });
    });
});
</script>

３．呼び出されるPHPの関数を作成する

実行されるPHPの関数を、テンプレートのfunctions.phpに作成します。

function my_login_check()
{
    $id = filter_input(INPUT_POST, 'id');
    $pass = filter_input(INPUT_POST, 'password');
    
    if (($id === 'hoge') && ($pass === 'hage')) {
        echo '正しいユーザーです。';
    } else {
        echo '間違っています。';
    }
    
    die();
}
add_action('wp_ajax_my_login_check', 'my_login_check');
add_action('wp_ajax_nopriv_my_login_check', 'my_login_check');

作成した関数はアクションフックに登録します。
「wp_ajax_関数名」は、WordPressにログインしているユーザーの場合に実行されるアクションフックです。
「wp_ajax_nopriv_関数名」は、WordPressにログインしていないユーザーの場合に実行されるアクションフックです。
この例の場合、WordPressへのログイン状態にかかわらず、同じ関数が実行されることになります。

PHPの関数の最後にはdie()を入れておきます。これを入れなかった場合、以下のように末尾に0が付いてしまいます。

正しいユーザーです。0