Elementorが使えない?不具合が起こる原因はこれ!

執筆者 | 更新日 2020年08月29日 | Elementorの使い方 | 15 コメント

こんにちは、根本です。

あなたは、すでにElementorという無料のプラグインを使っていると思いますが、何か不具合があって困っていせんか?例えば、、、

  • ページに変な黒いラインが入ってしまっている
  • ページを編集できない
  • ページが表示されない

などなど。実は、Elementorは結構不具合が起こることがあるみたいです。実際に、僕も別のサイトでElementorを使っているんですけど、デザインがおかしくなったことがあります。他には、このブログにコメントをしていただいた方からも、黒い線が入ってしまうというような不具合があることが確認できています。ということで、今回は、Elementorでページを作成して、不具合が起こってしまう原因や解決方法をご紹介していきたいと思います。

Elementorが使えない原因とは?

Elementorのプラグインが使えない原因は、

  • WordPressテーマ
  • プラグイン
  • レンタルサーバー
  • WordPressのバージョン
  • PHPのバージョン
  • MySQLのバージョン
  • WordPressのメモリ
  • ブラウザ
  • SSLの設定

これらの9つあります。以下では、その詳しい原因と対策方法についてご紹介していきます。

WordPressテーマによる不具合

まずは、テーマによる不具合に関してですが、基本的にWordPressにあらかじめ備わっている無料のテーマは使わない方が良いです。

  • twentyfifteen
  • twentysixnteen
  • twentyseventeen
  • twentyeighteen

ここら辺は、不具合が確認されています。黒い線が入ってしまったり、一部の背景がグレーになったりしていました。

  • TCDのテーマ

無料だけでなく、有料のテンプレートでも不具合が生じる場合もあります。

TCDのテンプレートとは相性が悪そうです。

別途サブドメンでOceanWPを使ってテンプレート利用を考えています。

これは、クライアントの方からご連絡をいただいた内容です。具体的にTCDさんの何のテーマを使用していたのかは聞いていませんが、相性が悪いみたいです。ちなみに、僕もTCDさんのOOPS!というテーマを持っているんですけど、そのテーマでは不具合は生じませんでした。TCDさんのテーマを全部チェックしているわけではないので、わかりませんが、一部のテーマでは不具合が起こってしまうかもしれません。

  • Divi

それから、有料のものでもうまくデザインが表示されなかったりします。僕がこのサイトで使用しているDiviは、有料のテーマになるんですけど、他のサイトでElementorと併用したら、ブレットが表示されないという不具合が起こりました。

このように、使用しているテーマとの相性で、不具合が生じることがあります。

じゃあElementorと相性の良いテーマは何?

日本では、Elementorとの相性が良いと公式に発表されているテーマというのは多分ないと思いますが、海外複数あります。例えば、上記にリストアップしたものがそうです。

screencapture demo kohsukenemoto 2019 11 22 12 44 17 scaled

中でも、Hello Themeは、Elementorが作成したテーマですし、無料でダウンロードして使うことができます。上記の画像がテンプレートをインストールした後のトップページです。初めてみたときは、笑っちゃいました。びっくりするほどシンプルです。まあ、Elementorでページを作成することを前提としているテーマなので、こんなにシンプルになっているんだと思います。他に挙げた、OceanWP、Astra Theme、GeneratePressは有料版のテーマを販売していますが、無料版もダウンロード可能です。

ということで、Elementorを使ってページを編集して公開してみたけど、黒い線が入ってしまっているとか、背景の色が元々のテーマの色を引き継いでしまっているという場合は、これらのテンプレートを使ってみてください。

チェック!他にもElementorと相性の良いテーマがあります。もっと知りたい場合は、『Elementorにおすすめな無料テーマまとめ』という記事をご覧ください。

プラグインによる不具合

こちらのページに載っていますが、基本的に、他のプラグインとの相性の関係で不具合が起こることはありません。しかし、以下のプラグインの場合は不具合が起こるみたいです。

  • Shortcodes Ultimate
  • Better WordPress Minify
  • qTranslate X
  • Facebook feed WD
  • Image Map Pro
  • Heartbeat Control
  • WP Clone by WP Academy
  • TheSaaS Theme & TheElementor

このうち、Shortcodes Ultimateは日本人の方も結構使っているかもしれませんね。他は、あまり聞きなれないプラグインばかりだと思います。そもそも、Elementorはショートコードでページを生成しているのでショートコード関係のプラグインとは相性が悪い可能性があるかもしれないですね。

もし、プラグインが原因だと思われる不具合に関しては、そのプラグインを無効化してみてください。もし、重要なプラグインが原因である場合は、サブドメインでWordPressをインストールしてページを作成するとかした方が良さそうです。

レンタルサーバーによる不具合

僕が使用しているXserver(エックスサーバー )では、特に不具合は起こらないんですけど、一部のレンタルサーバーでは不具合が生じるみたいです。

