【WordPress】ヘッドレスCMS化への第一歩|REST APIを使って外部アプリと連携する方法

【WordPress】ヘッドレスCMS化への第一歩|REST APIを使って外部アプリと連携する方法 WordPress

WordPressは通常、フロントエンドとバックエンドが一体となったCMSですが、近年では「ヘッドレスCMS」としての活用も注目されています。ヘッドレス化とは、WordPressの管理機能(投稿・管理画面など)はそのままに、表示部分をReactやVue.jsなどの外部アプリで構築する方法です。

この記事では、WordPressをヘッドレスCMSとして活用する第一歩として、REST APIを使った外部アプリとの連携方法をわかりやすく解説します。

スポンサーリンク

WordPress REST APIとは?

WordPress REST APIは、WordPressのデータ(投稿、固定ページ、ユーザー、メディアなど)をJSON形式で取得・操作できる仕組みです。WordPress 4.7以降ではデフォルトで有効になっており、特別なプラグインを使わなくても簡単に利用できます。

以下のようなURLでREST APIにアクセスできます:

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

このURLにアクセスすることで、サイト内の投稿一覧をJSON形式で取得できます。

REST APIで取得できる情報

REST APIでは、さまざまなエンドポイントが用意されています。主なものを紹介します。

  • /wp/v2/posts:投稿
  • /wp/v2/pages:固定ページ
  • /wp/v2/categories:カテゴリ情報
  • /wp/v2/tags:タグ
  • /wp/v2/users:ユーザー情報(認証が必要)

クエリパラメータを組み合わせることで、ページネーションや検索なども可能です。

https://example.com/wp-json/wp/v2/posts?per_page=5&search=キーワード

外部アプリから投稿を取得して表示する

REST APIを使えば、JavaScriptのfetchやaxiosを使って外部アプリから投稿データを取得し、画面に表示することができます。以下は簡単な例です。

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => {
    data.forEach(post => {
      console.log(post.title.rendered);
    });
  });

このように、WordPressの投稿データを取得して任意のUIで表示することが可能になります。

認証が必要な操作について

投稿の新規作成や編集・削除など、読み取り以外の操作を行う場合には認証が必要です。以下のような認証方法が用いられます。

  • アプリケーションパスワード(WordPress 5.6以降対応)
  • JWT認証(プラグイン導入が必要)
  • OAuth認証

たとえば、アプリケーションパスワードを使ったBasic認証で投稿を作成するには、HTTPヘッダーに認証情報を含めてリクエストを送信します。

カスタムエンドポイントの追加

REST APIは拡張も可能です。たとえば、オリジナルのデータを返すエンドポイントを作成するには、register_rest_route()関数を使います。

add_action('rest_api_init', function () {
  register_rest_route('myapi/v1', '/hello/', array(
    'methods'  => 'GET',
    'callback' => 'my_custom_endpoint',
  ));
});

function my_custom_endpoint() {
  return array('message' => 'こんにちは、REST API!');
}

このコードをテーマのfunctions.phpに追加すると、/wp-json/myapi/v1/hello にアクセスしたときにカスタムメッセージを返すAPIが完成します。

よくある質問(FAQ)

Q. WordPressをヘッドレスCMSとして使う基本的な構成は?
A. WordPressのREST APIをコンテンツバックエンドとして使用し、フロントエンドをNext.js・Nuxt.js・Gatsby等で構築します。WordPressは管理画面とAPIエンドポイントのみを担当します。
Q. REST APIで記事一覧を取得するエンドポイントURLは?
A. /wp-json/wp/v2/postsが基本のエンドポイントです。?per_page=10&page=1でページネーション、?categories=1でカテゴリーフィルター、?_fields=id,title,linkで必要フィールドのみ取得できます。
Q. カスタムフィールドをREST APIのレスポンスに含めるには?
A. register_rest_field()でカスタムフィールドをREST APIレスポンスに追加します。show_in_rest=trueをregister_meta()で設定する方法もあります。ACFのREST APIサポートも確認してください。

まとめ

WordPressのREST APIは、ヘッドレスCMSへの第一歩として非常に強力な武器です。読み取りだけなら誰でも簡単に試せるため、まずは外部アプリから投稿データを取得するところから始めてみましょう。

今後は、認証機能やカスタムエンドポイントを使ったデータ操作、フロントエンドフレームワークとの連携などを通じて、より高度なヘッドレスCMSを構築することが可能になります。