【ACF to REST API】クリックした記事のデータを取得してHTMLへ挿入する方法

こんにちは、ゆうや（@yuyaphotograph）です！

この記事では、

WordPressプラグイン「ACF to REST API」を使って、クリックした記事のacfデータを取得し、それをHTMLへ挿入する方法が知りたい
ACF to REST APIを使った実践的なコードが見たい

という方のお悩みを解決します！

ぼくがWeb制作案件でACF to REST APIを初めて使ったときに、8時間以上費やして考えた末に辿り着いたコードを以下で紹介させていただきます。

ACF to REST APIでの記事データ取得で躓いている方のお役に立てれば幸いです。

前提
- ACF to REST APIを有効化
- Advanced Custom Fieldsのフィールド名を確認
クリック対象のWordPressサブループのコード
ACF to REST APIを使用してjsonをデータを取得&HTMLへ挿入するコード
まとめ

前提

ACF to REST APIを有効化

プラグイン「ACF to REST API」を導入していない場合は、管理画面の「プラグイン＞新規追加」から検索してインストール&有効化を済ませちゃいましょう。

有効化すると、管理画面の「設定＞パーマリンク設定」の１番下にACF to REST APIのURLが表示されます。

httpsから始まるフルパスになっていると思いますが、この記事で紹介するコードでは、どの環境でも対応できるように以下のように相対パスで記述します。

sample.js

../wp-json/acf/v3/投稿タイプスラッグ/

Advanced Custom Fieldsのフィールド名を確認

すでにACFのほうでフィールドグループを作成し、フィールド名など設定していると思います。

ここで注意点があって、フィールド名には「-」を使わないでいただきたいということです。

「-」のかわりに、「_」アンダースコアを使用していただきたいです。

例えば「news_item_title」のように。

そうしないと、後ほど紹介するjsコードで不具合が生じてしまいますのでご注意を。

クリック対象のWordPressサブループのコード

クリックする記事カードブロックのHTMLとサブループはこちらとなります。

ポイントは、Card-Itemにdata属性で投稿IDを挿入している点です。

これがないと、クリックしたときにその記事のデータを引っぱてくることができませんのでご注意を。

page-news.php

<div class="Card">
  <?php
    $args = array(
      'post_type' => "投稿タイプスラッグ",
    );
  ?>

  <?php
    $my_query = new WP_Query($args);
    if ($my_query->have_posts()): ?>
  <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>

  <div class="Card-Item JS_Click_ShowModal_Trigger" data-id="<?php the_ID(); ?>">
    何かしらの中身
  </div>

  <?php endwhile; ?>
  <?php endif; ?>
  <?php wp_reset_postdata(); ?>
</div>

ACF to REST APIを使用してjsonをデータを取得&HTMLへ挿入するコード

こちらが本命のACF to REST APIを使用してjsonデータを取得し、クリックした記事データをとってくるコードとなります。

ポイントは以下。

クリックした記事の投稿IDを変数postIDへ代入
ACF to REST APIのURLにpostIDをくっつけることで、クリックした記事のデータがあるURLにアクセス
クリックした記事の親要素をparentメソッドで取得
親要素の直後にafterメソッドでモーダルコンテンツを挿入（閉じるボタン付き）
acfのデータは、「results.acf.acfのフィールド名」で表示
「閉じる」をクリックしたときにremoveメソッドでモーダル削除
記事をクリックしたときに、表示されているモーダルがあればremoveメソッドで削除

$(function(){

  $('.JS_Click_ShowModal_Trigger').on('click', function(e){
    // 開いているモーダル全て削除
    if ($('.Modal').length) {
      $('.Modal').remove();
    };
    // クリックした記事の投稿ID取得
    let postId = $(this).data('id');
    // クリックした記事のデータを取得して、HTMLへ挿入&表示
    $.get( "../wp-json/acf/v3/投稿タイプスラッグ/" + postId, function(results) {
        $('.Card-Item[data-id=' + postId + ']').parent().after("<div class=\"Modal\"><div class=\"Modal-Content\"><div class=\"JS_Click_CloseModal_Trigger\">閉じる</div><p class=\"Modal-Content-Headline\">" + results.acf.acfのフィールド名 + "</p>" + "</div></div>");
    });
  });

  // 「閉じる」をタップでモーダル閉じる
  $(document).on('click', '.JS_Click_CloseModal_Trigger', function(){
    $(this).parents('.Modal').remove();
  });

});