この生成AI大航海時代に、なんでWordPressはまだ手動コーディングなんだよ！

Reactアプリもバックエンドも、AIに話しかければ動くものが出てくる時代。なのにWordPressのページ作成は、ブロックエディタでポチポチ並べて、設定パネルで色やサイズを調整して、CSSはカスタムCSSの入力欄にコピペして……。

今回、これをなんとかしました。AIに「ページ作って」と話しかけるだけで、本当にページが完成する環境です。

TL;DR

WordPressのページ作成とデザイン実装を、生成AIに丸投げできる環境を作りました。

やることは3つだけ。

ローカル開発環境を一瞬で作る — Docker + GeneratePress + GenerateBlocks。コマンド数個で起動
生成AIにページ作成とデザインを丸投げ — 「トップページ作って」と言うだけ。AIがページ作成もCSS追加も全部やる
本番サーバーに簡単インポート — ローカルで完成させたページをエクスポートして、本番WordPressにインポートするだけ

リポジトリはこちらです 👇
https://github.com/hitotch/learn-wordpress-page-ai-coding

こんなことができる

セットアップが終わったら、AIコーディングツールにこう話しかけます。

トップページを作って。「Hello AI!」というヒーローセクションを表示して。
背景はグラデーションで、サブテキストも入れて。

すると、AIが勝手にこういうことをやってくれます：

GenerateBlocks のブロックマークアップを生成
WP-CLI（wp post create）でページを作成
WP-CLI（wp option update）でトップページに設定
子テーマの style.css にヒーローセクションのCSSを追加

ブラウザで http://localhost を開くと、こうなります。

さらに指示を重ねれば、どんどんデザインが仕上がっていきます。

背景色をもっと暗くして。サブテキストのフォントサイズを大きくして。

ヒーローの下に、3カラムのサービス紹介セクションを追加して。

AIが style.css の修正やページ更新を繰り返して、デザインが完成していく。管理画面を開く必要は一切ありません。

仕組み

なぜこんなことができるのか。仕組みはシンプルです。

AIコーディングツール（Antigravity IDE や Claude Code）は、ファイルの読み書きとターミナルコマンドの実行ができます。そして WordPress には WP-CLI というコマンドラインツールがある。

つまり、AIがWP-CLIを叩けば、管理画面を使わずにWordPressを操作できるって寸法です。

AIコーディングツール
    ↓ ファイル編集（style.css, functions.php）
    ↓ コマンド実行（WP-CLI）
Docker内のWordPress
    ↓
ブラウザで表示確認

具体的にAIができることはこの通り。

操作	AIがやること	ブラウザ操作
ページ作成	WP-CLIでブロックマークアップ付きページを作成	不要
ページ更新	既存ページの内容を書き換え	不要
CSS追加・編集	style.css にコンポーネントのCSSを追加	不要
PHP追加・編集	functions.php にフック・機能を追加	不要
トップページ設定	WP-CLIでオプション変更	不要
結果確認	ブラウザで表示確認・スクリーンショット	リロードするだけ

必要なもの

Docker（Docker Desktop or Docker Engine）
AIコーディングツール（以下のいずれか）
Git

AIコーディングツールは以下から選べます。

ツール	形態	特徴
Antigravity IDE	AI統合エディタ	これだけで完結。おすすめ
VS Code + Claude Code	エディタ + AI	VS Codeで編集、Claude Codeがコマンド実行

ポイントは、AIツールがファイルの読み書きとターミナルコマンドの実行をできること。ChatGPTのようなチャット型AIでは動きません。

セットアップ（3分で終わる）

1. ワークスペースフォルダを作る

mkdir my-wp-project
cd my-wp-project

2. リポジトリをクローン

git clone https://github.com/hitotch/learn-wordpress-page-ai-coding.git

3. 子テーマをコピー

リポジトリに入っているサンプル子テーマをコピーします。

cp -r learn-wordpress-page-ai-coding/sample-child-theme generatepress-child

4. 環境変数を設定

cd learn-wordpress-page-ai-coding
cp .env.example .env

.env を開いて、パスワードとメールアドレスだけ設定します。

WP_ADMIN_PASSWORD=my-secure-password
WP_ADMIN_EMAIL=your-email@example.com

5. Docker環境を起動

docker compose up -d

初回はイメージのビルドに数分かかります。ログを確認するには：

docker compose logs -f wpai-wordpress

以下のメッセージが出たら完了です。

🎉 セットアップ完了！

6. ブラウザで確認

http://localhost を開く。GeneratePressのデフォルト画面が表示されたらOK。

以下が自動でセットアップされています：

✅ 日本語WordPress
✅ GeneratePressテーマ（インストール済み）
✅ GenerateBlocksプラグイン（有効化済み）
✅ 子テーマ（有効化済み）

AIに話しかけてみる

ここからが本番です。AIコーディングツールでプロジェクトを開いて、話しかけてみましょう。

Step 1: ヒーローセクションを作る

