概要

WordPressはCMS（コンテンツマネージメントサービス）にて最大のシェア率を誇っています。クライアント側からみると簡単に編集して更新できる機能はとても魅力的です。

しかし、WordPressに対して個人的な不満がありました。

PHPを使用しなければならない（構造上フロントエンドとバックエンドが分離できない）
パフォーマンスについて遅くなる傾向になる（度重なるプラグインの追加、クエリを発行する多さなど原因は多岐に渡ります）
WordPress専用関数を使い過ぎてPHPと混同してしまう時がある（私だけかもしれないが）

そんな時、WordPressにREST API機能があることを知りました。
「これを使用すればヘッドレスCMSとして活用できるのでは？」 と感じ、検証をすることにしました。

ヘッドレスCMSの特徴

ヘッドレスCMSの特徴としてはコンテンツを管理するフロントエンド側を持たないことが挙げられます。

例えば、WordPressではコンテンツを管理するバックエンド側と表示するフロントエンド側、両方を兼ねています。
しかし、ヘッドレスCMSでは主にコンテンツ管理をするだけであり、フロントエンドは各デベロッパーに委ねられます。そうすることでフロントエンド側の自由度が増えます。

ヘッドレスとは

ヘッドレスの意味は以下のようになります。引用はヘッドレスCMSで人気のあるmicroCMSのブログからです。

ヘッドレスの「ヘッド」は、ビュー（表示する画面）を指します。ヘッドレスなので、ビューの無いCMSということになります。
https://blog.microcms.io/what-is-headlesscms/

検証環境

wordpress: 6.1.1
nextjs: 13.1.5

今回はDocker環境でWordPressを立ち上げ、検証していきます。

WordPress REST API

基本的なエンドポイントなどは以下のハンドブックに記述されています。

ここでは投稿に絞ってcurlコマンドで実施します。

一覧取得

投稿一覧を取得できます。

curl http://localhost:8000/wp-json/wp/v2/posts

パラメータを設定

パラメータを指定して条件にあったデータを取得することが可能です。
例えばsearch=helloとすることでhello文字列にマッチした投稿を取得できます。

curl http://localhost:8000/wp-json/wp/v2/posts?search=hello

詳しくは以下を参考にしてください。

登録

データ登録や更新をする際には認証が必要になります。

認証

まずはアプリケーションパスワードを登録する必要があります。
しかし、現在の検証用Docker環境ではSSL対応ができておらず、アプリケーションパスワードの表示がデフォルトで非表示になっています。その場合は、一旦非表示を解除するフィルターを設定します。

ここではあくまで検証として設定しています。本来はSSLを前提として設定するところです。本番で使用することは避けてください。

functions.php

add_filter( 'wp_is_application_passwords_available', '__return_true' );

すると該当ユーザー詳細ページからアプリケーションパスワード項目が出現します。

パスワードを入力し追加すると、パスワード文字列が出現するのでコピーして環境変数なりに保存しておきましょう。

これを元にBasic Authをかけていきます。必要な情報は以下の通りです。

Username: WordPressのユーザー名
Password: 先程保存したパスワード文字列

新規投稿してみる

用意ができましたので、POSTリクエストを投げていきます。

curl --user "{Username}:{Password}" -X POST http://localhost:8000/wp-json/wp/v2/posts -H "Content-Type: application/json" -d '{"title": "テストタイトル", "content": "テストコンテンツ"}'

実際に見ると下書き状態の投稿が出来上がっています。
publish状態にしたい場合はデータに"status": "publish"を追加します。

更新

更新は登録と同じ要領で行います。違いはエンドポイントに投稿のIDを指定することです。

curl --user "{Username}:{Password}" -X POST http://localhost:8000/wp-json/wp/v2/posts/{post_id} -H "Content-Type: application/json" -d '{"title": "更新後のタイトルです"}'

削除

curl --user "{Username}:{Password}" -X DELETE http://localhost:8000/wp-json/wp/v2/posts/{post_id}

フロントエンドとの連携

実際にNext.jsを使用してデータを流し込んでみましょう。

ここでは詳しいコードは省きます。また一覧取得のみの処理とします。
以下のようにSSRで取得することができます。

pages/index.tsx

export const getStaticProps = async () => {
  const result = await fetch('http://localhost:8000/wp-json/wp/v2/posts')
  const res = await result.json() as WPResponse[]

  return {
    props: {
      posts: res
    }
  }
}

メリット・デメリット

基本的なWordPressのREST APIを説明しました。これでWordPressをヘッドレスCMSとして運用できることがわかったと思います。
ここで検証した上で感じたメリットとデメリットをまとめていきます。

メリット

ヘッドレスCMSのメリットを活かし、フロントエンド環境を自由に構築できることが最大のメリットです。
今まではWordPress特有のPHPテンプレートを考えながら実装する必要がありましたが、WordPressをヘッドレス化することでPHPに縛られることがなくなります。
例えば、Next.jsであったりVue.jsであったりとフロントエンド環境を自由に設定することができます。

デメリット

画面反映系プラグインが使用できない

管理画面系のWordPressプラグインは使用できますが、画面反映系のWordPressプラグインが使用できません。導入してもPHPテンプレートを使用していないので意味がありません。

実装するコストが上がる

必然的にプラグインが使用できないとなると、フロントエンド側で実装しなければなりません。これだけで相当なコストがかかります。
まずお問い合わせは必須でしょう。自前でフォームを作成し送信からリダイレクトまで考えて実装します。また、ページネーションだったり目次であったりも自前で実装していく必要があります。

まとめ

いかがでしょうか。WordPressはヘッドレスCMSとして運用できることがお分かりになったと思います。

しかし、WordPressのヘッドレスCMS化には前述したメリットとデメリットがあります。
各自の環境や条件によって導入するかどうか考えた方がよいかと思います。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。