WordPressで投稿などを非同期で表示する方法【実装まで10分】

先日業務にて、外部サイトのコンテンツをサーバー側で処理して表示する機能を実装しました。
登録されたURLから、Curlでメタタグを取得し展開、それを数十ページ分取得→展開という動作です。
そのため、1ページを読み込むために10秒ほどページが表示されないというめちゃ重ページが完成しました。。（もっと他のやり方があったはず。。）

さすがに10秒も表示されないページはまずいので、非同期でこれを実行し表示できないかと思案。
そこで思いついたのが、jQueryのAjaxの使用です。

Ajaxで処理して表示させることにより、ページの表示自体は3秒以内に収めることができました。
コードも難しくなく、jQueryとPHPを数行書き足すだけで実装できます！

実装内容

記載箇所は、表示したいページのPHPと、functions.phpです。

pageｰxx.php

<div id="asyncArticles"></div> <!--Ajaxで取得したオブジェクト(HTML)を入れるための箱。-->
<p id="attrText">読み込み中...</p> <!--読み込み中、代わりに表示されるテキスト。-->

<script type="text/javascript" defer>
$(function(){
 $.ajax({
  type: "POST", //必須。
  url: "https://www.domain.com/wp-admin/admin-ajax.php", //必須。admin-ajax.phpまでのパス。
  cache: false,
  data: {
   action : 'my_ajax_action', //必須、自由に設定できる。functions.phpで関数名として使います。
   genre : 'genreA', //必須でない。functions.phpで使用する変数をここで指定できる。
   num : 10, //必須でない。functions.phpで使用する変数をここで指定できる。
   desc : 24, //必須でない。functions.phpで使用する変数をここで指定できる。
  },
  success: function(content){ //引数に指定した変数を、関数内で使用している。この例では $("#asyncArticles")の中にhtmlとして(content)を挿入している。
   $("#asyncArticles").html(content); //Ajaxで取得したオブジェクトを入れる箱(HTML)を指定。
   $('#attrText').remove(); //読み込み中のテキストを消去する。
  },
  error:function(){
   console.log('error'); //必須でない。検証しやすいように設定しておくと良い。
  }
 });
});
</script>

コード内コメントでも記載していますが、PHP処理を“myajax(data内action名)”関数で引き取って、処理内容をオブジェクトとしてIDが#asyncArticlesに挿入。
上記処理後はオブジェクトを表示させるまでに代わりに表示させていた「読み込み中…」の要素を削除しています。

また、Ajax取得エラーの際はコンソールに「error」と表示させるようにしています。

functions.php

function my_ajax() { //この中でAjaxで処理したいPHP機能を実行、表示させたいオブジェクトを取得する。ここでは変数をAjaxから引き取り、kansuAを実行している。
 $genre = $_POST["genre"]; //Ajaxで指定した変数をPHP変数に変換。
 $feature_num = $_POST['num']; //Ajaxで指定した変数をPHP変数に変換。
 $count_desc = $_POST['desc']; //Ajaxで指定した変数をPHP変数に変換。
 $html = kansuA($genre, $feature_num, $count_desc); //実行したい関数など。
 echo $html; //
 wp_die(); //必須。関数実行を停止する。
}
add_action( 'wp_ajax_my_ajax_action', 'my_ajax' ); //第一引数にjQueryで設定した関数名を使用。第二引数に呼び出すPHP関数を指定。
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax' ); //第一引数にjQueryで設定した関数名を使用。第二引数に呼び出すPHP関数を指定。

Ajaxから変数を受け取り、PHP処理を行っています。
この例では、Curlでメタタグを取得しHTML展開する別の関数「kansuA()」を実行して、内容を変数「$html」で受け取っています。
最後に「$html」をエコーして、アクションフックでオブジェクトを送信しています。

応用

WordPressのAjax非同期読み込みは、次のようにも利用できます。

「もっとみる」で投稿を表示する

応用とは書きましたが、むしろこの目的で多くAjax読み込みが使用されていると思います。

もっとみるをクリックすると、投稿を追加読み込みする機能です。

<div id="asyncArticles"> <!--Ajaxで取得したオブジェクト(HTML)を入れるための箱。-->
。<!--既に読み込み、表示されているオブジェクト-->
。
。
</div>
<button id="moreBtn">もっとみる</button> <!--読み込みボタン。-->
<p id="attrText">読み込み中...</p> <!--読み込み中、代わりに表示されるテキスト。-->

<script type="text/javascript" defer>
$(function(){
  $('#moreBtn').on('click',function(){
  $('#moreBtn').hide(); //読み込み中のテキストを非表示にする。
  $('#attrText').show(); //読み込み中のテキストを表示する。
   $.ajax({
    type: "POST", //必須。
    url: "https://www.domain.com/wp-admin/admin-ajax.php", //必須。admin-ajax.phpまでのパス。
    cache: false,
    data: {
     action : 'my_ajax_action', //必須、自由に設定できる。functions.phpで関数名として使います。
     genre : 'genreA', //必須でない。functions.phpで使用する変数をここで指定できる。
     num : 10, //必須でない。functions.phpで使用する変数をここで指定できる。
    },
    success: function(content){ //引数に指定した変数を、関数内で使用している。この例では $("#asyncArticles")の中にhtmlとして(content)を挿入している。
     $("#asyncArticles").html(content); //Ajaxで取得したオブジェクトを入れる箱(HTML)を指定。
     $('#attrText').hide(); //読み込み中のテキストを非表示にする。
      $('#moreBtn').show(); //読み込み中のテキストを表示する。
    },
    error:function(){
     console.log('error'); //必須でない。検証しやすいように設定しておくと良い。
    }
   });
  });
});
</script>

functions.php

function my_ajax() {
 $genre = $_POST["genre"]; //Ajaxで指定した変数をPHP変数に変換。
 $get_num = $_POST['num']; //Ajaxで指定した変数をPHP変数に変換。
 //投稿のループをここで記述。ループ内で要素を取得しエコーする。
 wp_die();
}
add_action( 'wp_ajax_my_ajax_action', 'my_ajax' ); //第一引数にjQueryで設定した関数名を使用。第二引数に呼び出すPHP関数を指定。
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax' ); //第一引数にjQueryで設定した関数名を使用。第二引数に呼び出すPHP関数を指定。

おわりに

jQueryでPHP関数を実行できるので、非同期読み込み以外にも様々な活用方法がありそうです。

また、汎用性のある関数をfunctions.phpに記述しておけば、WordPressのCMSからjQueryを記述するだけでPHP関数処理のオブジェクトをサーバーを開かず取得表示できそうです。
運用面でも可能性が広がりそうですので、ぜひご活用ください！