wp-elementor-builder は何をしますか？
Claude/Codex 向けのガイド付きスキルです。ローカルの DDEV 環境で WordPress ページを、ネイティブの Elementor および ProElements ウィジェットのみを使い、テーマファイルには一切触れずに構築します。
概要
このスキルは、AI エージェントが Elementor を使って WordPress ページを構築する際のベストプラクティスを提供します。
- DDEV で動作するローカル WordPress 環境を前提とします。
- テーマファイルを直接編集する代わりに、Elementor のウィジェットとテンプレート機能を活用します。
- ProElements のウィジェットも使用可能ですが、カスタムコードやサードパーティプラグインのウィジェットは使用しません。
前提条件
- ローカルに DDEV がインストールされ、WordPress プロジェクトがセットアップされていること。
- Elementor および Elementor Pro がインストールされ、有効化されていること。
- AI エージェント（Claude Code、Codex など）が DDEV 環境にアクセスできること。
使用方法
- AI エージェントに、構築したいページのレイアウトやコンテンツを説明します。
- エージェントは Elementor のビルダーを起動し、指定されたウィジェットを配置します。
- すべてのスタイル設定はウィジェットのオプション内で行い、テーマのスタイルシートは編集しません。
- ページは公開前にプレビュー可能で、必要に応じて調整を依頼できます。
制約
- テーマファイル（
header.php、footer.php、style.cssなど）を直接編集しないでください。 - カスタム CSS は Elementor のウィジェット設定内にのみ記述し、テーマの
style.cssには追加しません。 - サードパーティ製のウィジェットプラグインは使用せず、Elementor ネイティブまたは ProElements のウィジェットのみを使用します。
例
「会社概要ページを作成して。ヒーローセクションには背景画像と大きな見出し、その下に 3 カラムのサービス一覧、さらに問い合わせフォームを配置してください。」
上記のリクエストに対し、AI エージェントは以下のように応答します。
- DDEV の WordPress 管理画面にログインします。
- 「ページ」→「新規追加」から Elementor で編集を開始します。
- ヒーローセクションには「Inner Section」ウィジェットと「Heading」ウィジェットを配置し、背景画像を設定します。
- 3 カラムのレイアウトには「Tabs」ウィジェットまたは「Icon List」ウィジェットを利用します。
- 最後に「Form」ウィジェット（ProElements）で問い合わせフォームを追加し、公開します。
トラブルシューティング
- ウィジェットが表示されない場合：Elementor Pro が正しくライセンス認証されているか確認してください。
- レイアウトが崩れる場合：DDEV のパーミッション設定を見直し、必要に応じて
ddev restartを実行してください。