フロントエンド側JS

今回はテンプレートファイルにJSを直接書いていきます。

functions.phpで読み込み設定したjQueryが使用できるように、必ずwp_headまたはwp_footer以降にJSを記述するようにします。

画面に表示されているボタンをクリックすると、jQueryでクリックイベントが発生して、AJAX通信処理が起動するようにします。

画面に表示するボタンは、nameをすべて”show-item”にして、データセレクタ（id）に投稿idを設定することで、イベント発生後に、対象の投稿データの取得が可能になります。

※投稿記事を一覧表示できるプラグインListCategoryPostsのテンプレートに少し手を加えてボタンを追加しました。

jQueryクリックイベントの取得と、AJAXの起動はjQueryで。

$("input:button[name=show-item]").click(function() {
  $selected_id = $(this).data("id");
 AJAX通信関数の呼び出し(引数：$selected_id);
});

AJAX通信もjQueryで行えるので簡単です。

AJAX通信関数：
$.ajax({
  type: 'GET',
  url: MY_AJAX.api,
  data: {
    //functions.phpで定義済み
    'action' : MY_AJAX.action,
    // アクションに対応するnonce
    nonce: MY_AJAX.nonce,
    'id': $selected_id,
  },
  //ajax通信エラー
  error : function(XMLHttpRequest, textStatus, errorThrown) {
    //   // エラー時のデバッグ用
    resultMsg("NG", "AJAX通信エラー");
  },
  success: function( callback ){
    if(callback.status=="OK") {
　　　　AJAXで取得した投稿データをダイアログボックスで表示する関数の呼び出し（引数：AJAX取得データ）
    }else{
      resultMsg(callback.status, callback.message);
    }
  }
});

バックエンド側PHP

バックエンド側では、JSからAJAX通信データが要求されたときに実行する関数をWPに登録する必要があります。

WPでAJAX通信をする場合は、決められた手続きに従って行う必要があります。

実際には、AJAX専用のフックをap_ajax_｛アクション名｝およびap_ajax_noprov_｛アクション名｝という命名方法で生成して、対象のアクション名に対応するコールバック関数を登録します。

add_action('wp_ajax_{アクション名}',{API関数名});
add_action('wp_ajax_nopriv_{アクション名}',{API関数名});

登録するコールバック関数はこちらです。

コールバック関数では、まずセキュリティのためnonceチェックを行います。

nonceチェックがOKなら、次にフロントエンド側で設定したパラメータを取得して、投稿データをフロントエンド側に返します。

function my_ajax_event() {
  // wp_create_nonce の引数に渡したものと同じ アクション名
  $action = 'my-ajax-action';

  // nonceのチェック
  // https://chaika.hatenablog.com/entry/2017/09/08/090000
  if( check_ajax_referer($action, 'nonce', false) ) {


    // Ajax(post)のdataから渡される値を使用する場合は $_POST から取得する (適時エスケープ)
    $id = intval( $_GET['id'] );
    //$name = esc_html( $_POST['name'] );

    // 投稿IDが10の投稿情報を取得
    $post_data = get_post($id);

    // 投稿IDが10の投稿タイトルを取得
    $title = $post_data->post_title;
    $content = $post_data->post_content;


    // 配列をjson形式にエンコード
    //$data = "<p>post_id=$id title=$title price=".print_r($price,true)."</p>";//</p>json_encode($data);
    $data = array(
      'id' => $id,
      'title' => $title,
      'content' => $content,
    );

  } else {
    // Ajaxに返す
    //status_header( '403' );
    header( 'Content-Type: application/json; charset=UTF-8' );
    echo json_encode(array('data'=> '', 'status' => 'NG', 'message' => "nonceチェックエラー", 'result' => ""));
    die();

  }

  // Ajaxに返す
  header( 'Content-Type: application/json; charset=UTF-8' );
  echo json_encode(array('data'=> $data, 'status' => 'OK', 'message' => "受信完了", 'result' => ""));

  die();
}

この本を１冊読めば、WordPress のアーキテクチャや開発手法がサクッと理解できる！というコンセプトで書かれた解説書です。

WordPressをカスタマイズしたい人にはおススメの良本です。WordPressは一歩踏み込んでカスタマイズするためには独特のアーキテクチャを理解する必要があります。私は独学でWordPressのカスタマイズを学びましたがほぼこの本のおかげです！