はじめに
Webサイトで上位表示を狙う場合、ページの表示スピードはとても重要です。
WordPress で作成されたページの表示速度改善のため、 Nuxt3 を使いサイトをSSG化することで表示速度の高速化を狙っていきます。いわゆるヘッドレスCMSです。
環境
-
WordPress 6.2
-
Nuxt3
-
MySQL 5.7
実装手順
WordPress環境の構築
dockerを使って WordPress の環境を構築していきます。
ここでは、Docker HubにてWordPress Official Imageの例となっているコードを参照していきます。
https://hub.docker.com/_/wordpress
docker compose up
でコンテナを立ち上げると localhost:8080/wp-admin
から WordPress の管理画面へ接続することができるはずです。
ここで忘れてはいけないのは パーマリンク構造をデフォルト(基本)から変更してください。
基本のままだとWP REST APIが表示されないのです。
Nuxt.js環境の構築
Nuxt.jsの環境も構築していきます。
先ほどWordPress環境を構築したdocker-compose.ymlに追記していきます。
💡
ホットリロードを使用する場合はポート24678への接続が必要です。
再度、ターミナルから docker compose up —build
でDockerを立ち上げ、nuxtjsコンテナ内で操作を行なっていきます。
localhost:3030からNuxt.jsの画面が開くことができると思います。
WordPressの記事をNuxt.js側で取得する
WP REST APIからWordPress側で投稿した記事情報を取得していこうと思います。
WP REST APIはFetch APIを使用して取得していきます。
💡
Nuxt3はaxiosの使用をやめ、ブラウザに標準で実装されているFetch APIを使うようになりました。
https://www.memory-lovers.blog/entry/2022/06/02/170000
pagesディレクトリを作成し、 pages/index.vue
に入力していきます。
post.content.rendered
は v-html
ディレクティブを用いて出力してください。
💡
post.content.rendered
をそのまま出力するとサニタイズ処理されてしまい、HTMLタグが文字列として出力されてしまいます。
app.vueのタグを NuxtWelcome
から NuxtPage
へ変更します。
localhost:3030
で記事情報が取得できていることを確認してください。
最後に
以上が Nuxt.js のSSGを用いて WordPress の記事を表示する手順でした。
これから WordPress のヘッドレスCMS化を考えている方は是非ご参考にしてください。