HTMLやPHPのタグをWordPressで表示する方法


投稿日:2011年12月20日
  • 2
  • 0


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

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

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

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

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

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

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


記述方法

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

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

HTML
&nbsp; ( )ノーブレークスペース
&lt; <
&gt; >
&amp; &
&quot;
XML
&amp; &
&lt; <
&gt; >
&quot;
&apos;

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

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

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

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


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

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

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

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


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

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


現在のページを共有する



現在のページに関連する記事

WordPressにSyntaxHighlighterを導入しよう WordPressにSyntaxHighlighterを導入しよう
HTMLやPHPのタグをWordPressで表示する方法 SyntaxHighlighterでConsolasを使うと日本語が文字化けする際の対処法
WordPressの整形済みテキストがはみ出す WordPressの整形済みテキストがはみ出す
WordPress3.3アップデートと変更点 WordPress3.3アップデートと変更点
SyntaxHighlighterの記述方法 SyntaxHighlighterの記述方法
HTMLやPHPのタグをWordPressで表示する方法 WordPressプラグインを公式プラグインディレクトリへ追加する方法
HTMLやPHPのタグをWordPressで表示する方法 URLを正規化して、Googleにページの重要度を伝える方法

おすすめの記事

Apacheのmod_expiresでファイルタイプごとにキャッシュをコントロールする方法

Apacheのmod_expiresでファイルタイプごとにキャッシュをコント…

Windows 10でpsd形式のファイルをサムネイル表示する方法

Windows 10でpsd形式のファイルをサムネイル表示する方法

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表示する方法

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表…

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設定をしよう

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設…

WordPressの新・旧ループからカスタムクエリ・アーカイブまで徹底解説

WordPressの新・旧ループからカスタムクエリ・アーカイブまで徹…

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

GMO VPSを契約してWordPressを安定動作させるまでのサーバ設定方法

GMO VPSを契約してWordPressを安定動作させるまでのサーバ設定…

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設


いただいたコメントなど

  1. ピンバック:  を表示させる方法 | プログラ民

コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。