HTMLタグ自動補正

現象

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


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

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

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

挙動

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

1. テキスト側で入力

   あいうえお
   
   かきくけこ
   

2. ビジュアル側で表示

   あいうえお
   かきくけこ
   

3. テキスト側で表示

   あいうえお
   かきくけこ
   

4. 最終的な出力（ブラウザでのレンダリング後、ソースを表示）

   あいうえお
   かきくけこ
   

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

さらには、

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

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

編集途中放棄

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

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

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

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

というように、記事個別やカテゴリーなどで、個別に適用させたいケースも考えられます。
その場合は条件分岐タグで判定しますが、条件分岐タグはfunctions.phpでは動作しないのでheader.phpの先頭に記述します。

if(is_page(array(5,8,10,20)) || in_category(array(14,17,30))){  // 適用したいページやカテゴリーを指定
    // 自動補正機能を制御
    // 記号の自動変換機能を停止
    remove_filter('the_title', 'wptexturize');		// タイトル
    remove_filter('the_excerpt', 'wptexturize');	// 抜粋
    remove_filter('the_content', 'wptexturize');	// 本文
    remove_filter('comment_text', 'wptexturize');	// コメント
    // 段落の自動整形機能を停止
    remove_filter('the_excerpt', 'wpautop');		// 抜粋
    remove_filter('the_content', 'wpautop');		// 本文
    remove_filter('comment_text', 'wpautop');		// コメント
}

ただし、条件分岐タグの適用が上記のままだと、例えば、アーカイブページでも個別ページと同じ表示をさせたい、とういうケースではうまくいかないことがありますので、きめ細かな対応が必要になることがあります。

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

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

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

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

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

// デフォルトをテキストエディタにする
add_filter('wp_default_editor', create_function('', 'return "html";'));

まとめ

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