Elementor 使えない 1

僕のクライアントの方は、ロリポップを使用しているのですが、Elementorで編集をしようと思ったら、上記のポップアップが表示されて使えなかったそうです。「ENABLE SAFE MODE」という緑のボタンをクリックしてみると、、、

Elementorが使えない

今度は、このポップアップが表示されたみたいです。ページを更新したら解決できるのかと思ったら、今度はサーバーのエラーが表示されたそうです。サーバー側の設定を変更しようと思って検索をしたら、こちらの記事を発見して、無事に解決できたみたいです。

でも、「一つのテンプレートの警告メッセージが消えても、新しく別のテンプレートをみようとすると、①(「ENABLE SAFE MODE」のポップアップ)の表記は出てしまうので、新しいテンプレートを開くごとにsafe modeボタンは押さないといけないかもしれないです。別の方法もあるのかもしれませんが。」というメッセージをいただきました。

Elementor Safe Modeを有効にする

おそらく、これは、WordPressのダッシュボードから「Elementor」の「ツール」に移動し、「Safe Mode」を「有効にする」に切り替えると解決できるはずです。

WordPressのバージョン

頻繁にサイトを利用している方であれば、それほど問題ないとは思いますが、5.0以上ではないと不具合が生じるので、もし古いバージョンを利用している場合は、アップデートしましょう。

PHPのバージョン

PHPはバージョン5.4で利用できますが、古いバージョンだと不具合が生じたり、セキュリティー的に問題が発生することがあるので、常に最新のバージョンにしておくことをお勧めします。

MySQLのバージョン

MySQLは5.6以上、もしくはMariaDBが10.0以上が必要です。

WordPressのメモリ

128MB以上で利用できますが、256MB以上が推奨されています。

ブラウザ

Chrome、Firefox、Safari、Microsoft Edgeバージョン79以上が必要です。Microsoft Edgeに関しては、79未満だと編集できないので、ご注意ください。

SSLの設定

SSLの設定をしていないと、ページを保存するときに問題が起きる可能性がありますので、SSLの設定もやっておきましょう。Googleも公式に推奨していることでもあります。

まとめ

ということで、Elementorを使う場合は、今回ご紹介したようにテーマやプラグイン、設定環境などによって問題が発生して、使うことができないことがあります。すでに、結構長い期間、ブログを運営しているとか、たくさんの記事が入っているWordPressサイトのテーマを変更することは大変です。しかも、別のテーマに切り替えることよって、外観が崩れてしまうこともありますので、あまりオススメはできません。

もし、オプトインページとかセールスページなどといったランディングページを作成したいのであれば、サブドメインや新規でドメインを取得して、新しくWordPressのサイトを作成し、そちらにHello ThemeとかOceanWPなどのElementorと相性が良いテーマをインストールして、使って行くと良いと思います。

プラグインが問題でElementorが使用できないのであれば、無効化すればOKです。レンタルサーバーの問題であれば、サーバーに問い合わせてみたり、Google検索をかけて設定を変更してみてください。

根本 耕輔

根本 耕輔

WordPressを使ったオンラインビジネスの構築が得意。

KClubマーケティング、KClubショーケースを運営。

Elementorの使い方を学びませんか?

Elementorの各ウィジェットの使い方からページの作り方まで網羅的にカバーしたコースが無料で受講できます。(通常¥980)

