WordPressにHTMLやPHPのタグを表示させる方法！

今回は特殊文字のエンティティ化について書こう。

特殊文字のエンティティ化とは、WordpressでHTMLやPHPのタグ文字を表示させる方法だ。

規則が決まっているので1度覚えてしまえば何も問題ない。

WordPressの記事の中でプログラムのコードを書く必要がある人に届けばよろし。

WordPressにHTMLやPHPタグを表示させる

WordPressでHTMLやPHPコードを記述したことがある人ならぶつかる問題。

それは特殊文字の表示である。

特定の文字列は表示されない。

例えばこの文字「<」や「&」は普通にキーボードから入力しただけでは正しく表示されない。

それどころかその後の文書に影響がでるほど厄介な記号なのだ。

ではこれらの記号を正しく表示させるにはどうすればいいのか？

手法は2つある。

• プラグインで対応
• タグのエンティティ化

このうち、わたしはタグのエンティティ化で対応している。

どちらが好みかはあなたに任せるが、ここでは2つの手法を書いておこう。

プラグインで表示対応する

まずは簡単な方法から。

それはプラグインで表示対応する。

プラグイン対応は誰でもわかる簡単な方法である。

このプラグインを使えば対応可能だ。

WP SyntaxHighlighter

それじゃ「WP SyntaxHighlighter」の使い方も書いておこう。

誰でもわかるプラグインと言いながら便利なツールなのは間違えない。

使い方は簡単だ。

テキストエディタで記事を編集し、以下のように宣言してあげれば良い。

これだけ。

そして対応する言語はこんなにあった。

• actionscript3
• bash
• clojure
• coldfusion
• cpp
• csharp
• css
• delphi
• erlang
• fsharp
• diff
• groovy
• html
• javascript
• java
• javafx
• matlab (keywords only)
• objc
• perl
• php
• text
• powershell
• python
• r
• ruby
• scala
• sql
• vb
• xml

確認したら29の言語に対応していた。

さらにこんな書き方もできる。

この場合、言語はPythonで、見出しの表現を「タイトル」として、11行目をハイライトさせて表示させる。

「WP SyntaxHighlighter」を使うメリットは記事の大半がコードで埋め尽くされる場合に有効だ。

デメリットはプラグインなのでメンテナンスや負荷を考えると重要度が低いなら入れない方が良い。

サーバーには優しくしてあげた方が良い。

飼い犬に優しくしてあげなければいつか手を噛まれることになるからな。

HTMLをエンティティ化する

次にわたしが行ったタグのエンティティ化で表現したやり方だ。

この手法はWordpressの規則に乗っ取って記述するというものだ。

例えば今回のような「<」の場合。

見た目は「<」だが、実は「& l t ;」で構成されている。

このような文字列の表示方法をHTMLのエンティティ化という。

このエンティティ化とはタグなど「特別な意味を持つ文字」を文書として表現させることだ。

つまりエンティティ化とは、ガンダムの世界でこういうことだ。

偉い人には分からんと言った無名のエンジニアが放った名言だ。

要は難しく考える必要がないということだな。

このエンティティ化にもいくつかパターンがあるので載せておこう。

• ノーブレークスペース → & n b s p ;
• < → & l t ;
• > → & g t ;
• & → & a m p ;
• ” → & q u o t ;
• @ → & # 6 4 ;

※そのまま記述すると文字がエンティティ化されるのでわざとスペースを入れている。

これでエンティティ化は終わった。

と、思うかもしれないが、注意点もある。

特殊文字を使用するときの注意点

エンティティ化で対応できる特殊文字だが、注意点がいくつかある。

まずプラグイン「WP SyntaxHighlighter」を使った場合。

一見、インストールさえしてしまえばエンティティ化に関して百戦錬磨なプラグインに思える。

だが、欠点もあるのだ。

それが「[」や「]」を使用する時だ。

なぜなら「WP SyntaxHighlighter」が特殊文字を定義するときに「[」と「]」を使用するからだ。

つまり単体で「[」と「]」を使用することが逆に困難になる。

つまり「WP SyntaxHighlighter」を使用する配下である場合でも手動のエンティティ化が必要になる。

• [ → & # 9 1 ;
• ] → & # 9 3 ;

※そのまま記述すると文字がエンティティ化されるのでわざとスペースを入れている。

でそれぞれ対応されたし。

特殊文字をエンティティ化して表現する際に注意する点がもう一つある。

それがWordpressのエディタだ。

WordPressには「ビジュアルエディタ」と「テキストエディタ」がある。

わたしは「テキストエディタ」を中心に使用しているのだが、中には両方を使用している人もいるだろう。

その場合は、注意が必要になる。

なぜなら、勝手に変わるからだ。

そう、Wordpressが勝手な判断をして特殊文字にしてしまったりするのだ。

これが厄介。

だからエディタはお気に入りの方だけにしよう。

浮気はよくないぞ。

今日も良い1日を。