エスケープ処理

WordPress

ワードプレスの記事中にブラケット[]をエスケープ処理する方法



ぺんです。

先日公開したこの記事の中で、オリジナルプラグインを呼び出すショートコード( 例: )を紹介しようと思ったのですが、そのままと記事内で書いても、ブラケット[]はWordPressサイト上で、ショートコードとして解釈されてしまうため、そのままでは記事内に表示することができません。

調べたところ、エスケープ処理という方法を使えば、ブラケット([])をワードプレスの記事内に正しく表示(エスケープ処理)できることがわかりました。今回は、ブラケット[]をWordPress記事内に表示するための、エスケープ文字の使い方をご紹介します。



エスケープ処理とは?

エスケープ処理とは、エスケープ(Escape:逃げる)の言葉通り、「逃げる」の意味です。つまり、通常のワードプレスの挙動とは異なる動作をさせるための特別な記法なのです。

たとえば、ブラケット([])の場合は、そのままテキストモードでワードプレスの記事内に記載しても、プラグインのショートコードとして処理されてしまうと、意図した形で表示されません。HTMLのタグで使われている<>などのキャラクターも同様です。

これらの文字を、意図した通りに表示する為には、エスケープ文字(例:[)を使用して、それらがショートコードやHTMLのタグではないことをワードプレスに明示的に指示する必要があります。

ショートコードとは?ショートコードとは、ワードプレスの記事内に記載することで、プラグイン等の機能を記事文中から呼び出すためのコードです。この記事でもいくつかのショートコードを使っています。

 

このコードを記載すると、記事文中にブログカード(他の記事への画像付きリンク)が表示されます。

 

表示される文字ワードプレス記事に記載するエスケープコード文字コード(番号)
< &#60;60
> &#62;62
[ &#91;91
\ &#92;92
] &#93;93

こちらは、TablePressというプラグインのショートコードで、プラグインで作成した表が表示されます。

 

こちらは、Table of Contents Plusという超メジャーな目次を表示するプラグインのショートコードですね。

ブラケット[]をワードプレスの記事内で表示するには?

では具体的にブラケット([])を記事内に正しく表示させる方法を見てみましょう。

実はとても簡単なのです!
下記のコードをワードプレスの記事編集画面で使うと、ブラケット([])として表示されます。(必ずテキストモードで記載してください

[ = &#91;
] = &#93;

エスケープ文字を利用

イメージをみてください。上はテキストモードの記載イメージで、下は実際に閲覧される画面になります。

入力した文字と表示された文字が置き換わっていることがわかりますね。

ワードプレスにショートコードとして取り扱わせないために、わざわざ”[”ではなく、”&#91;”という書き方をしているわけです。

この書き方であれば、ワードプレスはこれらの文字列をショートコードと解釈しないため、その文字コード(数字)に対応した文字がそのまま表示されるのです。

ワードプレスでよく使うエスケープ文字

この文字コードの数字を変えると、ブラケット([])以外の他の文字もエスケープ表示させることができます。
ワードプレスの記事でよく使うエスケープ文字を示します。

表示される文字ワードプレス記事に記載するエスケープコード文字コード(番号)
< &#60;60
> &#62;62
[ &#91;91
\ &#92;92
] &#93;93

全ての文字には、固有の番号(文字コード)が付与されています。上の図の、「文字コード」と、「ワードプレス記事に記載するエスケープコード」の番号は同じです。エスケープコードは文字コードの前に&#を付けただけなのです。

ビジュアルモードと、テキストモードを切り替えるタイミングで、勝手にエスケープ文字が解除される事があるので注意!

この記事を書いている間にも、ビジュアルモードとテキストモードを行き来していると、”&#91;”と記載した部分が勝手に”[“に変換されてしまいました。

これはワードプレスの仕様なのですが、お節介なことをしてくれますね。おかげで、記事文中のエスケープ表示箇所を3回も手動で直す羽目になりました。皆様、ご注意くださいw。



関連記事

  1. MagCast ワードプレステーマ

    WordPress

    MagCast ワードプレステーマのカスタマイズ方法

    ぺんです。以前ご紹介した、ニュースメディア風のワードプレステー…

  2. WordPress

    おすすめ無料ワードプレステーマ 2017年8月

    Theme HORSEこちらのサイトでは、ハイクオリティーな無料ワ…

  3. WordPressのローカル環境を簡単に構築する方法

    Server

    Local by Flywheelを使って、WordPressのローカル環境を簡単に構築する方法

    ぺんです。Wordpressサイトのカスタマイズをするは、細心…

  4. Jetpack

    WordPress

    JetpackのPhoton(CDN)機能をONにすると、楽天のサムネイルサイズがおかしくなる

    ぺんです。商品紹介のリンクを貼るときに、サムネイルのサイズを指…

  5. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方

    ぺんです。前回、このブログをエックスサーバー上で運営することは…

  6. WordPress

    Redirection – リダイレクト設定が超絶簡単に行える、WordPressプラグ…

    ぺんです。ブログ記事に広告(ASPへのリンク)を貼っていると、…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。




最近の記事

  1. Twitterアカウントの登録方法
  2. マイクロソフトアカウントの登録方法
  3. 初心者向けWordPressサイトのバックアップ、リストア手順の解説
  4. WordPressのローカル環境を簡単に構築する方法
  5. ウイジェットエリア
  1. ウイジェットエリア

    WordPress

    WordPressテーマに、広告を表示するウィジェットエリアを追加する方法
  2. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方2 TDC 「MAG」…
  3. エスケープ処理

    WordPress

    ワードプレスの記事中にブラケット[]をエスケープ処理する方法
  4. Font Awesomeの使い方

    WordPress

    Font Awesome CDN – 追加された新しいフォント(Ve…
  5. MagCast ワードプレステーマ

    WordPress

    MagCast ワードプレステーマのカスタマイズ方法
PAGE TOP