15 コメント

  1. もちっちょ

    まとめとっても参考になり助かりました。
    ↓の無料テーマともElementor相性悪いようです。素敵な無料テーマなのに残念(/ω\)
    ———
    Creativeilyバージョン: 1.7
    作成者: ThemeEverest
    ———

    ・タイトルやテキストなどの部品を配置すると、配置直後は表示されず、画面をスクロールすると表示される。
    ・配置した部品が握って移動できない
    ・google mapを配置すると削除できない

    等おきてしまい、なにこれー?とこのページにたどり着きテーマが原因だと判明しました。ありがとうございました。

    返信する
    • 根本耕輔

      もちっちょさん、コメントありがとうございます。Creativeilyは初めて聞くテーマなのですが、シンプルで綺麗ですね。貴重な情報ありがとうございます!

      返信する
  2. ひめこ

    教えてください、お願いします。
    シドニーでエレメンターを入れましょうと推奨がしつこいくらいで、
    入れたのにも関わらず、スマホでは、まったくうつっていません、、
    レスポンシブ設定では、スマホはONになっていますし、
    エレメンターでのプレビューでもばっちり、スマホでも表示されているのに、
    実際、スマホ実機からでは、みえていません、、PCはばっちり表示されているのにです、、
    PCでは実際に表示、スマホプレビューでは表示されているのに、、
    こちら、ド素人で、htmlとかわからずです、なんとか、シドニーを
    時間をかけてカスタマイズしました、、子テーマです、、
    せっかくPCではできているのに、スマホで表示されないのでは、あきらめるしか、、
    あと、不審なのは、シドニーワードプレス、新規投稿デフォルトの1行目に、
    スラッグとタイトルを入れないと、エレメンター編集へ移動した際に、
    必ず、Elementor#979  などとタイトルに出てしまい、デフォルト画面で消せないのです、
    白紙のまま、エレメンター編集へ行くと、くっきりこう表示されてしまうので、
    仕方なく、ここに(デフォルトワードプレス投稿画面(エレメンター編集へ行く手前))タイトルを
    入れなきゃなんです、、(ELEMENTOR#345 みたいなのがでちゃうので)で、エレメンター編集へ行って対tるを入力すると、先のとタイトルが2つになってしまうので、エレメンター編集では、タイトルを入れられず、本文からスタートという形なのです、この時点でも、こんなものなのかと不信なのです、、
    よろしくお願いいたします。

    返信する
    • 根本耕輔

      コメントありがとうございます。僕の方でもシドニーテーマを入れてみましたが、ちゃんとスマホでも表示できていました。もしかしたら、プラグインが悪さをしているのかもしれません。インストールしているプラグインを1つずつ停止させて、確認してみてください。

      返信する
  3. あき

    根本様

    お世話になります。ご教授頂ければ幸いです。
    本日突然Elementorが使用できなくなりました・・・。
    (※従来のページの変更は可能ですが、固定ページや投稿の新規作成の場合、”Elementorで編集”ボタンを教えて一切飛ばなくなりました。

    WordPress自体のアップデートのせいでしょうか。
    助けてください・・。お願いいたします。

    返信する
    • 根本耕輔

      コメントありがとうございます!もしかしたら、他のプラグインの干渉によってクリックできなくなっているのかもしれません。Yoast SEOのプラグインが原因のエラーが報告されているみたいです。1つ1つプラグインを無効化して、原因をチェックしてみてください。

      返信する
  4. ぴあ

    初めまして、こちらのサイトを参考にElementor proを導入してWebの制作を始めております。
    IE使用のクライアント又はユーザーサイドでの表示についてご意見をお聞かせください。

    以下の記事で今後、Elementor3.0バージョン以降アップデート時にIE11サポートしないようなことが記載されています。
    https://developers.elementor.com/elementor-dropping-support-ie/

    制作するのは主にMacOSなので問題ないのですが、もしWindowsユーザーの表示に不具合(表示崩れなど)があるとクライアント様に今後Webデザインを提供していくのが不安になっております。
    デザイナー畑の私にとってElementorは救世主!なので、今後も使用していきたいとは思っています。
    しかしながら、Windowsユーザーのクライアントさんに「表示崩れてる」とか言われてしまうと対応に困りそうで。。。

    根本様はIEの表示とその確認についてどうお考えでいらっしゃいますでしょうか?
    お忙しいとは思いますが、ご意見・アドバイスお聞かせいただけますと幸いです。

    返信する
    • 根本耕輔

      コメントありがとうございます!IEはマイクロソフトでも推奨されていないみたいなので、もしクライアントさんが使用されているのであれば、推奨されていないので別のブラウザを使用するように伝えれば大丈夫だと思います。

      返信する
      • ぴあ

        早速のお返事ありがとうございます。
        そうですよね。推奨されてない、今後使用が減少していく等の流れでご説明していきます。
        自信を持ってelementorを使用していこうと思います。
        ありがとうございました!

        返信する
  5. yoshi

    根本様、初めまして!
    この間無料動画を無料で取得させてただきました。
    ありがとうございます。

    おかげさまでLPができたのできて、Elementorのプレビューでは見れるのですが、
    Elementorを一度出てワードプレスのダッシュボードのプレビュー画面で見ると
    真っ白になってしまいます・・・。

    この点もし宜しければお伺いしたいです。

    返信する
    • 根本耕輔

      コメントありがとうございます!最近、WordPressやElementorのバージョンが変更になったのですが、アップデートはされていますでしょうか?

      返信する
  6. YOSHI

    早速ありがとうございます。
    アップデートですね!
    なるほど。確認してみます!

    返信する
  7. YOSHI

    確認してみましたが、ワードプレスもエレメンターも最新になっておりました。
    エレメンターの編集画面に最終履歴の保存ファイルがあるのですが、
    ワードプレスのプレビュー画面や本番に反映させるために、何か作業が必要だったりしますか?

    返信する
    • 根本耕輔

      いえ、特に作業は必要ありません。編集して、保存もしくは公開すればデザインが反映されるはずです。当記事にリストアップした対策で対応できないとすれば、他に考えられるのは、ブラウザの履歴かElementorの不具合が原因かもしれません。履歴を削除してもページが見れない場合は、Elementorのバグかもしれませんので、その場合はお手数ですが、サポートの方にご連絡ください。

      返信する
      • YOSHI

        かしこまりました!
        いろいろとありがとうございます!

        返信する

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?