wordpress-elementor

WordPress Elementor

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

前提条件

• WP-CLI 接続が機能しているか、管理者アクセス権があること（wordpress-setup スキルを使用）
• Elementor がインストールされ、有効になっていること：wp @site plugin status elementor

ワークフロー

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

# List Elementor pages
wp @site post list --post_type=page --meta_key=_elementor_edit_mode --meta_value=builder \
  --fields=ID,post_title,post_name,post_status

# Editor URL format: https://example.com/wp-admin/post.php?post={ID}&action=elementor

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

変更の種類	方法	リスク
テキストコンテンツの更新	WP-CLI search-replace	低（バックアップがある場合）
画像 URL の差し替え	WP-CLI meta update	低（バックアップがある場合）
ウィジェットのスタイル設定	ブラウザー自動化	なし
セクションの追加・削除	ブラウザー自動化	なし
レイアウトの変更	ブラウザー自動化	なし
テンプレートの適用	ブラウザー自動化	なし

目安：既存のウィジェット内のテキストや 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. 表示を確認する

簡単なテキスト置換：

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

# Execute (after confirming dry run looks correct)
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/"
# Login first, then navigate to Elementor editor
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. テンプレートにカーソルを合わせて、「テンプレートをエクスポート」をクリックします
3. .json ファイルとしてダウンロードされます

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

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

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

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

WP-CLI を使って既存のページを複製する：

# Get source page's Elementor data
SOURCE_DATA=$(wp @site post meta get {source_id} _elementor_data)
SOURCE_CSS=$(wp @site post meta get {source_id} _elementor_page_settings)

# Create new page
NEW_ID=$(wp @site post create --post_type=page --post_title="Duplicated Page" --post_status=draft --porcelain)

# Copy Elementor data
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"

# Regenerate CSS
wp @site elementor flush-css

WP-CLI を使ってページ間でテンプレートを適用する：

# Get source data
SOURCE=$(wp @site post meta get {source_id} _elementor_data)
SETTINGS=$(wp @site post meta get {source_id} _elementor_page_settings)

# Apply to target
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"

# Clear cache
wp @site elementor flush-css

ステップ 5：確認する

# Check the page status
wp @site post get {post_id} --fields=ID,post_title,post_status,guid

# Get live 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
# OR if elementor CLI not available:
wp @site option delete _elementor_global_css
wp @site post meta delete-all _elementor_css

グローバルウィジェット

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

# List global widgets
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          # Clear CSS cache
wp @site elementor library sync       # Sync with template library
wp @site elementor update db          # Update database after version change