HTMLタグ自動補正

現象

WordPressを使用していて戸惑う現象の一つとして、本文入力用のエディタ（TinyMCE）（Classic Editor）でビジュアル・テキスト切り替え時や最終的な出力でHTMLタグが勝手に除去されたり追加されたり、というものがあります。


これはWordPressがxhtml transitionalという文書型に適合させようとしている自動補正機能のためです。正しい構文にしてくれるありがたい機能です。

ところが、HTMLでレイアウトしたい場合は、かなり邪魔な機能になってしまいます。

HTMLベースでの作業を円滑にするため、挙動と対策について整理します。

挙動

エディタ内と最終的に出力されるHTMLタグは、以下のように変遷します。

1. テキスト側で入力
   あいうえお<br /> かきくけこ

   1 2	あいうえお<br /> かきくけこ

2. ビジュアル側で表示
   あいうえお かきくけこ

   1 2	あいうえお かきくけこ

3. テキスト側で表示
   あいうえお かきくけこ

   1 2	あいうえお かきくけこ

4. 最終的な出力（ブラウザでのレンダリング後、ソースを表示）
   <p>あいうえお</p> <p>かきくけこ</p>

   1 2	<p>あいうえお</p> <p>かきくけこ</p>

エディタ上では<br />タグを除去し、HTML出力時には<p>タグを追加しているのです。

さらには、

• コメントタグが削除される
• リンクタグが書き換わる
• まとめると
  引用符・アポストロフィ・ダッシュ・省略記号・商標記号・乗算記号が最適な形に自動変換されます。

などの現象が起こります。

編集途中放棄

「ビジュアル」↔「テキスト」を切り替えてしまった場合には、編集途中放棄すれば前回の状態を確保できます。
編集途中放棄とはその編集画面を強制的終了させることです。ブラウザのタブの「×」クリックするだけです。
改めて編集する場合は最終的に切り替えたモードで起動しますので、元のモードに戻してからブラウザタブ「×」をクリックしてください。

最終出力時の自動補正機能を止める

functions.phpに下のコードを記述します。
もっとも、実際的には

• 固定ページはHTMLタグ多用でレイアウトしているので機能停止したい。
• あるカテゴリーはユーザーさんが入力するので機能を生かしたい。

というように、記事個別やカテゴリーなどで、個別に適用させたいケースも考えられます。
その場合は条件分岐タグで判定しますが、条件分岐タグはfunctions.phpでは動作しないのでheader.phpの先頭に記述します。 ただし、条件分岐タグの適用が上記のままだと、例えば、アーカイブページでも個別ページと同じ表示をさせたい、とういうケースではうまくいかないことがありますので、きめ細かな対応が必要になることがあります。

TinyMCEの自動補正機能を止める

プラグインを利用して止める方法が紹介されております。
ところがこれが思うような動作をしてくれません。

結局はビジュアル⇔テキストの切り替えをやめ、どちらか一方を専ら使用するという、運用上の注意で対応するしかありません。

テキストだけを使用したい場合は「ユーザー」→「ユーザー一覧」→「編集」→「ビジュアルリッチエディター」→「ビジュアルリッチエディターを使用しない」チェックオンでテキストだけの利用可能となります。

併用する場合は、前回使用したタブが有効となります。
必ずテキストで開きたい場合は、functions.phpに以下を記述します。

まとめ

1. 編集途中放棄。
2. 最終出力時の自動補正機能を止める。
3. TinyMCEで使用するモードを統一する。