elementor-content について
WordPressのページやテンプレートを編集する際に、Elementorのコンテンツを安全に扱うスキルです。既存構造の保持と変更の最小化を重視し、書き込み前後にバックアップと検証を行います。
主な機能
- 01Elementor JSONの慎重な編集
- 02同一サイトの要素とコントロールの確認
- 03書き込み前のバックアップと検証
- 04書き込み後の内容と表示の確認
- 05レスポンシブ、グローバル設定、安全性の点検
活用シーン
- 01Elementorページやテンプレートの変更
- 02JSON構造や参照の問題調査
- 03ブレークポイントごとの表示確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ beeltec/ skills --skill elementor-contentインストール後、Claude Code で/elementor-contentを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/best-practices.mdelement-structure.mdtheme-builder-templates.mdwidget-catalog.mdwp-cli-operations.md詳細
Elementor コンテンツ
Elementor の JSON は慎重に編集してください。エクスポートしたテンプレートまたはステージング環境のコピーを優先してください。_elementor_data への直接書き込みは低レベルの代替手段として扱ってください。ウィジェットのスキーマや内部メタデータは、Elementor、Pro、アドオン、機能のバージョンによって異なります。
ワークフロー
- 対象を特定します。JSON テンプレートか WordPress インストール環境かを確認します。
- WordPress の場合、サイト、投稿 ID、投稿タイプ、インストール済みの Elementor/Pro のバージョン、利用可能な CLI コマンドを確認します。例からバージョンメタデータをコピーしないでください。
- ドキュメント全体を読み、変更前にタイムスタンプ付きのバックアップを作成します。
- 見慣れないコントロールを操作する場合は、同じサイトで目的のタイプの要素を調べます。不明なキーや既存の値の形式は保持してください。
- 要求を満たすために必要な最小限のツリー/設定変更を行います。変更しない要素の ID は保持し、新しい要素にのみ重複しない ID を生成します。
- 書き込む前に、JSON、構造、レスポンシブ/グローバル参照、コンテンツ品質、セキュリティを検証します。
- 一度だけ書き込み、読み戻して再度解析し、意図した結果と比較します。
- Elementor がサポートするキャッシュ再生成コマンドを実行し、必要な場合に限りほかのキャッシュをクリアして、関連するブレークポイントでエディターとフロントエンドを目視確認します。
- 検証またはレンダリングに失敗した場合は、バックアップを復元します。
ステージング環境または下書きのワークフローが利用できる場合、公開中の本番ページを変更しないでください。依頼者の許可範囲を超えて、コンテンツの公開、削除、一括更新を行わないでください。
適切なリファレンスを選ぶ
| 必要な情報 | 参照先 |
|---|---|
| JSON ラッパー、ツリー、ID、設定、レスポンシブ値、グローバル設定 | references/element-structure.md |
| 一般的な組み込みウィジェットの例 | references/widget-catalog.md |
| ライブデータベースの読み書き、バックアップ、検証、CLI | references/wp-cli-operations.md |
| Pro Theme Builder のテンプレートと条件 | references/theme-builder-templates.md |
| アクセシビリティ、レスポンシブデザイン、パフォーマンス、セキュリティ、QA | references/best-practices.md |
ウィジェットカタログは例であり、安定したスキーマではありません。キーを正確に把握する必要がある場合は、同じサイトの JSON または登録済みのウィジェットコントロールを調べてください。特に、ネストされた要素、Pro、アドオン、Editor V4 の要素では注意が必要です。
データのルール
- エクスポートしたファイルではテンプレートラッパー(
title、type、version、page_settings、content)を使用します。_elementor_dataに格納されるのは content 配列のみです。 settingsはソースデータに合わせて空の配列またはオブジェクトとして保持してください。理由なく正規化しないでください。- 各要素には、ドキュメント内で一意の
id、elType、settings、elements配列が必要です。ウィジェットにはwidgetTypeも必要です。 - ソースの
isInnerの値を保持してください。そこからコンテナーの深さを推測したり、要素の移動だけを理由に書き換えたりしないでください。 - 子要素を配置できるのは、コンテナーと明示的にネストに対応しているウィジェットです。通常のウィジェットの
elements配列は空のままにしてください。 - 移行が依頼されていない場合は、従来のセクション/カラムのツリーを保持してください。新しいレイアウトには、対象サイトがサポートするコンテナーを優先してください。
__globals__の参照を保持し、参照先のキットスタイルが移行先に存在することを確認してください。依頼がない限り、グローバル設定をハードコードされた値に置き換えないでください。_tablet/_mobile以外のカスタムブレークポイントのサフィックスにも対応してください。サイトのブレークポイント設定を確認してください。- リッチテキスト、URL、カスタム属性、カスタム CSS、ショートコード、動的タグは信頼できない入力として扱ってください。信頼できるマークアップのみを保持し、実行可能なコンテンツを決して作成しないでください。
検証
書き込み前:正確なペイロードを解析してルートの型を確認します。必須フィールドと重複する要素/リピーター ID を再帰的にチェックします(ID は 16 進数である必要はありません)。各ウィジェットタイプが対象サイトに存在することを確認し、サポートされているネストされた子要素を保持します。移行先のコンテキストで、メディア ID/URL、内部リンク、動的タグ、グローバルスタイルの参照をチェックします。見出しの順序、ランドマーク、代替テキスト、リンクの説明、キーボード操作、可視フォーカス、コントラスト、モーションコントロールを確認します。デバイスごとに非表示にするためだけにレイアウトを重複させず、デスクトップと有効なすべてのブレークポイントを確認します。グローバルスタイル、レスポンシブの継承、浅いコンテナツリー、適切なサイズのメディアを優先します。
書き込み後:保存された値を読み戻して解析します。意図した差分を確認し、無関係なコンテンツが変更されていないことを確かめます。利用可能な場合は wp elementor flush-css を実行し(条件を変更した場合は wp elementor-pro theme-builder clear-conditions も実行します)、エディターが読み込まれることを確認したうえで、関連するブレークポイントでフロントエンドの表示とインタラクションを検証します。