WordPress で Ajaxを利用する

WordPress で Ajaxを利用する

どうも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上で登録したものが実行されます。

まとめ

いかがだったでしょうか?すごい簡単だと思うのでぜひお試しください。 データの登録に使用する場合は nonce を作成して 処理内でチェックをして上げてください。 これを1年前に知っていたら。。。。という自分への戒め記事にでした。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