Documentation
WP Template のセットアップと使い方
Requirements
Node.js 20+Yarn 1.22+WordPress 6.0+
Quick Start
# 1. リポジトリをクローン
git clone https://github.com/your-repo/wp-template.git
cd wp-template
# 2. 依存関係をインストール
yarn install
# 3. 環境変数を設定
cp .env.example .env.local
# .env.local を編集して WordPress の接続情報を設定
# 4. 開発サーバーを起動
yarn dev:wp-template環境変数
| 変数名 | 説明 |
|---|---|
| NEXT_PUBLIC_WORDPRESS_API_URL | WordPress REST API の URL |
| NEXT_PUBLIC_WORDPRESS_HOST | WordPress のホスト名 |
| WP_AUTH_TOKEN | WordPress アプリケーションパスワード |
| REVALIDATE_SECRET | ISR 再生成用のシークレット |
| WEBHOOK_SECRET | Webhook 認証用のシークレット |
WordPress 設定
- REST API の有効化
WordPress の REST API がデフォルトで有効になっていることを確認
- アプリケーションパスワードの作成
ユーザー設定 → アプリケーションパスワード → 新規作成
- CORS 設定
Next.js フロントエンドからのアクセスを許可
// functions.php に追加 add_action('rest_api_init', function() { header('Access-Control-Allow-Origin: https://your-next-domain.com'); header('Access-Control-Allow-Methods: GET, POST, OPTIONS'); }); - Webhook 設定
記事更新時に Next.js の Revalidate API を呼び出す設定
// functions.php に追加 add_action('save_post', function($post_id) { $url = 'https://your-next-domain.com/api/revalidate'; wp_remote_post($url, [ 'body' => json_encode(['secret' => REVALIDATE_SECRET, 'slug' => get_post($post_id)->post_name]), 'headers' => ['Content-Type' => 'application/json'] ]); });