WP REST APIを活用したヘッドレスCMS入門

ヘッドレスCMSとは？WordPressでもできるの？

ヘッドレスCMSとは、「バックエンドとフロントエンドを分離したCMS」のことを指します。

WordPressは本来、テーマファイルによってフロントも含めてレンダリングするサーバーサイドのCMSですが、REST APIを使うことで、サーバー側は管理系統のみとして活用し、フロントは自由にコードで作ることが可能になります。

メリット

• 強力な管理画面を使い回せる
• フロントはVue/ ReactなどでSPA化も可能

デメリット

• WPのテーマやプラグインが使えない場合も
• 非エンジニニアには解析が困難

WP REST APIの基本と使い方

WordPressのバージョン4.7以降では、基本的なREST APIがコアとして実装されています。

サンプルURL

GET https://example.com/wp-json/wp/v2/posts

レスポンス例

[
  {
    "id": 123,
    "title": { "rendered": "記事のタイトル" },
    "excerpt": { "rendered": "サマリー..." },
    "content": { "rendered": "本文HTML..." }
  }
]

利用可能なエンドポイント

• /posts (通常の投稿)
• /pages
• /categories
• /custom_post_type (カスタム投稿。後述の設定が必要。)

APIでデータを取得して表示するまで

例えば、Vanilla JavaScriptでデータを取得して表示する例を簡単に紹介します。

<ul id="post-list"></ul>
<script>
fetch('https://example.com/wp-json/wp/v2/posts')
  .then(res => res.json())
  .then(posts => {
    const list = document.getElementById('post-list');
    posts.forEach(post => {
      const li = document.createElement('li');
      const link = `https://example.com/${post.slug}`;
      li.innerHTML = `<p><a href="${link}">${post.title.rendered}</a></p>`;
      list.appendChild(li);
    });
  });
</script>

Vue.jsやReactでは

REST APIを活用してWordPressの投稿データを取得・表示する方法は、Vue.jsやReactなどのモダンなフレームワークでも基本的には共通です。

以下にそれぞれの実装例を紹介します。

Vue.js（Composition API）での例

<template>
  <ul>
    <li v-for="post in posts" :key="post.id">
      <h2><a :href="`https://example.com/${post.slug}`">{{ post.title.rendered }}</a></h2>
    </li>
  </ul>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const posts = ref([]);

onMounted(async () => {
  const res = await fetch('https://example.com/wp-json/wp/v2/posts');
  posts.value = await res.json();
});
</script>

React（useEffectフック）での例

import { useEffect, useState } from 'react';

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://example.com/wp-json/wp/v2/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h2>
            <a href={`https://example.com/${post.slug}`}>{post.title.rendered}</a>
          </h2>
        </li>
      ))}
    </ul>
  );
}

export default PostList;

これらの実装により、WordPressの投稿データを自由に表示・加工でき、完全にカスタマイズされたフロントエンドを構築できます。

また、Axiosを使えばリクエスト処理のカスタマイズも容易で、認証ヘッダーの追加なども簡単に対応できます。

補足：Axios版（Vue/React共通）

import axios from 'axios';
axios.get('https://example.com/wp-json/wp/v2/posts')
  .then(response => {
    console.log(response.data);
  });

プロジェクト規模が大きくなる場合は、APIクライアントの共通化や型定義（TypeScript）も併せて検討すると保守性が高まります。

カスタム投稿・ACFのデータも取得するには？

カスタム投稿

カスタム投稿タイプをREST APIに公開するためには、register_post_type()関数でshow_in_rest => trueを指定する必要があります。

function create_custom_post_type() {
    register_post_type('news', [
        'label' => 'お知らせ',
        'public' => true, // 管理画面にも表示し、サイトに公開される
        'has_archive' => true, // アーカイブページを持つ
        'menu_position' => 5, // 管理画面のメニューの表示位置
        'menu_icon' => 'dashicons-megaphone', // アイコン（WordPress標準のアイコンセット）
        'show_in_rest' => true, // REST APIに公開する
        'supports' => ['title', 'editor', 'excerpt', 'thumbnail'], // 投稿画面で使う機能
    ]);
}
add_action('init', 'create_custom_post_type');

このようにすることで、以下のエンドポイントが自動的に使えるようになります：

GET https://example.com/wp-json/wp/v2/news

REST APIからもVueやReactなどのフロントエンドで簡単にデータ取得が可能になります。

