2026年5月20日

2026年5月20日

Elementorのウィジェットが表示されない・反映されない原因と直し方

Elementor の「ウィジェットが表示されない」は、原因が大きく4つに分かれます。古い CSS やキャッシュが残っている、ウィジェットが無効化・未登録になっている、エディター自体が読み込めていない、更新で不具合が入った、のどれかです。この記事では、症状から原因を絞り込み、順に直す方法を説明します。画面の名前とコマンドは、2026年11月時点の Elementor 4.4 に合わせています。

作業の前にサイトのバックアップを取ってください。プラグインを止める確認は、できればステージング環境で行います。

症状から原因を絞り込む

症状 主な原因 見る節
エディターでは正しいのに、公開ページに反映されない・崩れる 古い CSS ファイル、ページキャッシュや CDN 手順1
特定のウィジェットがパネルにない、公開ページから消えた エレメントマネージャーでの無効化、コードでの登録解除、Pro やアドオンの停止 手順2
自作のウィジェットがパネルに出ない 登録のコードの誤り 手順3
エディターが読み込み中のまま、白い画面 メモリ不足、テーマやプラグインとの競合 手順4
Elementor を更新したら崩れた 新しいバージョンの不具合、Elementor と Pro のバージョン違い 手順5

手順1:古い CSS とキャッシュを消す

Elementor は、ページごとのデザインを CSS ファイル(wp-content/uploads/elementor/css/)に書き出して、公開ページで読み込みます。このファイルが古いままだと、エディターでは正しいのに公開ページだけ違って見えます。

  1. 管理画面の Elementor の「ツール」を開き、「一般」タブの「Elementor キャッシュ」で「ファイルとデータの削除」をクリックします。CSS ファイルと、データベースに保存された生成済みのデータが削除され、次にページが表示されたときに作り直されます。投稿の内容は消えません。
  2. キャッシュ系のプラグイン、サーバーのキャッシュ、Cloudflare などの CDN のキャッシュを、それぞれの管理画面で削除します。
  3. ブラウザで強制再読み込み(Windows は Ctrl+F5、Mac は Command+Shift+R)をして確認します。

Elementor 4 系では、「設定」「ツール」などは管理画面の「Elementor」→「エディター」の中にまとめられています。古いバージョンでは「Elementor」メニューの直下にあります。

WP-CLI が使える場合、手順1の1つ目は次のコマンドでもできます。--regenerate を付けると、次の表示を待たずにすぐ作り直します。

wp elementor flush-css --regenerate

# Redis などの永続オブジェクトキャッシュを使っている場合は、それも消す
wp cache flush

これで直らない場合は、Elementor の「設定」→「パフォーマンス」タブの「CSS 印刷設定」を「内部埋め込み」に変えて確認します。CSS をページの HTML に直接書く方式なので、これで直るなら、CSS ファイルの書き出しか読み込みに問題があります(手順6のパーミッションと、キャッシュ・CDN の設定を確認します)。原因が分かったら、推奨の「外部ファイル」に戻します。

手順2:無効化・登録解除されていないか確認する

エレメントマネージャー

管理画面の Elementor の「エレメントマネージャー」では、ウィジェットごとに有効・無効を切り替えられます。ここで無効にしたウィジェットは登録されなくなるため、編集パネルに出ないだけでなく、すでにそのウィジェットを置いたページでも表示されなくなります。

一覧で該当のウィジェットが無効になっていないか確認し、必要なら有効に戻します。WP-CLI では、無効にされているウィジェットの名前を次のコマンドで確認できます。

wp option get elementor_disabled_elements --format=json

コードでの登録解除

子テーマの functions.php やカスタム用のプラグインに、elementor/widgets/register フックで unregister() を呼ぶコードがあると、そのウィジェットも登録されません。ウィジェットの名前(counter や progress など)で検索して、該当のコードがないか確認します。

Elementor Pro とアドオン

フォームやポップアップなどの Pro のウィジェットは、Elementor Pro のプラグインが登録しています。Pro を停止すると、そのウィジェットは登録されないため表示されません。アドオンのプラグインが追加したウィジェットも同じです。「プラグイン」の一覧で、該当のプラグインが有効になっているかを確認します。

Elementor と Elementor Pro の、どちらかだけが古いと正しく動かないことがあります。両方を最新版にそろえます。

手順3:自作ウィジェットの登録を確認する

自作のウィジェットがパネルに出ない場合は、登録のコードを確認します。Elementor の開発者向けドキュメントの例では、elementor/widgets/register フックで受け取ったウィジェットマネージャーの register() に、ウィジェットのインスタンスを渡します。

<?php
// 自作プラグインのメインファイルの例
add_action( 'elementor/widgets/register', function ( $widgets_manager ) {
	require_once __DIR__ . '/widgets/class-my-widget.php';
	$widgets_manager->register( new \My_Widget() );
} );

確認するところは次のとおりです。

  • ウィジェットのクラスが \Elementor\Widget_Base を継承しているか
  • get_name() が返す名前が、ほかのウィジェットと重ならないか
  • get_categories() が、登録済みのカテゴリー(basic、general など)を返しているか。独自のカテゴリーを使う場合は、elementor/elements/categories_registered フックで先にカテゴリーを登録します
  • require_once のファイルパスが正しいか(PHP のエラーで止まっていないか)

