Produced by Fourier

Nuxt.jsでWordPressをSSG化してみる

Takahashi Takahashi カレンダーアイコン 2023.04.10

はじめに

Webサイトで上位表示を狙う場合、ページの表示スピードはとても重要です。

WordPress で作成されたページの表示速度改善のため、 Nuxt3 を使いサイトをSSG化することで表示速度の高速化を狙っていきます。いわゆるヘッドレスCMSです。

環境

  • WordPress 6.2
  • Nuxt3
  • MySQL 5.7

実装手順

WordPress環境の構築

dockerを使って WordPress の環境を構築していきます。

ここでは、Docker HubにてWordPress Official Imageの例となっているコードを参照していきます。

version: '3.1'

services:

  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - ./backend:/var/www/html

  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:
https://hub.docker.com/_/wordpress

docker compose up でコンテナを立ち上げると localhost:8080/wp-admin から WordPress の管理画面へ接続することができるはずです。

ここで忘れてはいけないのは パーマリンク構造をデフォルト(基本)から変更してください。

基本のままだとWP REST APIが表示されないのです。

Nuxt.js環境の構築

Nuxt.jsの環境も構築していきます。

先ほどWordPress環境を構築したdocker-compose.ymlに追記していきます。

version: '3.1'

services:

  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - ./backend:/var/www/html

  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

# Nuxt.js用追記ここから
  nuxtjs:
    image: node:14
    user: node
    working_dir: /home/node
    tty: true
    ports:
      - 3030:3000
      - 24678:24678
    volumes:
      - ./frontend/:/home/node/
# Nuxt.js用追記ここまで

volumes:
  wordpress:
  db:
💡
ホットリロードを使用する場合はポート24678への接続が必要です。

再度、ターミナルから docker compose up —build でDockerを立ち上げ、nuxtjsコンテナ内で操作を行なっていきます。

docker-compose exec nuxtjs bash
npx nuxi init nuxt3-app
cd nuxt3-app
npm install
npm run dev

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 に入力していきます。

<script setup>
const { data: posts } = await useFetch('http://localhost:8080/wp-json/wp/v2/posts/');
</script>
<template>
  <ul>
    <li v-for="post in posts" :key="post.id">
      id: {{ post.id }}<br> <!-- 記事ID -->
      slug: {{ post.slug }}<br> <!-- slug -->
      title: {{ post.title.rendered }}<br> <!-- 記事タイトル -->
      contentTitle:     <span v-html="post.content.rendered">    </span> <!-- 記事の内容 -->
    </li>
  </ul>
</template>

post.content.renderedv-html ディレクティブを用いて出力してください。

💡
post.content.rendered をそのまま出力するとサニタイズ処理されてしまい、HTMLタグが文字列として出力されてしまいます。

app.vueのタグを NuxtWelcome から NuxtPage へ変更します。

<template>
  <div>
<!--    <NuxtWelcome />-->
    <NuxtPage />
  </div>
</template>

localhost:3030 で記事情報が取得できていることを確認してください。

最後に

以上が Nuxt.js のSSGを用いて WordPress の記事を表示する手順でした。

これから WordPress のヘッドレスCMS化を考えている方は是非ご参考にしてください。

Takahashi

Takahashi slash forward icon Engineer

主にWordPressを担当しています。趣味はフットサル、サッカー観戦。

関連記事