テーマファイルに自動実装する
ここでは WordPress を例に、AIを使って espar form を自動実装する手順を解説します。WordPress サイトの制作や開発で、既に Claude Code を利用していることを前提としています。
基本的な考え方や準備、実装の流れは、LP や静的なWebサイトの場合と変わりません。事前に AIによる自動実装とは・AIによる自動実装の準備 を確認し、Claude Code・Claude in Chrome・ccskill-esparform 等のセットアップを済ませておいて下さい。作業全体の流れは AIによる自動実装の(D) でも紹介していますが、本ページでは WordPress のテーマファイル特有の実装ポイントに絞って解説します。
Claude Code に実装対象を伝える
テーマ中にフォームを実装する場合
Claude Code は原則、ftp でサーバ上のファイルを見ることができません。テーマファイル一式が格納されたプロジェクトフォルダ配下で Claude Code を起動し、自動実装を依頼します。
その際、@wp-content/themes/sample/contact.php のようにどのテーマファイルに埋め込みたいのかを明示して依頼します。ヘッダやサイドバーに設置する場合は、それぞれ適切なテーマファイルを Claude Code に伝える必要があります。
| 設置場所の例 | 対応するテーマファイルの例 |
|---|---|
| 固定ページ「お問い合わせ」 | page-contact.php 等、固定ページ用のテンプレートファイル |
| 投稿・固定ページ共通のフッター | footer.php |
| サイドバーのウィジェットエリア | functions.php で登録されたウィジェット用のテンプレート |
どのファイルを編集すべきか分からない場合、Claude Code に「お問い合わせページを表示しているテーマファイルを特定して下さい」といった依頼を投げると教えてくれるかも知れません。
固定ページ中にフォームを実装する場合
固定ページの内容は WordPress のDBに保存されます。原則、管理画面からの入力となりますので、Claude Code には以下の2点を伝えて実装してもらったあと、手動でコピー&ペーストすることになります。
- 固定ページ中にフォームを実装したいこと
- 固定ページに紐づくテーマファイル
テーマファイルを参照できるよう、ローカルのプロジェクトフォルダ上で Claude Code を起動しておく必要があります。
投稿中にフォームを実装する場合
投稿ページの内容は WordPress のDBに保存されます。原則、管理画面からの入力となりますので、Claude Code には以下の2点を伝えて実装してもらったあと、手動でコピー&ペーストすることになります。
- 投稿ページ中にフォームを実装したいこと
- 投稿ページに紐づくテーマファイル
テーマファイルを参照できるよう、ローカルのプロジェクトフォルダ上で Claude Code を起動しておく必要があります。
実装を依頼する
編集対象のファイルが決まったら、Claude Code に対象ファイルや関連を伝えフォーム実装を依頼します。以下は page-contact.php というテーマファイルに実装を依頼する例です。
> テーマファイルの
page-contact.phpに、espar form を使った問い合わせフォームを実装して下さい。デザインは既存のページに合わせ、必須項目やメールアドレス形式のチェックも実装して下さい。入力内容は以下です。(*) は必須。適切な入力条件チェックも実装してください。
- 会社名
- お名前(*)
- メールアドレス(*)
- 問い合わせ内容(*)
実装後はローカル環境のブラウザで表示・送信・受信の確認までお願いします。
指示を出すと ccskill-esparform スキルが発動し、AIによる自動実装 の(A)〜(C)と同様の流れで実装が進みます。途中で方針確認などを聞かれた場合は回答して下さい。
動作を確認する
WordPress はPHP動作環境を必要とするため、espar form のスキルが備えるローカル環境確認が利用できません。
テーマファイルに実装させた場合は、そのファイルをサーバの適切な箇所にアップロードして確認して下さい。また固定ページや投稿ページにフォームを実装する場合は、Claude Code が実装した内容をコピーし、管理画面の適切なページでペーストすることになります。