これまでに何度かWordPress関連のトラブルシューティングについて紹介してきました。私は7年以上にわたってWordPressを使用し、サイト作成を続けていますが、最近では経験を積んだおかげで、さまざまなトラブルにも対応できるようになりました。そして、しばしば友人からWordPressのトラブルに関する相談を受けることもあります。
しかし、今回は一つのトラブルに対処するのに約3時間もかかってしまいました。
サイドバーにおけるループ投稿のカラム落ち問題
私が担当しているWordPressのサイトで、ブログページのカテゴリーページのデザインがカラム落ちして崩れるという問題が発生しました。このサイトは右サイドバーを含む2カラム構造になっています。メインの部分にはループ投稿の一覧があり、左サイドバーには最近の投稿や人気記事などの投稿ループが設置されています。
当初、HTMLの閉じタグのミスが原因ではないかと疑いましたが、HTMLを調べても特に問題は見当たりませんでした。さらに、PHPやCSSは過去半年間一切変更していないため、これらの要素が原因である可能性は低いと考えられました。原因が全くわからなかったため、問題がプラグインにあるのではないかとも考え、一度すべてのプラグインを停止してみましたが、カラム落ちは解消されませんでした。
次に、コンソールを使用してカラム落ちの原因を調査しました。すると、なぜか投稿ループが <li> タグで囲まれているにも関わらず、 <ul> タグから飛び出して別の場所にループしていることが判明しました。「これは何だろう？」と困惑しました。投稿のPHPコードが原因ではないかと疑い、while ループを再確認しました。ChatGPTにも問題の箇所がないか確認してもらいましたが、特に問題はないとの回答でした。「一体何が原因なのだろう？」と疑問に思いました。
ChatGPTでも解決できない問題
これ以上の時間を費やすのは無駄だと考え、最近バージョンアップしたChatGPTに、なぜカラム落ちが発生するのか尋ねてみることにしました。URLを貼り付けて質問したのですが、ChatGPTも特に問題はないとの回答を返しました。ChatGPTは非常に便利で、私はJavaScriptのバックエンド開発などで頻繁に利用しています。通常、プログラミングに関連する多くの問題はChatGPTに質問することで解決できます。しかし、今回に限っては、ChatGPTからも望む回答を得ることができませんでした。
さらに詳しく調べた結果、不適切なBRタグが原因であることが判明
さらに詳しく調査を進めたところ、サイドバーの投稿ループのタイトル部分に不適切に挿入されたBRタグが原因で崩れていることがわかりました。私は最初、困惑しました。自分の意図とは無関係にBRタグが挿入されているのです。最初はPHPファイルの不要な空白が原因でBRタグが勝手に挿入されているのではないかと考え、タグの間隔を詰めてみましたが、BRタグは消えませんでした。
次に、JavaScriptが自動的にBRタグを挿入しているのではないかと疑いました。しかし、そのようなスクリプトを作成した記憶はありませんでした。念のため、自分が作成したJavaScriptのソースコードを再確認しましたが、そのような記述は見当たりませんでした。
解決の糸口を見つける：ひらめき
完全に手詰まりの状態でしたが、リラックスしてコーヒーを飲んでいると、ふとひらめきが訪れました。そういえば、WordPressの投稿タイトルにタグを挿入することが可能であることを思い出しました。もしかすると、ここにBRタグが挿入されているのかもしれません。
早速、投稿ページを一つずつ開いてみたところ、タイトルにBR改行タグが挿入された記事を発見しました。試しにそのBRタグを削除してみると、カラム落ちが修正されました
テキストテキストテキスト
<br class=”d-block”>
20文字の制限のため、BRタグの途中までしか表示されず、結果として以下のような閉じタグがない状態になっていました：
テキストテキストテキスト
<br class=”d-bloc
そのため、サイドバーが崩れるという事態になりました。
以下の文章を校正しました。校正後の文章は以下の通りです。
WordPress投稿タイトルにBRタグを挿入する際の注意点
投稿ページのタイトルが長くなると、読みやすくするためにどうしても改行したくなります。その際、BRタグなどを使ってしまいがちです。これはWordPressの長所であると同時に短所でもあります。通常のCMSでは、入力フォームにHTMLを入力しても、タグがエスケープされてそのまま表示されることが多いですが、WordPressの投稿タイトル入力部分はHTMLタグをそのままHTMLとして解釈し、表示します。つまり、タイトルに改行を入れたり、CSSを利用して飾り付けや文字の大きさを変更することも可能です。これは非常にカスタマイズしやすい点です。
しかし、これが問題を引き起こすこともあります。というのも、投稿タイトルは投稿ページだけでなく、サイドバー、カテゴリーページなど様々なページに反映されます。これらのさまざまな箇所で横幅のサイズが異なるため、BRタグを入れると意図しない改行が発生する可能性があります。また、今回のように非常に珍しいトラブルですが、文字数の制限があるためにレイアウトが崩れることもあります。
