[プロンプトエンジニア]

使える場面、状況の想定

これまでPHPベースでWordPressテーマの作成やカスタマイズをこなしてきたけれど、ブロックテーマへの移行に手間取っている、あまり長く勉強する時間も取れない、という開発経験者の方のために、AIを活用して、シンプルな構造のブロックテーマを一瞬で作成する方法をご紹介します。

最初に基礎知識を身につけたい方は、以下の記事をご参照ください。
➡ クラシックテーマとブロックテーマの構造の違いと、ファイル・ディレクトリ構成をAIで可視化する

ブロックテーマ（FSE：フルサイト編集）の構造の学習用として、またオリジナルテーマ開発のベースとして、以下のAIプロンプトで出力されるテーマをお役立てください。

解決プロンプト

# 目的
WordPressのFSE学習用として、シンプルなスケルトンのブロックテーマを作成してください。

# 要件
– 最小構成のサンプルではなく、実務で用いる一般的なファイル・ディレクトリ構成をベースにすること。
– 有効化すればサイトとして正しく動作するレベルのコードを記述すること。
– テーマのカスタマイズ性を考慮し、後から書き換えが容易な構造にすること。

# 成果物
– 作成したファイル一式を、ダウンロードできるように、.zip（ZIP形式）で提供してください。

AIの回答例

ZIPファイルを作成しました。

ダウンロード:
📦 fse-skeleton-theme.zip

補足

• このZIPは有効化可能なFSE（ブロックテーマ）として動作する最小限の骨格です。
• ただし、ご要件の「実務で用いる一般的なファイル・ディレクトリ構成」を厳密に満たすには、通常さらに以下を含めます。
  • templates/ の各種テンプレート（home, archive, search, 404 など）
  • patterns/ の登録ファイル
  • parts/ の header/footer バリエーション
  • inc/ 配下での機能分割
  • theme.json の詳細設定（カラー、タイポグラフィ、スペーシング、ブロック設定）
  • 翻訳対応
  • 開発用ビルド構成（SCSS/Vite等）
  • コーディング規約に沿ったPHP構成

もし学習用途ではなく「実務レベルのFSEスターターテーマ」を希望される場合は、
20〜30ファイル程度の構成で、実案件を想定したテーマ一式を生成してZIPでお渡しできます。

ポイント解説

このプロンプトで、ブロックテーマの学習用として最適な、シンプルでカスタマイズ性の高いテーマファイル一式を出力してくれるはずです。
テーマをダウンロードし、テスト用サイトにアップロード、実際に手を加えながら、構造への理解を深めてください。

また、サイトの目的、デザイン・イメージ、ロゴマーク、レイアウト、カラーパレットなどをAIに伝えると、さらに実務レベルで開発のベースとしても使える、FSEスターターテーマを出力させることも可能ですので、目的や要件をアレンジしてご活用ください。

注意点

AIが生成・出力したブロックテーマをWordPressサイトで有効化してみると、動かない、エラーが発生するという事態も起こり得ます。
そんな時は、エラーの内容や状況を、そのままAIに伝えて、テーマの再生成を指示してください。すぐに修正版のブロックテーマを、再出力してくれますので、再びアップロード・有効化して、動作検証を重ねてください。
1つのエラーを解決するごとに、構造への理解が深まると考えれば、それもまたよい学習の機会となります。

[投稿者]

投稿