IT坊やだからさ。

ウェブディレクター/プログララマーの現役フリーランスが送るガンダム話

ウェブ

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

投稿日:2018年7月23日 更新日:

特殊文字のエンティティ化

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

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

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

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

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

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

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

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

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

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

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

手法は2つある。

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

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

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

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

まずは簡単な方法から。

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

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

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

WP SyntaxHighlighter

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

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

使い方は簡単だ。

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

[code language=”html”]
コードを入力する(この場合はHTML)
[/code]

これだけ。

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

  • 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の言語に対応していた。

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

[code language=”python” title=”タイトル” highlight=”11″]
コードを入力する(この場合はPython)
[/code]

この場合、言語は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日を。

      

-ウェブ

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【SEO】ウェブサイトを始めるならインデックス登録は必須!

【SEO】ウェブサイトを検索エンジンにインデックス登録する理由!

ウェブサイトを作成した後に、行う作業はたくさんある。 その一つに「インデックス登録」がある。 この「インデックス登録」とはウェブサイトを検索エンジン内で「クローリング」してくれる仕組みに組み込む作業だ …

コンバージョン率の上げ方を改善

【PV至上主義は間違え】コンバージョン率の上げ方を改善!

「Google Analytics」はサイト運営者にとっては切っても切れない優秀なツールだ。 ただ優秀すぎる故に機能を使いこなせている人は多くない。 そこで「Google Analytics」の機能と …

実践から必要なSEO用語まとめ17選!アクセス分析に必須!

実践から必要なSEO用語まとめ!怒涛の用語17選!

ウェブ屋という職業は次から次へと新しい言葉に対応していかなければならない。 真新しい横文字がズラリと並ぶ。 これもITエンジニアの宿命なのだろう。 今後も更に必要な用語は増えていくだろうが、立ち止って …

【モバイルファーストインデックス】モバイル対応してる?

【モバイルファーストインデックス】モバイル対応してる?

先日Googleよりモバイルファーストインデックスに関するメールが送られてきた。 どうやらこのメールは「Search Console」を利用したウェブサイト運営者に一斉送信されたものだ。 わたしのサイ …

googleadsenseの配置は適切ですか

【Google AdSense注意点】アドセンス広告の適切な方法!

割と真面目な質問で「Google AdSense」広告の貼り付け方を聞かれたので答えてみた。 確かにサイト運営において広告の配置は非常に重要なポイントだ。 なぜなら広告はサイト閲覧者からすれば邪魔な存 …

プロフィール

逆襲のジェリド

逆襲のジェリドは史実を覆すべく、復活を遂げた。時代はプログラミングを求める!俺を戦いに駆り立てたのは貴様だ!そんなこと言えるのかよ!

現役ITエンジニアフリーランス。得意分野はphp、Java、Javascript、VB.net、VBA。仕事についてはDMで。このブログではウェブかプログラミング、ガンダムについて徒然なるままに。

詳しくはこちら→ 詳細プロフィール