PHP のエラーは、デバッグログで確認できます。WP-CLI で設定する場合は次のようにします。画面には出さず、wp-content/debug.log に記録します。

wp config set WP_DEBUG true --raw --type=constant
wp config set WP_DEBUG_LOG true --raw --type=constant
wp config set WP_DEBUG_DISPLAY false --raw --type=constant
tail -n 50 wp-content/debug.log

確認が終わったら、3つの定数を false に戻します。

手順4:エディターが開かないときはメモリと競合を確認する

メモリの上限

Elementor の公式のシステム要件(2026年10月16日更新)では、WordPress のメモリ上限は最低 256MB、推奨 512MB です。エディターは管理画面の中で動くため、管理画面用の上限 WP_MAX_MEMORY_LIMIT も関係します。wp-config.php の、編集はここまでと書かれたコメントより前に次を追記します。

<?php
define( 'WP_MEMORY_LIMIT', '512M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

この定数は、サーバー側で PHP の memory_limit の変更が許可されている場合に効きます。値が変わらない場合は、サーバーの設定(php.ini やレンタルサーバーのコントロールパネル)で上げます。詳しくは WordPressのPHPメモリ不足エラーの原因と直し方 を参照してください。

セーフモードで競合を切り分ける

Elementor の「ツール」→「一般」タブにある「セーフモード」を有効にすると、テーマやほかのプラグインを読み込まずにエディターを動かします。訪問者向けの表示は変わりません。

  1. 「セーフモード」を有効にして保存します。
  2. エディターを開き直し、問題が再現するかを確認します。
  3. セーフモードで直るなら、原因はテーマかほかのプラグインです。セーフモードを無効に戻してから、ステージング環境などでプラグインを1つずつ止めて原因を探します。

WP-CLI でプラグインを止める場合は、元に戻せるように、有効なプラグインの一覧を先に保存します。

# 今有効なプラグインの一覧を保存する
wp plugin list --status=active --field=name > active-plugins.txt

# Elementor と Elementor Pro 以外を止める
wp plugin deactivate $(grep -v -x -e elementor -e elementor-pro active-plugins.txt)

# 1つずつ有効にして、そのたびに問題が再現するかを確かめる
wp plugin activate contact-form-7

# 確認が終わったら元に戻す
wp plugin activate $(cat active-plugins.txt)

この方法は訪問者の表示にも影響するので、本番サイトではステージングで試すか、アクセスの少ない時間に行います。

サーバーの設定との相性でエディターが読み込めない場合に備えて、Elementor の「設定」→「高度な設定」タブには「エディター読み込みツールのメソッドを切り替える」(英語表示では Switch Editor Loader Method)という項目があります。上の方法で原因が見つからないときに、有効にして試します。

保存できない、保存時に 403 や 500 になるといった場合は、Elementorのエラーを解決する方法 で、通信の調べ方と WAF の確認方法を説明しています。

手順5:更新で崩れたときは前のバージョンに戻す

Elementor の更新の直後から崩れた場合は、前のバージョンに戻して様子を見ます。戻す前に、データベースのバックアップを取ります(Elementor の画面にも同じ注意が出ます)。

  1. Elementor の「ツール」→「バージョン管理」タブを開きます。
  2. 「以前のバージョンにロールバックする」の欄で戻したいバージョンを選び、「再インストール」のボタンをクリックします。

WP-CLI で特定のバージョンを入れ直す場合は、次のようにします。4.3.6 の部分は戻したいバージョンに置き換えます。戻している間に自動更新で新しいバージョンに上がらないよう、自動更新も止めます。

wp plugin install elementor --version=4.3.6 --force
wp plugin auto-updates disable elementor

不具合が直ったバージョンが出たら、自動更新を有効に戻し(wp plugin auto-updates enable elementor)、最新版に更新します。古いバージョンのまま使い続けると、セキュリティの修正が入りません。

手順6:CSS ファイルのパーミッションを確認する

wp-content/uploads/elementor/ に書き込めないと、CSS ファイルを作り直せません。WordPress の推奨どおり、ディレクトリは 755、ファイルは 644 を基本にします。chmod -R 644 のようにディレクトリまで 644 にすると、中のファイルを開けなくなるので、ディレクトリとファイルを分けて設定します。

# 現在の権限と所有者を確認する
ls -la wp-content/uploads/elementor/css/

# ディレクトリは 755、ファイルは 644 にする
find wp-content/uploads/elementor -type d -exec chmod 755 {} \;
find wp-content/uploads/elementor -type f -exec chmod 644 {} \;

所有者が Web サーバーの実行ユーザーと違うと、権限が正しくても書き込めないことがあります。所有者の変更が必要な場合は、レンタルサーバーではサポートに確認します。

まとめ

  • 公開ページに反映されないときは、「ファイルとデータの削除」か wp elementor flush-css --regenerate のあと、ページキャッシュと CDN も消す
  • ウィジェットが消えたときは、エレメントマネージャー、unregister() のコード、Pro やアドオンの有効・無効を確認する
  • 自作ウィジェットは elementor/widgets/register で register() しているか、クラスとカテゴリーが正しいかを確認する
  • エディターが開かないときは、メモリの上限を上げ、セーフモードで競合を切り分ける
  • 更新で崩れたら、バックアップを取ってから「バージョン管理」で前のバージョンに戻す

お気軽にご相談ください

お見積りへ お問い合わせへ
▲