CPT UIなどのプラグインを使用している場合

CPT UI（Custom Post Type UI）などのプラグインでカスタム投稿タイプを作成している場合も、「REST APIで表示」オプションをTRUEにすることで、show_in_rest: true が内部的に設定され、同様にAPI経由でアクセスできます。

設定方法：

1. WordPress管理画面 > CPT UI > 投稿タイプの編集
2. 対象の投稿タイプを選択
3. 「REST API で表示」にチェック
4. 保存

この設定が有効であれば、PHPコードを自分で書かなくても、REST APIに/wp-json/wp/v2/{post_type}でアクセスできるようになります。

ACFのREST API連携

Advanced Custom Fields（ACF）は、投稿やページにカスタムフィールドを簡単に追加できる人気プラグインですが、デフォルトのREST APIにはACFのフィールドは含まれません。そのため、ヘッドレスCMSとしてACFのデータを活用するには、以下のいずれかの方法で対応する必要があります。

方法1：プラグイン「ACF to REST API」を使う

• プラグイン名：ACF to REST API（開発元：airesvsg）
• WordPressのプラグイン検索からインストール可能

このプラグインを有効化すると、自動的に以下のようなレスポンスにACFのカスタムフィールドが追加されます：

{
  "id": 123,
  "title": { "rendered": "記事タイトル" },
  "acf": {
    "custom_text": "カスタムテキストの内容",
    "image": {
      "url": "https://..."
    }
  }
}

方法2：register_rest_field()で自作する

プラグインを使いたくない場合や、特定のフィールドだけを追加したい場合は、以下のように自作も可能です：

add_action('rest_api_init', function() {
    register_rest_field('news', 'custom_text', [
        'get_callback' => function($post_arr) {
            return get_field('custom_text', $post_arr['id']);
        },
        'schema' => null,
    ]);
});

このコードでは、「news」投稿タイプに custom_text というACFフィールドをREST APIのレスポンスに追加しています。

応用：複数のカスタムフィールドを一括追加する

add_action('rest_api_init', function () {
    register_rest_field('news', 'acf_fields', [
        'get_callback' => function($post_arr) {
            return [
                'text' => get_field('custom_text', $post_arr['id']),
                'image' => get_field('main_image', $post_arr['id'])
            ];
        },
    ]);
});

このようにしておくと、フロントエンド側（例：JavaScriptやVue/React）でREST APIのレスポンスを受け取った際に、以下のような形でデータにアクセスできます：

fetch('https://example.com/wp-json/wp/v2/news')
  .then(res => res.json())
  .then(posts => {
    posts.forEach(post => {
      console.log(post.acf_fields.text); // custom_textフィールドの値
      console.log(post.acf_fields.image.url); // main_imageフィールドの画像URL
    });
  });

このように、acf_fields というキーの中に自由な構造でカスタムフィールドのデータをまとめておくことで、フロントエンドからのアクセスが簡潔で見通しやすくなります。

注意点

• ACF Proを使用している場合、Flexible ContentやRepeaterなどの複雑なフィールドも同様に取得可能です。
• ただし、Field GroupがREST APIで正しく出力されるように「位置ルール」に注意（例：特定の投稿タイプに適用しているか）
• 認証が必要なフィールドは表示されない場合があるため、パブリックデータのみを想定しておくと安全です。

まとめ：WordPressをもっと柔軟に活用しよう

WordPressはREST APIを使うことで、従来のテーマベースの運用にとらわれず、自由度の高いフロントエンドと組み合わせることが可能になります。

VueやReactといったモダンなフレームワークとの連携も容易になり、デザイン性やパフォーマンスに優れたウェブサイトを構築する土台となります。とくにSPA（Single Page Application）やPWA（Progressive Web App）など、動的かつ高速なサイトを求めるケースにおいては、ヘッドレスCMS構成が非常に有効です。

また、既存のWordPress管理画面や投稿フローを活かしながら、社内向けの管理ツール、スマートフォンアプリ、マルチチャネル配信の基盤としても利用できます。

「CMSは遅い、やりたいことができない」という刻印を変える方法として、ヘッドレス化は非常に有力な選択肢になります。

この方式を一度練習しておくと、任意のフロント技術との連携やAPIベースの開発にもスムーズに対応できるようになります。ぜひ一度、自分のプロジェクトで試してみてください。