トップページを作って。
「Hello AI!」という大きなヒーローセクションを表示して。
背景はグラデーションで、サブテキストも入れて。

AIはこんな流れで作業します：

GenerateBlocks のブロックマークアップを生成して、WP-CLIでページを作成
WP-CLIでトップページに設定
子テーマの style.css にヒーローセクションのCSSを追加

ブラウザをリロードすると...

Step 2: デザインを調整する

背景をもっと暗めにして。サブテキストのフォントサイズを大きくして。

AIが style.css のCSS変数やプロパティを修正します。ブラウザをリロードするだけで反映。

Step 3: セクションを追加する

ヒーローの下に、3カラムのサービス紹介セクションを追加して。
アイコンとタイトルと説明文で。

AIがブロックマークアップを生成してWP-CLIでページを更新、CSSも追加。

ちょっとミスってるのでスクショ付きで修正指示を出します。

こんな感じで、AIに話しかけるたびにページが仕上がっていきます。

本番サーバーへの適用

ローカルで完成させたデザインを、本番のWordPressに適用する方法です。

1. 本番側に GeneratePress + GenerateBlocks を導入

本番のWordPressに、ローカルと同じテーマ・プラグインをインストールします。

管理画面 → 外観 → テーマ → 新規追加 → 「GeneratePress」を検索してインストール・有効化
管理画面 → プラグイン → 新規追加 → 「GenerateBlocks」を検索してインストール・有効化
セットアップ手順で作った子テーマフォルダ（generatepress-child）をZIP化して、管理画面 → 外観 → テーマ → 新規追加からアップロード・有効化

2. カスタマイザー設定の移行

GeneratePressのレイアウトやフォント等のカスタマイザー設定は、「Customizer Export/Import」プラグインで移行します。

ローカル・本番の両方にプラグイン「Customizer Export/Import」をインストール・有効化
ローカルの管理画面 → 外観 → カスタマイズ → Export/Import → 「Export」で .dat ファイルをダウンロード
本番の管理画面 → 外観 → カスタマイズ → Export/Import → 「Import」で .dat ファイルを読み込み

3. ページのエクスポート/インポート

ローカルで作ったページは、WordPress標準の機能で本番に移せます。

エクスポート（ローカル側）：

管理画面 → ツール → エクスポート
「固定ページ」を選択してダウンロード

インポート（本番側）：

管理画面 → ツール → インポート → 「WordPress」を実行
エクスポートした .xml ファイルを選択

4. 子テーマのファイル

style.css と functions.php は、子テーマのファイルをそのまま本番の子テーマにコピーすればOKです。

詳しい手順は、リポジトリの本番適用ガイドを参照してください。

なぜこの構成にしたか

選定	理由
GeneratePress	軽量で高速。子テーマのCSS + functions.php だけでデザインが完結するので、AIが直接管理しやすい
GenerateBlocks	無料版で十分。ブロックマークアップが規則的なので、AIが正確に生成できる
Docker	開発環境を誰でも同じ状態で再現できる。チームでの共有もしやすい
WP-CLI	WordPressをコマンドで操作できる。AIがターミナルから直接ページを作れるのはこれのおかげ

ハマりポイント

実際にやってみてわかった知見をいくつか共有します。

GenerateBlocks の `uniqueId` 問題

WP-CLIでページを作成するとき、GenerateBlocks のブロックマークアップには uniqueId 等の必須属性が必要です。これがないと、フロント画面の表示は問題ないけど、管理画面のビジュアルエディタで「想定されていないか無効なコンテンツが含まれています」というエラーが出ます。

<!-- ❌ これだとエディタでエラーになる -->
<!-- wp:generateblocks/container {"className":"hero"} -->

<!-- ✅ 必須属性を含めればOK -->
<!-- wp:generateblocks/container {"uniqueId":"a1b2c3d4","isDynamic":true,"blockVersion":4,"useInnerContainer":true,"className":"hero"} -->

AIが勝手にリファレンスを読んでくれない問題

リポジトリに docs/block-markup-reference.md というリファレンスを用意しても、AIコーディングツールが最初のセッションで自発的にそのファイルを読む保証はありません。

解決策として、AIツールが自動で読み込む指示ファイルをリポジトリに含めました。

ツール	自動読み込みファイル
Antigravity IDE	`.antigravity/instructions.md`
Claude Code	`CLAUDE.md`

このファイルにWP-CLIの使い方やGenerateBlocksの必須属性を書いておけば、AIは最初から正しいルールを知っている状態で作業を開始します。リポジトリをクローンして開くだけで、特別な設定は不要です。

まとめ

Docker環境を立てて、AIに話しかけるだけでWordPressのページが完成する
ページ作成、CSS実装、設定変更まで、管理画面を開かずにAIが全部やってくれる
ローカルで作ったページはエクスポート/インポートで本番に適用できる

リポジトリはこちら 👇
https://github.com/hitotch/learn-wordpress-page-ai-coding

READMEに沿ってセットアップしたら、あとはAIに「トップページ作って」と話しかけてみてください。