1 始めに

これから数回に分けてwordpress headlessの開発を備忘録も兼ねて紹介していこうと思います。

wordpressをバックエンドとして、フロントエンドをnextjsで別に作成〜コンテンツをwordpress側からデータフェッチしてくるという構造になります。

自身の知識を少しでも深めるのが主な目的なのであくまでも参考までにm(_ _)m

2 ディレクトリ構成

headless-wordpress/
├── frontend-next/
│   └── app/
├── backend-wp/
│   └── my-theme/
│       ├── index.php
│       ├── functions.php
│       └── style.css
└── docker/
    ├── development/
    │   ├── Dockerfile
    │   └── docker-compose.yml
    └── production/
        ├── Dockerfile
        └── docker-compose.yml

frontend-nextは

yarn create next-app frontend-next

として作成したものです。

backend-wp/のmy-theme/に3つのファイルを置くことでwordpress側で独自テーマとして認識されます。

フロントエンドを別に作成するのであれば独自テーマは必要ないように思われると思いますが、wordpress側のブロックエディタや様々なカスタム設定時に必要となります。dockerのビルド時にバインドマウントします。

3 prettier ~ tailwind設定

通常のprettierでのフォーマットに加えてtailwindの並びを整える（ソートする）設定です。

yarn add -D prettier prettier-plugin-tailwindcss eslint-config-prettier

~/.prettierrc.json

{
    "plugins": [
        "prettier-plugin-tailwindcss"
    ],
    "printWidth": 80,
    "singleQuote": true,
    "semi": false,
    "tabWidth": 4
}

prettierに対するeslintの競合を避けるため、eslintConfigに’prettier’を追加

~/eslint.config.mjs

import { dirname } from 'path'
import { fileURLToPath } from 'url'
import { FlatCompat } from '@eslint/eslintrc'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const compat = new FlatCompat({
    baseDirectory: __dirname,
})

const eslintConfig = [
    ...compat.extends('next/core-web-vitals', 'next/typescript', 'prettier'),
]

export default eslintConfig

4 husky lint-staged設定

ルート（この場合wordpress-headless）でgit commit時に自動でリンターが走るようにhusky, lint-stagedを使って設定します。

huskyの設定で階層が下のディレクトリがlintの対象の場合の設定がわからず悩みました。

結局最新のバージョン9~(2025/2月現在)ではうまく行かず、huskyのバージョンを下げています^^;

frontend-next~

yarn add -D husky@8.0.3 lint-staged

frontend-next/package.json~

scriptsへ追加

"prepare": "cd ../ && husky install ./frontend-next/.husky"

その後次を実行

npx husky-init

新しくfrontend-next/.husky/pre-commitというファイルが作られるのでその中に

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
cd ./frontend-next && npx lint-staged

とします。その後frontend-nextに移動して実行権限を与えます

chmod +x ./.husky/pre-commit

次に新しくfrontend-next/.lintstagedrcを作成して

{
  "**/*.{ts,tsx,js,jsx,cjs,mjs,md}": ["eslint --fix"],
  "**/*.{ts,tsx,js,jsx,cjs,mjs,md,json,lintstagedrc,yml,yaml}": [
    "prettier --write"
  ]
}

としたらfrontend-next~へ移動

gitはroot(今回の場合wordpress-headless)で管理するためfrontend-nextの方は削除。

rm -rf .git

wordpress-headless~

git init

これでrootでコミット時

git add . && git commit -m "first commit"

などとすれば自動でリンターが走ると思います。

＊一度手順どおり実行したらリンターが走らないことがあり、確認するとなぜかhuskyのバージョンが8.0.0になっていました、8.0.3に書き直してyarn install、もう一度commitしたら走りました🤔

次はdocker, docker-composeを使ってローカルの環境を作成していきます。