WordPress で Ajaxを利用する

WordPress

2019.02.27

どうもfujiharaです。今年度も残す所1ヶ月となりましたね。今回はWordPressでAjax を利用する方法を今更ながらご紹介します。今更感ありますが、過去記事にもなかったのと最近知ったので紹介させてください。

背景

WordPress で Ajaxを使う場合自分でテーマディレクトリにファイル置いて、アクセスとか functions.php 内にRequest URIで判定して処理するような記述を書いていたんですが、使用しているプラグインとセットで機能を拡張しようとしていて眺めていたら wp_ajax_... って記述を見つけて覚えました。

WordPress ( add_action )


<php
...
add_action('wp_ajax_check_ajax', function() {
// 処理を記述
    echo json_encode([]);
    die();
});

add_action('wp_ajax_nopriv_check_ajax', function() {
// 処理を記述
    echo json_encode([]);
    die();
});

上記のように admin_ajax_{action_name}, admin_ajax_nopriv_{action_name} としてあげます。 nopriv がない場合はログインしているユーザ、ある場合はログインしていないユーザーになります。認証ユーザーにかかわらず処理が同じで良いなら2つとも action_name を併せて登録しましょう。ここでは action_name を check_ajax としています。(この値は重要です)

Javascript ( Fetch )


(POSTの場合)
let forms = new FormData();
forms.append('action', 'check_ajax');
fetch(
  '/wp-admin/admin-ajax.php', 
  {method: 'POST', body: form, cache: 'no-cache'}
)
  .then(response => response.json())
  .then(data => console.log(data));

(GETの場合)
fetch(
  '/wp-admin/admin-ajax.php?action=check_ajax', 
  {cache: 'no-cache'}
)
  .then(response => response.json())
  .then(data => console.log(data));

それぞれ、パラメータに先程登録した check_ajax という値を渡すと、 WordPress上で登録したものが実行されます。