WordPress管理画面でAjaxを呼び出す手順まとめ

最近WordPressの機能を拡張したくてAjaxを扱いたい場面がありました。

それで色々分からないながら試してみたのですが、慣れないことなので少し難しかったです。

ということで記憶を整理するためにWordPress管理画面でAjaxを呼び出す手順をまとめます。

ただしフロントエンド(実際のページ)ではまた違った手順なのでその点はご注意を

このページの目次

Ajaxとは何か
管理画面でのAjaxの呼び出し方
ここまでのまとめ

Ajaxとは何か

初めにAjaxについて少し説明

知っている人はここは飛ばしてください。

Ajaxっていうのは「Asynchronous Javascript+XML」の略で画面遷移をせずにサーバーとブラウザ間で通信できるプログラミング手法のことです。

例えばPHPならリクエストがあると次のような手順で画面を作っていきますよね？

サーバーからPHPを実行
PHPからHTMLを出力
HTML内のJavaScriptを実行

最初にPHPが呼び出されてHTMLやスクリプトを出力します。

でも同じ画面上でさらにPHPを実行することは不可能です。

しかし同じ画面上で画面遷移をしなくてもPHPなどが実行できるのがAjax技術です。

画面選をしなくて済むので例えば次のようなことが可能

ボタンを押したときにPHPを呼び出す
ウィジェット設定をその場で保存できる
PHPから動的に要素を書き換えできる

こういう今までの枠組みにとらわれないことができるのがAjaxなんですね。

それでWordPressならこのAjaxが簡単に扱うことが可能です。

ただ呼び出し方が特殊なので初めての人は少し難しいと感じるかもしれません。

ということでここではその手順をまとめます。

管理画面でのAjaxの呼び出し方

ではWordPress管理画面でのAjax呼び出し手順について説明していきましょう。

その手順は次の通り

Ajax専用ライブラリSackを呼び込み
Ajaxを実行する関数の作成(JS側)
Ajaxで実行したい関数の作成(PHP側)

手順はこれだけです。

そして今回は例として次のようなモデルケースを使って説明します。

名前と年齢のテキスト欄と送信ボタンを用意
送信ボタンが押されたらJS側でAjax実行
PHP側で入力された名前と年齢をアラート表示

今回はアラート表示ですがもちろんPHP側から要素を書き換えたりなども可能です。

ではその手順について説明していきます。

手順１.PHP側でSackライブラリを読み込み

まずAjaxをそのまま扱うと大変なのでSackというAjax専用ライブラリをまず読み込みます。

どこで読み込むかというと管理画面のヘッダー部分(つまりheadタグの間)です。

スクリプトだからと言ってフッター部分で読み込むと動作しないので要注意

具体的には次のようにして読み込めます。

add_action('admin_print_scripts', 'my_admin_script' );

function my_admin_script(){

  ///JavascriptのSACKライブラリをAjaxに使用
  wp_print_scripts( array( 'sack' ));

  /// スクリプト開始 ?>
<script>
/** ここにAjax呼び出しのJSコードを書いていく */
</script>
  <?php /// スクリプト終了

}

add_action('admin_print_scripts', 'my_admin_script' );

function my_admin_script(){

///JavascriptのSACKライブラリをAjaxに使用

wp_print_scripts( array( 'sack' ));

/// スクリプト開始 ?>

/** ここにAjax呼び出しのJSコードを書いていく */

</script>

<?php /// スクリプト終了

}

'admin_print_scripts' というのがヘッダー部分にスクリプトを出力するのに使うフック名です。

このフックに対してスクリプトを実行する関数（my_admin_script）を結びつけてます。

上のコード中でSackライブラリのコードを出力しているのが次の行

wp_print_scripts( array( 'sack' ));

1	wp_print_scripts( array( 'sack' ));

以上でSackライブラリが利用できる状態になりました。

手順２.JS側でAjaxを実行する関数を作成

次にフォーム内で何かアクションが起こった時にAjaxを呼び出すJS関数を作ります。

PHP側ではなくJavaScript側でやることの説明なのでそこは注意してください。

では今回例として使うのは次のようなフォーム

名前 : <input type="your_name"><br>
年齢 : <input type="your_age"><br>
<button id="run_ajax_btn">送信</button>

名前 : <input type="your_name"><br>

年齢 : <input type="your_age"><br>

上のように名前と年齢を入力するテキスト欄と送信ボタンがあるだけの簡単なフォームです。

別に画面遷移があるわけではないのでformタグで囲む必要はありません。

そして上のフォームで送信ボタン押下時に呼び出すために次のようなJS関数を作ります。

function myRunAjax(){

  /** Sackインスタンスを作成 */
  var my_sack = new sack(
    "<?php bloginfo( 'wpurl' ); ?>/wp-admin/admin-ajax.php"
  );

  my_sack.execute = 1;
  /** メソッドにはPOSTを使う */
  my_sack.method = 'POST';
  /** PHP側でフックされるアクション名を指定 */
  my_sack.setVar( "action", "my_action_lookup" );

  /** 送信時にPHP側で受け取りたい値を色々設定 */
  /** ここから各自で変更 */
  my_sack.setVar( 'your_name', jQuery('#your_name').val() );
  my_sack.setVar( 'your_age', jQuery('#your_age').val() );
  /** ここまで各自で変更 */
  
  /** Cookieの設定 */
  my_sack.encVar( "cookie", document.cookie, false );
  /** 通信に失敗したときのエラー表示 */
  my_sack.onError = function(e) { 
    alert('Ajax error in looking up my_action_lookup' );
  };

  /** アクションに結び付けられたAjaxを実行 */
  my_sack.runAJAX();

}

