ぺんです。
先日公開したこの記事の中で、オリジナルプラグインを呼び出すショートコード（ 例： ）を紹介しようと思ったのですが、そのままと記事内で書いても、ブラケット［］はWordPressサイト上で、ショートコードとして解釈されてしまうため、そのままでは記事内に表示することができません。
調べたところ、エスケープ処理という方法を使えば、ブラケット（[]）をワードプレスの記事内に正しく表示（エスケープ処理）できることがわかりました。今回は、ブラケット［］をWordPress記事内に表示するための、エスケープ文字の使い方をご紹介します。
CONTENTS
エスケープ処理とは？
エスケープ処理とは、エスケープ（Escape:逃げる）の言葉通り、「逃げる」の意味です。つまり、通常のワードプレスの挙動とは異なる動作をさせるための特別な記法なのです。
たとえば、ブラケット（[]）の場合は、そのままテキストモードでワードプレスの記事内に記載しても、プラグインのショートコードとして処理されてしまうと、意図した形で表示されません。HTMLのタグで使われている＜＞などのキャラクターも同様です。
これらの文字を、意図した通りに表示する為には、エスケープ文字（例：[）を使用して、それらがショートコードやHTMLのタグではないことをワードプレスに明示的に指示する必要があります。
ショートコードとは？ショートコードとは、ワードプレスの記事内に記載することで、プラグイン等の機能を記事文中から呼び出すためのコードです。この記事でもいくつかのショートコードを使っています。
このコードを記載すると、記事文中にブログカード（他の記事への画像付きリンク）が表示されます。
表示される文字 ワードプレス記事に記載するエスケープコード 文字コード（番号）
< < 60
> > 62
[ [ 91
\ \ 92
] ] 93
こちらは、TablePressというプラグインのショートコードで、プラグインで作成した表が表示されます。
こちらは、Table of Contents Plusという超メジャーな目次を表示するプラグインのショートコードですね。
ブラケット[]をワードプレスの記事内で表示するには？
では具体的にブラケット（[]）を記事内に正しく表示させる方法を見てみましょう。
実はとても簡単なのです！
下記のコードをワードプレスの記事編集画面で使うと、ブラケット（[]）として表示されます。（必ずテキストモードで記載してください）
[ = [
] = ]
イメージをみてください。上はテキストモードの記載イメージで、下は実際に閲覧される画面になります。
入力した文字と表示された文字が置き換わっていることがわかりますね。
ワードプレスにショートコードとして取り扱わせないために、わざわざ”[”ではなく、”[”という書き方をしているわけです。
この書き方であれば、ワードプレスはこれらの文字列をショートコードと解釈しないため、その文字コード（数字）に対応した文字がそのまま表示されるのです。
ワードプレスでよく使うエスケープ文字
この文字コードの数字を変えると、ブラケット([])以外の他の文字もエスケープ表示させることができます。
ワードプレスの記事でよく使うエスケープ文字を示します。
| 表示される文字 | ワードプレス記事に記載するエスケープコード | 文字コード（番号） |
|---|---|---|
| < | < | 60 |
| > | > | 62 |
| [ | [ | 91 |
| \ | \ | 92 |
| ] | ] | 93 |
全ての文字には、固有の番号（文字コード）が付与されています。上の図の、「文字コード」と、「ワードプレス記事に記載するエスケープコード」の番号は同じです。エスケープコードは文字コードの前に＆＃を付けただけなのです。
ビジュアルモードと、テキストモードを切り替えるタイミングで、勝手にエスケープ文字が解除される事があるので注意！
この記事を書いている間にも、ビジュアルモードとテキストモードを行き来していると、”[”と記載した部分が勝手に”[“に変換されてしまいました。
これはワードプレスの仕様なのですが、お節介なことをしてくれますね。おかげで、記事文中のエスケープ表示箇所を3回も手動で直す羽目になりました。皆様、ご注意くださいｗ。
この記事へのコメントはありません。