WordPressの壊れ方(1)「消えるサイドバー」の謎

WordPress個別サポート

WordPressを使っていると大小を問わずトラブルが起きることもあります。

大きなトラブルが発生すると、「テーマの不具合?」「プラグインのバッティング?」「WordPressの再インストールが必要?」といった大きな原因に目を向けてしまうかもしれませんが、ほとんどの原因は単純な入力ミスです。

たとえば、数文字程度の入力を間違えるだけで画面からサイドバーが消えてしまうという「大トラブル」を演出することができます。

サイドバーが消える大トラブルも定番の原因は単純な入力ミス
サイドバーが消える大トラブルも定番の原因は単純な入力ミス

この記事では数文字程度の小さいミスによって大きなトラブルが発生する事例を2つ紹介します。

YouTubeを埋め込んだらサイドバーやフッターが消えた!

投稿や固定ページにYouTubeの動画を埋め込みたい場合、表示する動画のタグをYouTubeの「埋め込みコード」メニューからコピーします。

表示したい動画のタグをコピーする
表示したい動画のタグをコピーする

このタグを投稿や固定ページの編集画面(テキストエディタ)にペーストします。

コピーした動画のタグをテキストエディタにペースト
コピーした動画のタグをテキストエディタにペースト

これで通常は問題なく動画が表示されます。

投稿に動画が埋め込まれる
投稿に動画が埋め込まれる

これでWordPressが壊れる!

動画のiframeタグを閉じる</iframe>を削除してみましょう。

試すときは自己責任でお願いします。
iframeを閉じる</iframe>を削除してみる
iframeを閉じる</iframe>を削除してみる

投稿を更新してブラウザで見てみると、一見、問題なく動画が表示されているように見えますがサイドバーやフッターが消えてしまっています。数文字の入力ミスで立派な大トラブルが発生します。

サイドバーやフッターが消える
サイドバーやフッターが消える

原因は言うまでもなく動画のタグを閉じる「</iframe>」を取り除いてしまったことです。数文字程度のミスによって大きなトラブルが発生する仕組みがわかったでしょうか。テーマやプラグイン、WordPressの再インストールは必要ないはずです。

このようなトラブルはよくある話です。投稿にYouTubeを埋め込むときは</iframe>を削除しないようにしっかり全てのコードをコピーペーストしましょう。当たり前の話で面白くなく恐縮です…

また、YouTubeを投稿に埋め込んだらおかしなレイアウトになってしまったときは、iframeタグが閉じているか確認してください。

文章を編集したらレイアウトが崩れた!

WordPressの使い方に慣れていない方は編集画面でビジュアルエディタを使うことが多いと思いますが、ときにはテキストエディタで文章を編集することもあるでしょう。

たとえば、テキストエディタに2つのdivタグで囲まれた文章が入力されているとします。この文章を編集する場面を考えてみましょう。

divタグで囲まれた2つの文章
divタグで囲まれた2つの文章

最初の文章を削除しようとして、うっかり2つ目のdivタグの開始部分を消してしまうこともあるでしょう。長い文章であれば特にです。

最初の文章を消すのに間違って2つ目のdivも選んでしまった
最初の文章を消すのに間違って2つ目のdivも選んでしまった

このまま気づかずにDeleteキーなどを押してしまうと、消してはいけない2つ目のdivの開始タグが消えてしまいます。

2つ目の文章はdivの終了だけが残る
2つ目の文章はdivの終了だけが残る

ここで気がつけばセーフですが、「更新」ボタンをクリックしてしまうこともあるでしょう。その後、表示結果を確認して「あれっ?!」と驚くはずです。サイドバーが消えて、変な場所に表示されてしまいます。

サイドバーが消えて、おかしな場所に表示される
サイドバーが消えて、おかしな場所に表示される

トラブルの原因は修正した部分にしかない!

いきなりこの状態を見てしまうと何か大きな問題が起きているように思うかもしれません。「テーマが壊れた?」「プラグインがおかしい?」「WordPressの再インストールが必要?」など、原因とは全く関係のない大きな原因に目が向いてしまうかもしれませんが、言うまでもなく本当の原因は大きくありません。

たった数文字の入力ミスです。

WordPress個別サポートに相談に来る方の中にも大きなトラブルについて大きな原因ばかりに目を向けている方がいます。「テーマを再インストールしたけど直りません」と相談に来る方もいますが、大きな原因に目を向ける前に次の鉄則を頭に入れて下さい。

「トラブルの原因は修正した部分にしかない!」

編集画面、サイドバー(ウィジェット)、テンプレートファイルなど、これまでの作業で編集したり修正した部分に、ほとんどのトラブルの原因があります。

いきなりWordPressが暴走してレイアウトが崩れることはありません!

テーマの問題、プラグインの相性、WordPress本体の不具合という飛躍した話に原因を求める前に、これまでに行った作業を振り返ってください。

ほとんどのトラブルの原因は、その作業の中にあります。

この記事で紹介したようにHTMLタグの閉じ忘れや、開始タグの削除ミスが定番のトラブル原因です。普通の文章が暴走してレイアウトが崩れることはありませんので。

CSSやPHPでも「閉じ忘れ」は大トラブルを演出する定番の原因です。

テーマの再インストールを検討する前に、これまでに文章を入力した投稿やメンテナンスしたサイドバー、編集したテンプレートファイルをじっくり調べて下さい。おそらく「あっ、タグが閉じていない!」といった単純な原因が見つかるはずです。

とはいえ、単純な入力ミスをパッと見て見つけるのは簡単ではない場合もあります。どうしてもトラブルの原因が見つからなければ、WordPress個別サポートにご相談ください。

WordPressトラブル