B3Sロゴ
menu close

Web/DTP

WordPressをヘッドレスCMS化する方法を調べてみた


うどん


ヘッドレスCMSをご存知でしょうか?

CMSのヘッド部分がないもの、つまり表示させる部分のないCMSのこと。
CMSの代表的なものといえば「WordPress」ですが、実はWordPressってヘッドレス化できるんです・・・!

ということで、今回の記事ではWordPressをヘッドレスCMSにする方法を調べてまとめてみました。

目次

ヘッドレスCMSのメリット・デメリットって?

ヘッドレスCMSにするメリットとして、一番よく言われているのはCMSと比較すると表示速度が爆速となること!

というのも。
CMS(WordPress)は動的サイトレンダリングといって、ユーザーがアクセスした際にその場で作られた情報が表示されるのですが、ヘッドレスCMSの場合はSSR(サーバーサイドレンダリング
)やSSG(静的サイトジェネレータ)で事前に用意した情報を表示させるから。

さらに、CMSを狙ったサイバー攻撃を受けにくくなる面があるため、セキュリティが向上できたり、CMSでは使うことができなかったWeb表現が可能になったり、サイトを作る際に登録画面を設計しなくて済んだりと、サイト制作を上で嬉しいポイントがもりだくさんです。

しかしその反面、表示する画面の構築し直しや勉強するコスト、そもそもセキュリティを意識したソースを書く必要性があるのはデメリットだといえます。
また、静的サイトジェネレータで作った場合は記事を公開するごとにジェネレーターも更新する必要性があったり、WordPressのプレビュー画面の設定が色々と設定したりもデメリットです。

それであっても、サイト表示が早くなることは「SEO」向上にもつながりますし、表示側と管理画面側でサーバーを分けることができることは、メリットが大きいといえるのではないでしょうか。

ヘッドレスCMS化するために必要な知識

実はWordPressは4.7以上はREST APIが勝手に生成されるようになっています。
つまり!静的サイトジェネレーターの知識さえあれば利用することができてしまうんです!

が、それがひと苦労。知識が必要だからというよりも正直すきなフレームワークが使えるので悩む(うれしい)ポイントなんですよね。
自分の好みで作るフレームワークを選ぶのがベストなので、今回私はVue.js×Nuxt.jsを試しました。

WordPressをヘッドレス化する大まかな流れ

本当にざっくりではありますが、以下の長れでWordPressはヘッドレス化できます。

  1. 1記事以上あるWordPressを用意する
  2. 表示させる部分をサイトジェネレーターで作成する
  3. WordPress側を設定する
  4. 公開する

ここからは私がvue.jsとNuxt.jsで構築した際の手順を簡単に紹介していきます。

Nuxt.jsで記事のデータを呼び出す方法

まずはNuxt.jsの入った環境を用意します。
nodeが使える環境であれば以下コマンドでインストール&新規作成ができます。
npx create-nuxt-app サイト名

インストールしたら色々と選択する項目が表示されるのですが、お好みのフレームワーク等を選んでいただき、axios接続とSSRかSSGで表示されるよう選択いただいたらOKです。

インストールが終わったら新しくできたサイト名のディレクトリに移動し、そこで「npm run dev」と入力してローカルホスト(http://localhost:3000)にアクセスすると・・・。


デモ画面が表示されたのでないでしょうか。
=インストール成功です。おめでとうございます。

インストールができたら、必要なモジュールをインストールしていきます。
WordPressをヘッドレスCMS化する場合はREST APIを利用するので@nuxtjs/axiosモジュールが必要です。
インストール時にaxiosを選択していれば初期で設定されるのですが、ない場合はインストールし「nuxt.config.js」ファイルのmodulesの欄に追加しておきましょう。

これができたら、記事の一覧にしたいvueファイルのscriptに以下のコードを記述します。

const wpSiteDomain = process.client ? ‘localhost’ : ‘サイトのドメイン’
const posts = await $axios.$get(http://${wpSiteDomain}/wp-json/wp/v2/posts)
っていうSSRの切り分け用の書き方もあるそうです。

scriptを書いたら、次にtemplateの部分に以下を追加します。

そして再度npm run devをすると、日付とタイトル、抜粋文が表示されたのでないでしょうか?

あとはコードを表示させたい見た目のCSSに変更していくことで、記事の一覧部分が表示されるようになります!

表示項目を調整することはもちろんできるので、変えたい場合はWordPress REST APIで検索してみてください。

次に、各ページの内容を詳細するページのコードを紹介いたします。

上記コードを入力し、templateには以下を入れます。

そしてファイル名「_id.vue」にし、「archives」ディレクトリのファイル配下にして一覧ページのtitle: {{ post.title.rendered }}で表示されているタイトルをクリックすると、記事の詳細が表示されたのではないでしょうか?

こちらのページも表示内容を変えることはできるので、もっと詳しく表示させたい方は色々調べてみてください。

ここまでできて実際のサーバーで公開するのであれば、WordPressの本来の表示部分では非表示になるよう設定を入れ、npm run generateでdistディレクトリに生成された内容をサーバーにアップロードしてあげることでヘッドレスCMS化は完了です。

まとめ

簡単なサイトであれば、WordPressのヘッドレスCMS化は1時間もあれば完成しそうです。
(実際スクショを撮るために再度行った際は上記作業だけであれば30分もかからなかったです)

ただ実際のところ、元々がjs等をいろいろと入れている複雑なサイトで細かい設定等にも対応しようとすると、vue.js初心者なのもありかなりの時間を要しそうで、「また時間のあるときに・・・」となってしまいました。
SEOのためにも、どこかのタイミングでやりきってしまいたいものです。