function myRunAjax(){

/** Sackインスタンスを作成 */

var my_sack = new sack(

"<?php bloginfo( 'wpurl' ); ?>/wp-admin/admin-ajax.php"

);

my_sack.execute = 1;

/** メソッドにはPOSTを使う */

my_sack.method = 'POST';

/** PHP側でフックされるアクション名を指定 */

my_sack.setVar( "action", "my_action_lookup" );

/** 送信時にPHP側で受け取りたい値を色々設定 */

/** ここから各自で変更 */

my_sack.setVar( 'your_name', jQuery('#your_name').val() );

my_sack.setVar( 'your_age', jQuery('#your_age').val() );

/** ここまで各自で変更 */

/** Cookieの設定 */

my_sack.encVar( "cookie", document.cookie, false );

/** 通信に失敗したときのエラー表示 */

my_sack.onError = function(e) {

alert('Ajax error in looking up my_action_lookup' );

};

/** アクションに結び付けられたAjaxを実行 */

my_sack.runAJAX();

}

何をしているかについてはこのコードのコメントを見てください。

関数名と「 /** ここから各自で変更 */ 」～「 /** ここまで各自で変更 */ 」部分まではほとんどコピペでOKです。

ただし次の行は大事なので注目してください。

my_sack.setVar( "action", "my_action_lookup" );

1	my_sack.setVar( "action", "my_action_lookup" );

この行ではPHP側で使う 'my_action_lookup' というフック名を指定しています。

このフック名を後でadd_action関数で使うので自分の好きなフック名に置き換えてください。

あとは送信ボタンが押されたときにこの関数を実行するようにイベントを登録します。

jQuery(function(){
  jQuery('#run_ajax_btn').on('click', functio(){
    myRunAjax();
 });
});

jQuery(function(){

jQuery('#run_ajax_btn').on('click', functio(){

myRunAjax();

});

以上でJavaScript側での準備は終わりです。

手順３.PHP側でAjaxから呼び出される関数を作成

最後にPHP側でJS側で送信ボタンが押されたときに実行したい関数を作成します。

そのコード例は次の通り

add_action( 'wp_ajax_my_action_lookup', 'my_action_lookup' );

/** Ajax実行されたときに実行したい関数 */
function my_action_lookup(){

  /** 送信されたPOST変数を受け取る */
  $name = $_POST['your_name'];
  $age = $_POST['your_age'];

  /** 返り値としてスクリプトを実行 */
  $script = <<< EOM
alert('名前 : ${name}, 年齢 : ${age}');
EOM;
  die($script);

}

add_action( 'wp_ajax_my_action_lookup', 'my_action_lookup' );

/** Ajax実行されたときに実行したい関数 */

function my_action_lookup(){

/** 送信されたPOST変数を受け取る */

$name = $_POST['your_name'];

$age = $_POST['your_age'];

/** 返り値としてスクリプトを実行 */

$script = <<< EOM

alert('名前 : ${name}, 年齢 : ${age}');

EOM;

die($script);

}

これで送信ボタンが押されたときに送信された名前と年齢のアラートが表示されます。

上のPHPコードで重要なのは次の部分

add_action( 'wp_ajax_my_action_lookup', 'my_action_lookup' );

1	add_action( 'wp_ajax_my_action_lookup', 'my_action_lookup' );

先ほどJavaScriot側でフック名（この例なら 'my_action_lookup' ）を指定しましたよね。

そのフック名を 'wp_ajax_指定したフック名' としてadd_actionの第１引数に渡しています。

必ず先頭に 'wp_ajax_' が必要なのでそれを忘れないように要注意です。

あとはadd_actionの第２引数に渡した関数が実行されるという訳です。

ちなみにクラス内で呼び出すならadd_action関数は次のように書き換える必要があります。

add_action( 
  'wp_ajax_my_action_lookup',
  array( $this, 'my_action_lookup' ) 
);

add_action(

'wp_ajax_my_action_lookup',

array( $this, 'my_action_lookup' )

);

クラス内の関数を実行したいなら $this を付け加えなければならないことに注意ですね。

またadd_actionに登録する関数が public になっているかも確認もお忘れなく

ここまでのまとめ

もう一度WordPress管理画面でのAjax呼び出し手順をまとめると次の通り

Ajax専用ライブラリSackを呼び込み(PHP側)
ただし管理画面のヘッダー部分で呼び出さなければならないことに注意
Ajaxを実行する関数の作成(JS側)
ボタン押下などのイベントが起きた時に呼び出される関数
この関数内でPHP側のadd_action関数で使うフック名の一部を指定
Ajaxで実行したい関数の作成(PHP側)
add_actionでAjaxが実行されたときに呼び出される関数
この関数内では返り値としてスクリプトが返せるので要素の書き換えが可能