Web/DTP
WordPressをヘッドレスCMS化する方法を調べてみた
うどん
公開日:2022/06/27
ヘッドレス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記事以上あるWordPressを用意する
- 表示させる部分をサイトジェネレーターで作成する
- WordPress側を設定する
- 公開する
ここからは私がvue.jsとNuxt.jsで構築した際の手順を簡単に紹介していきます。
Nuxt.jsで記事のデータを呼び出す方法
まずはNuxt.jsの入った環境を用意します。
nodeが使える環境であれば以下コマンドでインストール＆新規作成ができます。
npx create-nuxt-app サイト名
インストールが終わったら新しくできたサイト名のディレクトリに移動し、そこで「npm run dev」と入力してローカルホスト（http://localhost:3000）にアクセスすると・・・。
デモ画面が表示されたのでないでしょうか。
＝インストール成功です。おめでとうございます。
インストールができたら、必要なモジュールをインストールしていきます。
WordPressをヘッドレスCMS化する場合はREST APIを利用するので@nuxtjs/axiosモジュールが必要です。
インストール時にaxiosを選択していれば初期で設定されるのですが、ない場合はインストールし「nuxt.config.js」ファイルのmodulesの欄に追加しておきましょう。
これができたら、記事の一覧にしたいvueファイルのscriptに以下のコードを記述します。
|
1 2 3 4 |
async asyncData({$axios}) { const posts = await $axios.$get(`http://サイトのドメイン/wp-json/wp/v2/posts`) return { posts } } |
const posts = await $axios.$get(
http://${wpSiteDomain}/wp-json/wp/v2/posts)っていうSSRの切り分け用の書き方もあるそうです。
scriptを書いたら、次にtemplateの部分に以下を追加します。
|
1 2 3 4 5 6 7 |
<ul> <li v-for="post in posts" :key="post.id"> 日付: {{ post.date }}<br> <NuxtLink :to="'/archives/'+post.id">title: {{ post.title.rendered }}</NuxtLink> {{ post.excerpt.rendered }}<br> </li> </ul> |
そして再度npm run devをすると、日付とタイトル、抜粋文が表示されたのでないでしょうか？
あとはコードを表示させたい見た目のCSSに変更していくことで、記事の一覧部分が表示されるようになります！
次に、各ページの内容を詳細するページのコードを紹介いたします。
|
1 2 3 4 |
async asyncData(context) { const post = await context.$axios.$get(`http://サイトのドメイン/wp-json/wp/v2/posts/${context.params.id}`) return { post } } |
上記コードを入力し、templateには以下を入れます。
|
1 2 3 |
<h2>{{ post.title.rendered }}</h2> <!-- eslint-disable-next-line vue/no-v-html --> <div v-html="post.content.rendered"></div> |
そしてファイル名「_id.vue」にし、「archives」ディレクトリのファイル配下にして一覧ページの
こちらのページも表示内容を変えることはできるので、もっと詳しく表示させたい方は色々調べてみてください。
ここまでできて実際のサーバーで公開するのであれば、WordPressの本来の表示部分では非表示になるよう設定を入れ、npm run generateでdistディレクトリに生成された内容をサーバーにアップロードしてあげることでヘッドレスCMS化は完了です。
まとめ
簡単なサイトであれば、WordPressのヘッドレスCMS化は1時間もあれば完成しそうです。
(実際スクショを撮るために再度行った際は上記作業だけであれば30分もかからなかったです)
ただ実際のところ、元々がjs等をいろいろと入れている複雑なサイトで細かい設定等にも対応しようとすると、vue.js初心者なのもありかなりの時間を要しそうで、「また時間のあるときに・・・」となってしまいました。
SEOのためにも、どこかのタイミングでやりきってしまいたいものです。
