WordPressのwpautopとクラシックエディターで起きた表示崩れの原因と解決策

はじめに

クラシックエディター環境において、記事のレイアウトが崩れてしまうというトラブルの相談がありました。

「brBrbr」のような連続改行ができるようにしてほしい

今まで、別のテーマで「brBrbr」というプラグインを使って連続改行（2～3行連続の改行）をしていたんですが、 Cocoonで「brBrbr」を使うと、サイトの表示が崩れてしまいます（Firefox） ですから、Cocoonの設定で、「br...

wp-cocoon.com

WordPressで記事を書く際、テキストの間にdivタグなどのブロック要素を挿入することはよくあります。

しかし、入力方法や自動整形機能の組み合わせによっては、予期せぬHTML構造が生成され、意図しないレイアウト崩れを引き起こしてしまいます。

そこで本記事では、フォーラムで挙がっていたこのトラブルを例に、「なぜこのような現象が起きてしまったのか」という技術的な背景や原因を整理し直し、解決策とあわせてわかりやすくまとめました。

具体的には、WordPressの標準機能であるwpautopの仕組みを踏まえたうえで、プラグイン「brBrbr」による強制的な<p>タグの付与がどう影響したのか、そしてなぜFirefoxで表示崩れが発生したのかを紐解いていきます。

WordPressの自動整形機能「wpautop」の役割

WordPressには、本文出力時に自動で段落や改行を補正する標準機能wpautop（WordPress Automatic Paragraphs） が備わっています。

ユーザーがいちいち<p>や<br />などのHTMLタグを打たなくても、キーボードの改行操作だけで読みやすいHTML構造を自動生成してくれる重要な役割を持っています。

具体的には、次のような高度な整形・クリーンアップ処理を行います。

• 空行（改行が2回続く場所）の段落化
  改行が連続する部分を「段落の区切り」とみなし、自動的に</p><p>タグを挿入して文章の塊を整えます。

• 通常の改行の変換
  段落内の単なる1行ごとの改行を <br /> タグに変換します。

• ブロック要素周辺の不要な <br /> の削除
  HTMLの仕様上、<div>や<ul>などのブロック要素の上下に不要な改行タグが入り込んでレイアウトが崩れないよう、周辺の余分な <br />や空行を綺麗に削除・整理します。

トラブルの原因：プラグイン「brBrbr」による強制的なpタグ付与

今回の問題を引き起こしていた直接の原因は、プラグイン「brBrbr」 を使用していたことです。

このプラグインは、WordPress標準のwpautopを無効化したうえで、次のような独自の置換処理を行っていました。

• すべての改行コードを<br />に変換する
• 本文の全体を無条件で<p>タグで囲む

不正なHTML構造の生成

このプラグインの処理を通すと、テキストの間にdivタグなどのブロック要素が含まれていた場合でも、容赦なくコンテンツ全体がひとつの大きな <p>タグで囲まれてしまいます。

その結果、ページのHTMLソースは次のように出力されます。

<p>
  こんにちは<br />
  1<br />
  <div class="information-box">ボックス</div>
  1<br />
  2<br />
  3<br />
  さようなら
</p>

何が問題なのか？（HTML仕様違反）

出力されたソースを見ると、<p>（段落）タグの中に、ブロック要素である<div>タグが丸ごと入り込んでいます。
HTML仕様において、<p>タグの中にブロック要素を含めることは厳に禁止されている「不正な入れ子構造（仕様違反）」です。

なぜFirefoxで表示崩れが起きてしまったのか？

HTMLとして不正な構造を読み込んだとき、ブラウザはクラッシュする代わりに、独自のアルゴリズムで勝手に正しい形へ直しようとするエラー訂正（パース）機能が働きます。

Firefoxの環境では、不正な<p>タグの内部構造やエラー修復の影響もあり、以下のスタイルが適用されることで、1つの改行に対してまるで2つ改行されたかのように大きく余白が空いて見えるという表示崩れが発生していました（図2参照）。

.entry-content > * {
  margin-bottom: 1.8em;
}

このように、HTMLの仕様違反が原因となり、ブラウザのエラー修復やスタイルの適用に影響が出てしまいました。

解決策：プラグイン「Advanced Editor Tools」で正しいHTML構造を保持・保存する

この問題を根本から解決するためには、無理やりラッパータグを変更するのではなく、「エディター側できれいなHTML構造を作って入力・保存する」アプローチをとります。

プラグイン 「Advanced Editor Tools」 を導入し、設定画面で 「クラシックブロックとクラシックエディター内のパラグラフタグを保持」 を有効にします。

これにより、意図しない自動的なタグの削除や変形を防ぎ、意図した通りのHTMLタグがしっかりと付与された状態でデータベースに保存されるようになります。
結果として、次のように正しくタグ分けされたクリーンな構造が維持されます。

<p>
  こんにちは<br />
  1
</p>
<div class="information-box">ボックス</div>
<p>
  1<br />
  2<br />
  3<br />
  さようなら
</p>

【根本解決】Gutenbergエディターへの移行によるクラシックエディターからの脱却

現在WordPressの標準となっているGutenbergエディターへ移行すれば、この問題はエディターの構造上、自然と防止されます。
特にCocoonなどのテーマを利用する上では、豊富な独自ブロックが用意されています。
WordPress標準機能とあわせて、現在ではほとんどの表現やレイアウトがブロックだけで実現可能です。

Gutenbergでは、テキストや装飾要素をそれぞれ独立した「ブロック」単位で管理します。

• テキスト部分: 「段落（パラグラフ）ブロック」（<p> タグ）
• 独自の装飾やHTML: 「カスタムHTMLブロック」や「グループブロック」（<div> タグ）

テキストとdiv要素を別のブロックとして作成することで、生成されるHTMLは自動的に以下のように分離されます。

<!-- 段落ブロック -->
<p>こんにちは<br />1</p>

<!-- カスタムHTMLブロック -->
<div class="information-box">ボックス</div>

<!-- 段落ブロック -->
<p>1<br />2<br />3<br />さようなら</p>