WordPress Elementor

既存の WordPress サイトで Elementor ページを編集し、テンプレートを管理します。ブラウザの自動操作（ビジュアル/構造的な変更用）または WP-CLI（安全なテキスト置換用）を使用して、更新されたページコンテンツを生成します。

前提条件

• 動作中の WP-CLI 接続または管理者アクセス（wordpress-setup スキルを使用）
• Elementor がインストール・有効化されている: wp @site plugin status elementor

ワークフロー

ステップ 1: ページを特定する

# Elementor ページをリストする
wp @site post list --post_type=page --meta_key=_elementor_edit_mode --meta_value=builder \
  --fields=ID,post_title,post_name,post_status

# エディタ URL フォーマット: https://example.com/wp-admin/post.php?post={ID}&action=elementor

ステップ 2: 編集方法を選択する

変更タイプ	方法	リスク
テキストコンテンツの更新	WP-CLI search-replace	低い（バックアップ時）
画像 URL の置換	WP-CLI メタ更新	低い（バックアップ時）
ウィジェットのスタイリング	ブラウザの自動操作	なし
セクション の追加/削除	ブラウザの自動操作	なし
レイアウト変更	ブラウザの自動操作	なし
テンプレートの適用	ブラウザの自動操作	なし

判断の目安: 既存ウィジェット内のテキストまたは URL だけを変更する場合は、WP-CLI の方が高速です。構造的な変更の場合は、ブラウザ経由でビジュアルエディタを使用してください。

ステップ 3a: WP-CLI でテキストを更新する

常にバックアップを取る:

wp @site post meta get {post_id} _elementor_data > /tmp/elementor-backup-{post_id}.json

実行前のチェックリスト:

1. postmeta をバックアップ（上記）
2. 置換をドライラン実行
3. ドライランの結果が期待と一致することを確認（置換数が正しい）
4. 実行
5. CSS キャッシュをフラッシュ
6. ビジュアルで確認

シンプルなテキスト置換:

# ドライラン
wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \
  --include-columns=meta_value --dry-run --precise

# 実行（ドライランが正しいことを確認した後）
wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \
  --include-columns=meta_value --precise

更新後、Elementor の CSS キャッシュをクリア:

wp @site elementor flush-css

elementor WP-CLI コマンドが利用できない場合:

wp @site option delete _elementor_global_css
wp @site post meta delete-all _elementor_css

置換しても安全なもの:

安全	リスク大
見出しテキスト	HTML 構造
段落テキスト	ウィジェット ID
ボタンテキストと URL	セクション/カラム設定
画像 URL（同じサイズ）	レイアウトプロパティ
電話番号、メールアドレス	CSS クラス
住所	要素の順序

ステップ 3b: ブラウザ自動操作でビジュアル編集する

構造的な変更の場合は、ブラウザの自動操作を使用して Elementor のビジュアルエディタと対話してください。

ログインフロー（Chrome MCP 経由で既にログインしている場合はスキップ）:

1. https://example.com/wp-admin/ に移動
2. ユーザー名とパスワードを入力
3. 「Log In」をクリック
4. ダッシュボードがロードされるまで待つ

エディタを開く:

1. https://example.com/wp-admin/post.php?post={ID}&action=elementor に移動
2. Elementor のローディングオーバーレイが消えるまで待つ（5〜10 秒かかることがあります）
3. 左側のサイドバーにウィジェットパネルが表示されたらエディタの準備完了

テキストコンテンツを編集する:

1. ページプレビュー（右側のパネル）のテキスト要素をクリック
2. 要素が選択される（青い枠線）
3. 左側のサイドバーに要素の設定が表示される
4. 「Content」タブの下でエディタフィールドのテキストを編集
5. 変更がプレビューにリアルタイムで反映される
6. 「Update」（左下の緑色ボタン）をクリックするか Ctrl+S で保存

見出しを編集する:

1. プレビューの見出しをクリック
2. 左側のサイドバー > Content タブ > 「Title」フィールド
3. テキストを編集
4. オプション: HTML タグ（H1〜H6）、配置、リンクを調整
5. 保存

画像を変更する:

1. プレビューの画像ウィジェットをクリック
2. 左側のサイドバー > Content タブ > 画像サムネイルをクリック
3. メディアライブラリが開く
4. 新しい画像を選択するか、アップロード
5. 「Insert Media」をクリック
6. 保存

ボタンを編集する:

1. プレビューのボタンをクリック
2. 左側のサイドバー > Content タブ: Text（ラベル）、Link（URL）、Icon（オプション）
3. Style タブ: 色、タイポグラフィ、ボーダー、パディング
4. 保存

playwright-cli を使用する:

playwright-cli -s=wp-editor open "https://example.com/wp-admin/"
# 最初にログインしてから Elementor エディタに移動
playwright-cli -s=wp-editor navigate "https://example.com/wp-admin/post.php?post={ID}&action=elementor"

