WordPressでビジュアルからテキストに切り替えると表示が崩れる問題

WordPressで投稿ページや固定ページを編集しているとき、「ビジュアルモードでは問題なかったのに、テキストモードに切り替えたらレイアウトが崩れた」という経験をしたことはありませんか？

これは、WordPressの便利なようで厄介な機能、「自動整形（wpautop）」が原因です。＜p＞や＜br＞といった改行タグを、エディターが勝手に追加・削除するこの機能は、初心者には親切でも、HTMLやCSSを理解してレイアウトを調整したい制作者にとっては“ありがた迷惑”な存在です。

特に、クライアントが自分で編集することがある場合、せっかく作り込んだデザインが一瞬で崩れることも。ビジュアルモードとテキストモードを切り替えるだけで意図しない改変が加わるのは、大きなリスクです。

そこでこの記事では、WordPressの「自動整形」によって発生するレイアウト崩れの対策として「Advanced Editor Tools（旧TinyMCE Advanced）」を使った確実な方法を解説します。

WordPressの自動整形とは何か？

WordPressは、投稿や固定ページのコンテンツに対して自動的にHTMLタグ（特に＜p＞や＜br＞）を挿入したり削除したりします。これは、エディターの利便性向上のために導入されている「wpautop」関数によるものです。

たとえば、次のような入力をした場合

段落1
段落2

これが勝手に以下のように変換されることがあります。

<p>段落1</p>
<p>段落2</p>

さらに厄介なのは、テキストモードで整えたタグ構成が、ビジュアルモードに戻った瞬間に崩れる点です。特に＜p＞タグ内に画像やカスタムHTMLを含めていると、予期せぬ崩れ方をすることがあります。

Advanced Editor Toolsでタグ崩壊を防ぐ

対応方法は意外とシンプルでWordPressのプラグイン「Advanced Editor Tools (旧名 TinyMCE Advanced)」を使えば解決します。

LINK：Advanced Editor Tools (previously TinyMCE Advanced) ｜WordPress プラグイン

Advanced Editor Toolsはブログ投稿の文字の大きさ、色、背景などを拡張できるプラグイン。人気プラグインなので使ったことがある人も多いと思います。

ただしインストールするだけではダメで、一か所設定を変える必要があります。

旧エディタ（Classic Editor）を使っている場合は「設定」→「Advanced Editor Tools」→「旧エディター (TinyMCE)タブ」の上級者向け設定にある「クラシックブロックとクラシックエディター内のパラグラフタグを保持」にチェックを入れます。

クラシックブロックとクラシックエディター内のパラグラフタグを保持

クラッシックエディターで＜p＞と＜br＞タグが除去されるのを停止し、テキストタブにこれらのタグを表示します。 テキストエディターの自動補完を停止し、より高度なコーディングが可能です。 しかし、まれに予想できない振る舞いをするため、常用前に充分テストを行ってください。 テキストエディター内での改行は出力に含まれます。このため空の行や HTML タグ内の改行、複数の＜br＞タグは使用しないでください。

これで基本的に崩れることはなくなりますが、機能説明にあるようにまれに予期せぬ動作をすることがあるので、テスト環境でしっかり確認してから使用しましょう。