HTMLタグ自動補正

WordPress Tips

現象

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

EditerTab_red

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

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

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

挙動

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

  1. テキスト側で入力
  2. ビジュアル側で表示
  3. テキスト側で表示
  4. 最終的な出力(ブラウザでのレンダリング後、ソースを表示)

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

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

編集途中放棄

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

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

functions.phpに下のコードを記述します。
もっとも、実際的には
  • 固定ページはHTMLタグ多用でレイアウトしているので機能停止したい。
  • あるカテゴリーはユーザーさんが入力するので機能を生かしたい。
というように、記事個別やカテゴリーなどで、個別に適用させたいケースも考えられます。
その場合は条件分岐タグで判定しますが、条件分岐タグはfunctions.phpでは動作しないのでheader.phpの先頭に記述します。 ただし、条件分岐タグの適用が上記のままだと、例えば、アーカイブページでも個別ページと同じ表示をさせたい、とういうケースではうまくいかないことがありますので、きめ細かな対応が必要になることがあります。

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

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

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

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

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

まとめ

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

関連記事一覧

弊社サービスご案内