「ビジュアルモードでは問題なかったのに、テキストモードに切り替えたらレイアウトが崩れた」。WordPressで投稿や固定ページを編集していて、こんな経験をしたことはないでしょうか。私も制作の現場で、何度もこれに頭を抱えてきました。
犯人は、WordPressの便利なようで厄介な機能「自動整形（wpautop）」です。＜p＞や＜br＞といった改行タグを、エディターが勝手に足したり消したりするこの機能は、文章だけを書く人には親切でも、HTMLやCSSでレイアウトを組みたい制作者にとっては“ありがた迷惑”になりがちです。
ひとつ前置きをしておくと、いまのWordPressは初期状態だとブロックエディター（Gutenberg）が標準になっています。ブロックエディターは各ブロックを構造化されたデータとして保持するため、この「切り替えると崩れる」現象は以前ほど起きません。今回の話が刺さるのは、主にClassic Editorプラグインや「クラシック」ブロックを使って、旧来の編集画面で書いているケースです。
とはいえ旧エディターが過去のものかというと、そうでもありません。Classic Editorは公式プラグインとして900万サイト超で使われており、「2024年まで、あるいは必要とされる限り」サポートすると告知されたまま、いまも更新が続いています。まだ現役で頼れる存在です。
この自動整形が厄介なのは、クライアントが自分で編集する運用のとき。せっかく作り込んだデザインが、ビジュアルとテキストを一度切り替えただけで意図せず崩れることがあります。そこでこの記事では、崩れの原因と、「Advanced Editor Tools（旧TinyMCE Advanced）」を使った確実な対策をまとめます。
WordPressの自動整形とは何か？
WordPressは、投稿や固定ページのコンテンツに対して、自動的にHTMLタグ（特に＜p＞や＜br＞）を挿入したり削除したりします。これは、エディターの利便性向上のために組み込まれている「wpautop」という関数の働きによるものです。
たとえば、次のような入力をした場合。
段落1
段落2これが、勝手に以下のように変換されることがあります。
<p>段落1</p>
<p>段落2</p>さらに厄介なのは、テキストモードで整えたタグ構成が、ビジュアルモードに戻った瞬間に組み替えられてしまう点です。特に＜p＞タグの中に画像やカスタムHTMLを入れていると、予期せぬ崩れ方をすることがあります。改行の意図が消えたり、逆に空の＜p＞が増えて余白がずれたり、という具合です。
Advanced Editor Toolsでタグ崩壊を防ぐ
対策は意外とシンプルで、WordPressのプラグイン「Advanced Editor Tools（旧名 TinyMCE Advanced）」を使えば解決します。
Advanced Editor Tools (previously TinyMCE Advanced)｜WordPress プラグイン
Advanced Editor Toolsは、投稿の文字サイズや色、背景などの編集機能を拡張してくれるプラグインです。100万サイト以上で使われている定番なので、触ったことがある人も多いと思います。
ただ、インストールするだけではダメで、一か所だけ設定を変える必要があります。
旧エディター（Classic Editor）を使っている場合は、「設定」→「Advanced Editor Tools」→「旧エディター (TinyMCE)」タブを開き、上級者向け設定にある「クラシックブロックとクラシックエディター内のパラグラフタグを保持」にチェックを入れます。
クラシックブロックとクラシックエディター内のパラグラフタグを保持
クラシックエディターで＜p＞と＜br＞タグが除去されるのを停止し、テキストタブにこれらのタグを表示します。 テキストエディターの自動補完を停止し、より高度なコーディングが可能です。 しかし、まれに予想できない振る舞いをするため、常用前に充分テストを行ってください。 テキストエディター内での改行は出力に含まれます。このため空の行やHTMLタグ内の改行、複数の＜br＞タグは使用しないでください。
これで基本的に崩れることはなくなります。ただし説明文にもあるとおり、まれに予期せぬ動作をすることがあるので、テスト環境でしっかり確認してから本番に反映するのが安全です。
プラグインを増やしたくないときの代替策
プラグインを増やしたくない、あるいはピンポイントで自動整形だけを止めたい場合は、テーマの functions.php に処理を書いて wpautop を無効化する方法もあります。ビジュアルエディター側の整形を切るなら、TinyMCE の初期化設定で wpautop と force_p_newlines を false にする、といった書き換えです。
この方法は自由度が高い反面、書き間違えるとサイト全体に影響します。触るなら子テーマで、必ずバックアップを取ってから作業してください。ちなみに、ブロックエディターへ思い切って移行してしまえば、この切り替え問題自体とほぼ無縁になります。旧来の書き方に強いこだわりがないなら、そちらへ寄せていくのも長い目で見ればラクな選択です。