または、ユーザーのログイン済みセッションを使用している場合は Chrome MCP を使用します。

ステップ 4: テンプレートを管理する

保存されたテンプレートをリストする:

wp @site post list --post_type=elementor_library --fields=ID,post_title,post_status

テンプレートをエクスポートする（ブラウザ）:

1. https://example.com/wp-admin/edit.php?post_type=elementor_library に移動
2. テンプレートをホバー > 「Export Template」
3. .json ファイルとしてダウンロード

テンプレートをインポートする（ブラウザ）:

1. https://example.com/wp-admin/edit.php?post_type=elementor_library に移動
2. 上部の「Import Templates」をクリック
3. ファイルを選択 > .json をアップロード
4. テンプレートがライブラリに表示される

新しいページにテンプレートを適用する:

1. ページを作成: wp @site post create --post_type=page --post_title="New Page" --post_status=draft
2. ブラウザで Elementor で開く
3. フォルダアイコン（テンプレートを追加）をクリック
4. 「My Templates」タブから選択
5. 「Insert」をクリック
6. カスタマイズして保存

WP-CLI 経由で既存ページを複製する:

# ソースページの Elementor データを取得
SOURCE_DATA=$(wp @site post meta get {source_id} _elementor_data)
SOURCE_CSS=$(wp @site post meta get {source_id} _elementor_page_settings)

# 新しいページを作成
NEW_ID=$(wp @site post create --post_type=page --post_title="Duplicated Page" --post_status=draft --porcelain)

# Elementor データをコピー
wp @site post meta update $NEW_ID _elementor_data "$SOURCE_DATA"
wp @site post meta update $NEW_ID _elementor_edit_mode "builder"
wp @site post meta update $NEW_ID _elementor_page_settings "$SOURCE_CSS"

# CSS を再生成
wp @site elementor flush-css

WP-CLI 経由でページ間にテンプレートを適用する:

# ソースデータを取得
SOURCE=$(wp @site post meta get {source_id} _elementor_data)
SETTINGS=$(wp @site post meta get {source_id} _elementor_page_settings)

# ターゲットに適用
wp @site post meta update {target_id} _elementor_data "$SOURCE"
wp @site post meta update {target_id} _elementor_edit_mode "builder"
wp @site post meta update {target_id} _elementor_page_settings "$SETTINGS"

# キャッシュをクリア
wp @site elementor flush-css

ステップ 5: 確認する

# ページのステータスを確認
wp @site post get {post_id} --fields=ID,post_title,post_status,guid

# ライブ URL を取得
wp @site post get {post_id} --field=guid

スクリーンショットを撮ってビジュアルの変更を確認:

playwright-cli -s=verify open "https://example.com/{page-slug}/"
playwright-cli -s=verify screenshot --filename=page-verify.png
playwright-cli -s=verify close

---

重要なパターン

Elementor データフォーマット

Elementor はページコンテンツを _elementor_data postmeta に JSON として保存します。構造は以下の通り:

Section > Column > Widget

各要素には id、elType、widgetType、settings オブジェクトがあります。この JSON を直接操作することは可能ですが脆弱です。常にバックアップを取り、手動での JSON 編集よりも search-replace を優先してください。

CSS キャッシュ

Elementor データに対する WP-CLI での変更後は、CSS キャッシュをフラッシュする必要があります。Elementor はウィジェット設定から CSS を事前生成します。古いキャッシュ = ビジュアル変更が表示されません。

wp @site elementor flush-css
# または elementor CLI が利用できない場合:
wp @site option delete _elementor_global_css
wp @site post meta delete-all _elementor_css

グローバルウィジェット

グローバルウィジェットはページ全体で共有されます。1 つを編集すると、すべてのインスタンスが更新されます。

# グローバルウィジェットをリスト
wp @site post list --post_type=elementor_library --meta_key=_elementor_template_type \
  --meta_value=widget --fields=ID,post_title

注意: グローバルウィジェットのデータ内のテキストを置換すると、それを使用しているすべてのページに影響します。

Elementor Pro と Free

機能	Free	Pro
基本ウィジェット	はい	はい
テーマビルダー	いいえ	はい
カスタムフォント	いいえ	はい
フォームウィジェット	いいえ	はい
WooCommerce ウィジェット	いいえ	はい
ダイナミックコンテンツ	いいえ	はい

テーマビルダーテンプレート（ヘッダー、フッター、アーカイブ）は elementor_library 投稿タイプとして保存され、表示条件を示す特定のメタを含みます。

一般的な Elementor WP-CLI コマンド

Elementor CLI 拡張が利用可能な場合:

wp @site elementor flush-css          # CSS キャッシュをクリア
wp @site elementor library sync       # テンプレートライブラリと同期
wp @site elementor update db          # バージョン変更後にデータベースを更新