WordPressでHTMLのタグや特殊文字を文章として書く2つの方法

まずは正攻法であるエンティティ化について解説します。

「HTMLエディター」の画面で「<hr />」と入力します。
するとHTMLでは「<hr />」は水平線を表すタグなので、実際の記事では水平線が表示されます。

文章としてタグを表示させたい場合、文字を「エンティティ化」する必要があります。
「エンティティ化」とはタグなどの「特別な意味を持つ文字」を、「プレーンテキスト（文章）」として表示するために「エスケープ」することです。
なんだか難しそうに聞こえるかもしれませんが、実際の作業は単純ですので安心して下さい。

（以前の記事で「正規表現でURLを表示する」には「oxynotes.com」を「oxynotes¥.com」と表示すると書きました。正規表現におけるエスケープを表す文字が「¥」でした。）

同じようにHTMLやXMLでもタグを表示するにはエスケープする必要があります。
HTMLでエスケープするには「&コード番号;」という書式を使います。

こうした文字をエスケープすることを「HTMLエンティティ化する」と言います。

記述方法

以下のように「HTMLエディタ」で記述することで、HTMLのタグを表示することができます。
（左がエンティティ化した文字、右がそれぞれの言語で特殊な意味を持つ文字です）

よく使うと思われるエンティティ参照

せっかく難解な専門用語を理解していただきましたが、実はエンティティ化をせずにタグを表示させる方法があります

面倒なエンティティ化をせずにタグを表示することが出来るプラグイン「SyntaxHighlighter」を使う方法です。
ソースコードを記述することが多いプログラマや技術系サイトで大人気のプラグインです。

このプラグインでは[php]コード[/php]と囲むことでタグなど特殊な意味を持つ文字を文章として表示させることができます。
作業時間はこちらのほうが短時間で済むうえに、コードを色分けしてくれるので訪問者の利便性も向上します。

詳しい「導入方法」「記述方法」は以前記事にしたので興味のある方は参照してみてください。

と、ここで問題が発生します。

「SyntaxHighlighter」は[php]コード[/php]で囲むことで色付けして表示する書式になっていると説明しました。
つまり「SyntaxHighlighter」をインストールした状態では「[ ]」という文字が特殊な意味を持ちます。文章で「[php]」と入力するにはこの文字をエンティティ化する必要があります。

そのために使うのが「[」を「&#091;」に、「]」を「&#093;」へと、それぞれ置き換える方法です。
「SyntaxHighlighterの解説がしたいけど、書式が上手く書けない」という方は上記のように書いてみてください。

早口言葉のようになりますが、htmlのタグをエンティティ化すること無く色付け表示してくれる「SyntaxHighlighter」の書式について解説するために「[ ]」をエンティティ化する。
という、便利になったんだか余計大変になったんだかわからない対応が必要になります。
（SyntaxHighlighterの解説を普通の人はしないので、あまり活用する機会はないと思いますがｗ）

最後にもう一つ注意点があります。

WordPressの「ビジュアルエディタ」でエンティティ化が必要な文字「>」などを入力すると自動で「&lt;」へと変換してくれる機能があります。この機能が悪さをして「&#091;php&#093;」を自動で「[php]」に変換してしまいます。
せっかくエンティティ化してもタグに戻ってしまうので「ビジュアルエディタ」と「htmlエディタ」間を移動する際には注意して下さい。