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

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

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

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

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

Ajaxとは何か

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

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

 

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

 

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

  1. サーバーからPHPを実行
  2. PHPからHTMLを出力
  3. HTML内のJavaScriptを実行

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

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

 

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

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

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

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

 

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

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

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

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

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

その手順は次の通り

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

手順はこれだけです。

 

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

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

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

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

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

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

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

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

 

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

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

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

 

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

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

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

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

そのコード例は次の通り

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

 

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

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

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

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

 

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

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

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

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

ここまでのまとめ

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

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

簡単にまとめるとこうなります。

 

Ajaxに初めて触れてみるとその便利さがよくわかりました。

まだまだ分からないことがあるので使いこなせるように勉強していこうと思います。

ではでは($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください