WordPressの魅力は、自分好みのテーマを入れることで、統一されたデザインで記事を作って行くことができるところです。しかし、特定の記事でデザインの傾向を変えたり、あるいはもっと凝ったページ作りがしたくなったりするときがあります。
そんなときは、やはりもうひとつのWordPressの特徴であるプラグインを活用するのが便利ですよね。というわけで、筆者もいろいろと情報を探していたところ見つけたのが「Elementor」というプラグインでした。
WordPress初心者の方にとってオリジナルのレイアウトでページをレイアウトすることは少しハードルが高いでしょう。有料、無料を問わず何かしらのテーマを適用してある程度形の決まったレイアウトの中で構築されている方も多いと思います。HTMLやCSSを勉強してもWordPressを使いこなすには...
このプラグインで出来ることや使い方については上記の記事に掲載されていますが、少しだけ触れておきます。
▲「Elementor」のエディット画面
この「Elementor」は、テキストや画像をドラッグ＆ドロップしていくことで、直感的に記事を構築していけるページビルダー用のプラグインです。ボタンや見出しなど、90種類以上のウィジェットが用意されているほか、レスポンシンブにも対応。さらに魅力的な記事をお手軽に作りたいという人のために、テンプレートも多数用意されており、それらをベースにカスタマイズしていくこともできます。
▲無数のテンプレートが用意されています。基本は無料で利用できますが、プロ版（1サイト年間49ドルから）にすることで、さらに使えるテンプレートの種類が増えます。
ちなみに、プラグインをインストールするとすべての記事に反映されるというわけではありません。新規投稿画面を開くと「Elementorで編集」というボタンを押すことで、専用のエディット画面を呼び出すという仕組みになっています。通常の記事と切り分けて利用することができるところも、このプラグインの使い勝手がいいところです。
▲「Elementorで編集」というボタンを押すことで、エディターが切り替わります。
たまたまインストール時にぶつかった不具合
というわけで、なかなか便利なプラグインなのですが、筆者がこの「Elementor」の存在を知りインストールしてみたのは、2019年8月後半頃でした。そのときに、たまたま遭遇したのが「Elementor」のエディター画面がうまく表示されないという不具合です。残念ながらそのときのスクリーンショットは残っていないのですが、肝心なエディット可能なエリアがブラウザで表示できる領域を超えて上の方に移動してしまっているという状態です。
Twitterで情報を検索してみたところ、数は多くないもののどうやら同様の不具合を抱えている人がいることがわかりました。ちなみにこの記事を書いている2019年9月19日の時点ではプラグインのバージョンも上がり、同様の不具合は発生しておりません。
https://twitter.com/AiKwhr/status/1164805864902934528
Hey #elementor folks. Anyone else get this error ? #webdevelopment #wordpress pic.twitter.com/Hj0ShizdM2
— 3-A-Media (@3AMedia) August 23, 2019
WordPressで不具合がきたときのチェック項目
今回の「Elementor」に限らず、長らくWordPressを利用していると様々なトラブルに遭遇する場面があります。そうしたときに、まずはどこにトラブルの原因があるか順を追って調査していくことが重要です。
結論から先に書いておくと、今回遭遇した「Elementor」の不具合は、ウィジェットに設定していたGoogle AdSenseの広告がレスポンシブルだったことが原因でした。筆者がそれを見つけるまでの過程が、以下のような流れになります。
【SNSや公式サイト等で情報を収集】
1. Twitterで検索してみる
以前なら何かわからないことを調べるときに「ググれ」と言われたものですが、もはやGoogleはリアルタイムで起きている不具合を調べるのにはあまり向いていません。それよりも手っ取り早いのがTwitterです。
Twitterでの検索で問題自体は解決しないこともありますが、どれぐらいの人が同様の問題を抱えているのかわかります。先ほどご紹介しましたが、日本や海外でも同じ不具合が発生している人がいることがわかりました。
2. 公式のサポートもチェックしてみる
公式のサポートページがある場合は、そちらもチェックしてみましょう。ただし、日本語で書かれている場合は問題ありませんが、海外のプラグインの場合はほとんどが英語でやりとりが行われています。そのため、細かいニュアンスを機械翻訳で探すのはかなり骨が折れる作業です。時間が掛かりそうな場合はこの手順をスキップして、下記の問題の切り分けに移るのが手っ取り早いかもしれません。
どうしても解決方法が見つからなかったときは、最後の手段としてサポートに連絡するのがいいでしょう。
【問題の切り分け】
簡単に情報を集めたら、続いて問題の切り分けをおこなっていきましょう。WordPressでプラグインを使用したときに不具合を起こす要因は、ざっくり挙げてみると以下のようなものになると思います。
・考えられる要因その1：テーマとの相性
・考えられる要因その2：ほかのプラグインとの相性
・考えられる要因その3：ウィジェットとの相性
・考えられる要因その4：投稿記事との相性
・考えられる要因その5：WordPressやプラグインのバージョン
・考えられる要因その6：レンタルサーバ側の問題（PHPのバージョンやデータベースなども含む）
今回の不具合はレイアウト崩れですが、そうした問題の要因となっている上位は、テーマや他のプラグイン、ウィジェットなどが影響していることが多いと思います。投稿した記事との相性は、この場合はあまり考える必要はなさそうです。WordPressやプラグインのバージョンが古かったり、あるいはアップデートしたことで問題が発生してしまったりする場合もあります。
ちなみに、古いバージョンのプラグインは、WordPressの公式サイトから入手が可能です。WordPressの公式サイトでプラグインを検索し、左側のバージョンなどが記載されているところにある「詳細を表示」を選びます。ページを一番したまでスクロールすると、過去のバージョンをダウンロードすることが可能です。最新バージョンで不具合が起きた場合は、古いバージョンのプラグインをダウンロードしてみてチェックしてみるのもひとつの手です。
▲「開発バージョン」のタブを押すと、各バージョンが選べるようになっていました。
土台となるレンタルサーバ側の問題が影響することも考えられます。たとえばPHPのバージョンが古すぎて、プラグインが動かないということもあります。筆者はhetemlというレンタルサーバを利用していますが、サーバ側の機能として「WAF」と呼ばれるファイアウォール機能が用意されており、たとえば不審な動きをするプラグインなどがブロックされることがあります。設定で解除は可能ですが、こうしたものもプラグインの動作に影響することがあります。
▲レンタルサーバのhetemlでは、WAFというファイアウォール機能があり、外部からの攻撃だけではなくプラグインなどの動作もブロックされてしまうことがあります。自分が利用しているサーバがどうなっているかも、1度チェックしておきましょう。
本番サイトと同じ条件のテスト環境を用意
問題の切り分けをするときに、本番サイトに影響を与えないように、同じテーマやプラグイン、ウィジェットの設定などを合わせたテスト環境を用意しておくのが便利です。このテスト環境で、テーマを別のものに変更してみたり、あるいはプラグインをひとつひとつ停止していったりしながら、なにが影響を与えているのかを調べます。
今回は、ウィジェットでGoogle AdSenseの設定をしていたのが影響しており、このウィジェットを消したところ問題なく「Elementor」のエディターが表示されるようになりました。また、広告ユニットをレスポンシブのものから固定画像のものに切り替えても問題を解消することができました。
▲今回はたまたまウィジェットが原因でしたが、必ずしもそれは他のプラグインの不具合でも当てはまるわけではありません。
まとめ：レイアウトに影響を及ぼすプラグインの利用は計画的に
まとめとして、繰り返しになりますがWordPressで不具合が起きたときは、何よりも問題の切り分けが重要です。原因さえわかってしまえばある程度対処することが可能です。
しかし、「Elementor」のようなレイアウトや記事そのものに影響を及ぼすプラグインを使用するときは注意が必要です。今回もある日突然プラグインの不具合が起こり、記事の修正すら出来ないという事態が発生している人もいました。
別のプラグインの話しですが、筆者は以前WordPressにWikiが追加できるプラグインを使用していたのですが、こちらも突然使用できなくなってしまい、仕方なく新たに記事を投稿し直したことがあります。
レイアウトを自由に変更できたり、独自の記事が追加できたりするタイプのプラグインは、便利ではありますがプラグインのサポートが終わり更新されなくなったり、WordPressのバージョンアップで突然使えなくなるなど、長期的な視点で考えると危険性もはらんでいます。何が起きてもある程度対処が出来るように備えて、計画的に利用することをオススメします。
