前回、WordPress(ワードプレス)でログ出力する方法について書きました。
ログを必要とする理由は Ajax(非同期通信)のプログラムが正しく動作しているかのデバッグ用でしたが、そもそも「WordPressでAjaxってどうやってやるの？」っと疑問に思っている人もいますよね。
この記事を見に来たということは、Ajax を使ってみたいなっと思ったからではありませんか？
文字や画像だけの記事を投稿する分には出番のない Ajax ですが、記事の中で軽くアンケートを取ってみたり、計算をさせるような機能を盛り込もうと思うと Ajax が最適です。
今回は WordPress で Ajax を利用する方法について説明していきます。
子テーマを作成する
WordPress で Ajax を利用するには、テーマ内の PHP ファイルを編集(カスタマイズ)する必要が出てきます。
私は主に「JIN」という有料テンプレートを使っていますが、他のテーマでカスタマイズする場合も同様に、子テーマを作っておくと安心です。
(テーマがアップデートされても影響を受けません)
ちなみに JIN では、子テーマのテーマファイルがダウンロード提供されているのでそちらを利用します。
他のテーマをお使いの方も、子テーマが提供されていないか公式サイトで確認してみましょう。子テーマがない場合は自分で子テーマの構成を準備する必要があります。
JIN の子テーマの設定方法についても説明しようかと思ったのですが、以下のページにわかりやすくまとめられているので紹介しておきます。
インストールしたテーマ(今回の場合はJIN)に対してコードを書き換えるなどのカスタマイズを行う場合、直接JINのファイルを書き換えるのではなく子テーマをインストールして子テーマの方をカスタマイズすると便利です。
functions.phpの編集
子テーマを作成したら、WordPress の左メニューから「外観 – テーマエディター」を選択します。
すると、子テーマで編集可能なファイルが表示されるので、画面右から「functions.php」を選択します。
このファイルに、Ajax で呼び出された際の処理を記述していきます。
早速、サンプルプログラムの紹介といきたいのですが、その前に以下の 2 つの情報を決めておきましょう。
・アクション名
・関数名
それぞれについて、具体的に説明していきます。
アクション名の決定
まずは、アクション名を決めます。
WordPress のアクション名は、画面側で作成する JavaScript などから Ajax でプログラムを呼び出す際に、どの処理を行うかを決めるものになります。
Ajax で呼び出される処理を複数作りたいという需要もありますから、処理ごとにアクション名を付けてマッピングしてあげる必要があります。
例えば、誕生日から年齢を計算するような処理を作る場合は「age」という名前が良さそうですし、星座から今日の運勢を表示するものであれば「fortune」とかが妥当でしょうか。
・年齢計算(age)
・星座占い(fortune)
関数名の決定
次に関数名を決めます。
関数名に細かいルールはありませんが、先ほどのアクション名を含めておくとわかりやすいですね。
アクション名が age なら「calc_age」とか、fortune なら「calc_fortune」とかでもいいと思います。
・年齢計算(calc_age)
・星座占い(calc_fortune)
サンプルプログラム
では、誕生日から年齢を計算する処理を作ってみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 | function calc_age() { // $birthday に 1970-01-01 や 1970/01/01 が入ってくるイメージ $birthday = $_POST['date']; $age = floor((date('Ymd') - date('Ymd', strtotime($birthday))) / 10000); $data = ['birthday' => $birthday, 'age' => $age]; header('Content-Type: application/json; charset=UTF-8'); echo json_encode($data); die(); } add_action('wp_ajax_age', 'calc_age'); add_action('wp_ajax_nopriv_age', 'calc_age'); |
これで 1 セットとなります。即席なのでエラーチェックがないプログラムですみません・・・。
1 行ずつ説明していきます。
・関数名は calc_age とする
・POST値から誕生日を取得する
・誕生日から年齢を計算する
・JSON 形式でレスポンスする
・アクションを設定する
関数名は先ほど紹介した通り、「calc_age」にしてみました。
この中にメインとなる処理を記述していきます。今回だと生年月日から年齢を計算してレスポンスする流れですね。
次に WordPress の add_action() 関数を使って、Ajax 経由で呼び出される関数をアクション名とマッピングします。
以下に先ほど決めた「アクション名」と「関数名」を埋め込めば OK です。簡単ですよね。
add_action(‘wp_ajax_[アクション名]’, ‘[関数名]’);
add_action(‘wp_ajax_nopriv_[アクション名]’, ‘[関数名]’);
「wp_ajax_nopriv_」から始まるものと「wp_ajax_」の 2 つがありますが、これは WordPress にログインしているユーザ(管理者)のみに適用するかどうかの違いですので、一般公開する記事であれば両方設定しておいてください。
これで Ajax で呼び出される側の処理は完成です。
JavaScriptの作成
Ajax の通信を利用して画面の中の文字や領域を書き換える場合、一般的には JavaScript を使って実現させることが多いです。
WordPress には jQuery というライブラリが標準で搭載されているので、これを利用すればすぐにできますね。
ちなみに、JIN のテンプレートでは標準の jQuery がデフォルトでオフになっています。
同様のテーマをお使いの方は、jQuery のライブラリをヘッダ部分で読み込んであげるといいですね。
(この方が都合が良かったりします)
1 | <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script> |
では、JavaScript で先ほどの年齢計算の処理を呼び出してみましょう。
こちらも、バリデーションを省いた即席のソースコードですみません。
注目するところは POST のパラメータ部分で、「action」というキーに対して先ほど決めたアクション名「age」を指定しています。
このアクション名で、「呼び出したいプログラムを切り替える」と覚えておくといいですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(document).ready(function() { $(document).on('click', '#js_calc', function() { var date = $('#js_date').val(); $.ajax({ type: 'POST', url: '/wp-admin/admin-ajax.php', data: { 'action': 'age', 'date': date }, success: function(data) { $('#js_age').html(data.info); return false; }, error: function() { alert('年齢の計算に失敗しました。'); return false; } }); }); }); |
これを JS ファイルに記述して記事内から外部ファイルとして読み込んでもいいですし、「Scripts n Styles」などのプラグインを使って記事の最下部に記述しても問題ありません。
なお、WordPress で標準搭載している jQuery を使う場合は、$ を全体的に jQuery という文字列に書き換えるか、function() に引数で jQuery を渡してあげて、内部で $ として使用する必要があります。
まとめ
WordPress で Ajax を使用する方法を紹介しました。
ポイントは大きく 2 つ
・functions.phpに処理を定義する
・JavaScriptからAjaxで処理を呼び出す
WordPress のバージョンやお使いのテーマによって異なる部分があるかもしれませんが、非同期の処理が必要なサイトにおいては、この方法で実現しています。
普段、プログラムは書いているけど WordPress を使うのが初めてという方であれば、すぐにイメージしてもらえるのではないでしょうか。
