WordPressカスタムフィールドのデータをAjax通信で取得する方法

WordPress側でドメインが違うサイトからのAjax通信を有効にする

/wordpress/wp-admin/admin-ajax.php内に以下を追加する。

header("Access-Control-Allow-Origin: *");

WordPress側でAjax通信があった際のアクションを定義する

/wordpress/wp-includes/functions.php内に以下を追加する。

add_action('wp_ajax_get_data', 'get_data');
add_action('wp_ajax_nopriv_get_data', 'get_data');

function get_data() {
    $id = {受け取りたいカスタムフィールドが設定されている最初の投稿のID};
    $num_posts = {受け取りたいカスタムフィールドが設定されている投稿数};
    $results = array();
    for ($i=0; $i < $num_posts; $i++) {
        $res[0] = get_post_meta($id + $i, {カスタムフィールドのフィールド名}, true);
        $res[1] = get_post_meta($id + $i, {カスタムフィールドのフィールド名}, true);
        $res[2] = get_post_meta($id + $i, {カスタムフィールドのフィールド名}, true);
        array_push($results, $res);
    }
    echo json_encode($results, JSON_UNESCAPED_UNICODE);
    die();
}

add_action関数の第一引数は後述するAjax通信のdata部分で指定しているものと対応していなければいけません。（最初のwp_ajax_までは無視される。）第二引数はfunctions.phpファイル内のどの関数を呼び出すかを指定している。

カスタムフィールドのデータはget_post_meta関数で取得します。

ブラウザ側からAjax通信を行う

const url = 'http://{ドメイン名}/wp-admin/admin-ajax.php';
jQuery(function ($){
    $.ajax({
        type: 'POST',
        dataType: 'json',
        crossDomain: true,
        url: url,
        data: {
            action : 'get_data'
        },
        success: function(response){
            {受け取ったデータで任意の処理}
        }
    });
});

$.ajax引数内dataのactionと、前述したadd_action関数の第一引数（wp_ajax_を除いた部分）が一致していなければいけません。