[WordPress]エンティティコード〜テキストエディタでhtmlタグを文字列として表示

意図しない表示になるのはなぜ

前の記事「[WordPress]テキストエデイタのフォントサイズを大きくした」を執筆している際、以下のコードをfunctions.phpに追記すると書きました。

// テキストエディタのフォントサイズを変更
function change_editor_font(){
echo'<style type=”text/css”>
textarea#content.wp-editor-area {
font-family: monospace;
font-size:16px;
}
</style>’;
}
add_action(‘admin_head’, ‘change_editor_font’);

これをテキストエディタにコピペしてプレビュー画面を見ると下のように表示されました。

// テキストエディタのフォントサイズを変更
function change_editor_font(){
echo’

‘;
}
add_action(‘admin_head’, ‘change_editor_font’);

意図しない表示になるのはなぜ？

これは「<style type=”text/css”>」と「</style>」がhtmlタグだと解釈されたため間にあった

textarea#content.wp-editor-area {
font-family: monospace;
font-size:16px;
}

の部分が表示されないということでした。

考えてみれば当たり前のことで例えば

<p>こんにちは</p>

とテキストエディタに打ち込んでも<p>や</p>は表示されないことと同じでごくごく当たり前のことでしょう。

<p>こんにちは</p>とhtmlタグを表示させるためにはどうする

「<」は「&lt;」、「>」は「&gt;」に置きかえてテキストエディタに書くことでタグとしてではなく文字列として表示させることができます。

タグを構成する特殊文字を別の文字に置き換え、タグとして扱われないようにすることを「実体参照」「エンティティコード」などというそうです。

「<」とか「>」のほかに「&」も覚えておいた方がいいかもしれません。

「&lt;」とそのままテキストエディタに打ち込むと、実際の表示は「<」になっていまいます。「&」は「&amp;」に変えることで「&lt;」と表示させることができます。

なんか、禅問答のような感じですね？

覚えておいた方がいい（？）エンティティコード