Claude CodeのBuild with WordPressプラグインでテーマを作る
Build with WordPressプラグインは、サイトの説明から3案のデザインを出し、WordPress Studioのローカルサイトにブロックテーマを作ります。起動方法、コマンド3つ、つまずきの直し方を扱います。
Build with WordPressは、WordPress.comを運営するAutomatticが出しているClaude Codeプラグインです。「陶芸工房のランディングページ」のような一文を渡すと、3つのデザイン案を見せ、選んだ案をブロックテーマとしてローカルのWordPress Studioサイトに組み上げます。ここでは前提、起動の仕方、3つのコマンドの違い、つまずきやすい点を順に追います。
Build with WordPressプラグインは何を作るのか
サイトを英語で説明すれば、ローカルのStudioサイトに完成したブロックテーマが入ります。出来上がったテーマは、WordPress.comやPressableへ送り出せる状態になります。
theme.json、ブロックマークアップ、テンプレートパーツ、デザインシステム、レスポンシブなレイアウトといった作業を、プラグインがまとめて引き受ける設計です。入口になるワークフローは2つあります。
2つのワークフロー
quick-build
サイトを説明し、仕様を確認し、デザインを選ぶと、数分でテーマが動きます。
design-site
スタイルタイル、ページレイアウト、全ページのモックアップを経てからテーマを作ります。
マーケットプレイスの紹介ページは、これより広い範囲を書いています。テーマ、プラグイン、カスタムブロック、オンラインストアを作れること、アクセシビリティ・デザイン・パフォーマンスを調べる監査機能があること、WooCommerceとJetpack向けのスキルでコマースの追加、プレビュー、デプロイができることです。監査機能とWooCommerce・Jetpack向けスキルの使い方は、READMEのコマンド表には載っていません。これらはコマンドを覚えずに、作業内容をそのまま頼むと呼び出されます(後述の依頼例)。
使う前に用意するもの
動かすには3つが要ります。
- Claude Code本体
- WordPress Studio(Automatticのローカル環境)。CLIを有効にして、ターミナルから
studioコマンドが使える状態にする - Node.js 18以上。テーマ生成後に走るブロックマークアップの検証ツールが使う
Claude Codeを入れているだけでは足りず、Studio側でCLIを有効にする手順が要ります。studio: command not foundと出たときは、StudioのCLI設定を有効にしてからターミナルを再起動します。
プラグインを読み込んで起動する
READMEのインストール手順は、リポジトリをクローンして--plugin-dirで読み込む方式です。マーケットプレイスの紹介ページには「Install in Claude Code」の導線がありますが、READMEに書かれているのはこちらの手順だけです。
git clone https://github.com/Automattic/claude-code-wordpress.com.git
cd ~/Studio
claude --plugin-dir /path/to/claude-code-wordpress.com要点は起動する場所です。Claudeは、Studioのサイトが置かれているフォルダ(または、その下のサブディレクトリ)から起動します。違うディレクトリで始めると、初回に確認のメッセージが出ます。
--plugin-dirはプラグインをフォルダから直接読む開発向けの経路で、マーケットプレイスを介しません。変更を反映する方法はplugin-dirで変更を反映する2つの環境変数にまとめています。
quick-buildで最初のテーマを作る
プラグイン名はwordpress.comなので、コマンドは/wordpress.com:で始まります。サイトの説明をコマンドの後ろに続けます。
/wordpress.com:quick-build A landing page for my pottery studio called Clay & Firequick-buildは6段で進みます。
quick-buildの流れ
- 1
デザイン素材を渡す(任意)
ロゴ、写真、ブランドガイドラインがあるかを聞かれます。フォルダのパスを渡すか、飛ばします。
- 2
サイトの仕様を確認する
サイト名、種類、対象読者、トーン、ブランドのキーワード、主要なセクションが抽出されます。直したい点はここで直します。
- 3
Studioサイトを用意する
新しいStudioサイトが作られます。既存サイトを使い回す選択肢も出ます。
- 4
デザインを選ぶ
ヘッダーとヒーローだけの3案がブラウザで開きます。「2、ただし暗めに」「3の書体を1に合わせて」のような調整つきでも選べます。
- 5
テーマを生成して有効化する
theme.json、テンプレート、テンプレートパーツ、スタイル、アニメーションが作られ、ブロックマークアップの検証を経て、テーマが有効になります。
- 6
ローカルURLを受け取る
以後は、デザインの調整、共有用プレビューリンクの作成、ページの追加、デザイン案の作り直しに進めます。
3案を先に出して選ぶ構成なので、最初の依頼文は仕様の叩き台で十分です。サイトの種類と屋号、見せたい雰囲気が1文に入っていれば、残りは仕様確認の段で補えます。
3つのコマンドの違い
コマンドは3つです。
| コマンド | 役割 |
|---|---|
/wordpress.com:quick-build <説明> | 役割説明から、デザイン選択、テーマの展開まで一気に進める |
/wordpress.com:preview-designs <説明> | 役割3つのデザイン方向のプレビューだけを作る、または作り直す |
/wordpress.com:design-site <説明> | 役割スタイルタイル、レイアウト、モックアップを経てテーマを作る |
迷ったときの目安は、テーマまで一度に欲しければquick-build、色や書体の方向だけを先に見比べたければpreview-designsです。段階ごとに承認したいときはdesign-siteを選びます。この目安はコマンドの説明文からの推測で、公式が使い分けを指示しているわけではありません。
design-siteで追加される工程
design-siteは、最終のテーマ生成の前に次の工程を挟みます。
design-siteの追加工程
スタイルタイル
パレット、タイポグラフィ、コンポーネントの3方向がインタラクティブなHTMLで出ます。1つを選ぶか要素を混ぜて、デザイントークンを固定します。
ページレイアウト
固定したトークンから、ページ全体の構成が3案作られます。
全ページのモックアップ
ホーム、About、料金などが完全なHTMLで描かれ、WordPressのコードを書く前に確認できます。
デザインギャラリー
Studioサイトの
/?design-galleryに、生成物が自動更新で並びます。
既存サイトを作り直す場合は、URLを渡します。プラグインが既存の内容を取り込み、新しいデザインの土台にします。モックアップの段階でコードを書かないため、方向が合わないときの手戻りはquick-buildより小さくなると読めます。ただしこれは工程の構造からの推測で、所要時間や費用の比較はREADMEにありません。
作ったあとに頼める修正
quick-buildの最後に出る「次の一手」のうち、READMEが具体例を書いているのは、色・書体・レイアウトの調整依頼です。マーケットプレイスの紹介ページは、Claudeに頼む文の例として次のような言い方を挙げています。
- 「チームメンバーのカードを表示するカスタムブロックが欲しい」
- 「パン屋のためのWooCommerceストアを計画したい」
- 「サイトをもっとモダンで清潔な感じにしたい」
- 「アクセシビリティとパフォーマンスの問題を調べて」
どれも関連するスキルが自動で働く、という説明です。コマンドを覚えなくても、WordPressの作業を頼めば適切なスキルが選ばれる想定になっています。
テレメトリと止め方
プラグインは、利用回数だけを匿名で数えます。ユーザーの識別情報、端末の特定情報、サイト名、ファイルパス、個人データは集めません。記録されるのは次の2件です。
| グループ | 統計 | 発生するとき |
|---|---|---|
| agent-site-builder | 統計started | 発生するとき/wordpress.com:quick-buildを呼んだとき |
| agent-site-builder | 統計theme-activated | 発生するときテーマが展開され有効になったとき |
止めたいときは、Claudeを起動する前に環境変数を設定します。
export WP_SITE_CREATOR_NO_TELEMETRY=1つまずいたときの対処
症状から原因を絞る
- Qstudioコマンドが見つからないか?答えがはいのとき答えがいいえ
StudioのCLIを有効にして、ターミナルを再起動します。
- Q「Wrong directory」と出るか?答えがはいのとき答えがいいえ
Studioのサイトがあるフォルダ(例:
~/Studio)からClaudeを起動し直します。 - Qデザインプレビューが真っ白か?答えがはいのとき答えがいいえ
画像パスの問題が多いとされています。
/wordpress.com:preview-designsを再実行します。 - Qブロックの修正中にNode.jsが見つからないと出るか?答えがはいのとき答えがいいえ
Node.js 18以上を入れます。検証ツールが必要とします。
- Qテーマは有効なのに見た目がおかしいか?答えがはいのとき答えがいいえ
/wordpress.com:quick-buildを再実行して作り直すか、色・書体・レイアウトを個別に直すよう頼みます。
テーマが期待どおりに表示される
ローカルURLを開いて、ヘッダーとヒーローの見た目を確かめます。
ほかの方法との使い分け
同じWordPress.comでも、会話で既存サイトを操作する経路とは役割が違います。投稿・プラグイン・設定を会話で扱うにはClaudeとWordPress.comのコネクタを使います。Build with WordPressは、ローカルのStudioに新しいテーマを作る側です。
PHPでプラグインを書くならClaude CodeでWordPressプラグイン開発を始めるが手順を持っています。サイト編集に特化した別のプラグインの例として、Flintプラグインがあります。
まとめ
Build with WordPressは、Studioのサイトフォルダから--plugin-dirで起動して使うプラグインです。1セッションで済ませるならquick-build、工程ごとに承認するならdesign-siteと選びます。使う前に、StudioのCLIとNode.js 18以上が揃っているかを確かめておくと、つまずきの大半を避けられます。