サイトでHTMLソースコードやWordpressプラグインのショートコードの使い方を説明するときに、記事内に書き込んだソースコードが表示されない！
「 <>，&，"，'，[] 」など本来コードとして使用されるこれらの特殊文字は、そのまま記事内に書き込んでもブラウザによってソースコードとして認識されるため、ページ内に文字として表示することができません。
そこでエスケープ処理というものをさせて文字として表示するのですが、覚えられないのでよく使う特殊文字の文字コードを一覧にしました。
自分用でもあります。いつでもコピペで使えるようにまとめておきました！
この記事の目次
よく使う&特殊文字一覧-コピペ用
表示したい箇所に以下の&付きの特殊文字をそのままコピペして使って下さい。
プレビューで確認すると記号となって表示されます。
| 表示される記号 | 文字コード | 読み方(すべて半角) |
| < | < | 小なり |
| > | > | 大なり |
| [ | [ | 角カッコ、ブラケット等 |
| ] | ] | 角カッコ、ブラケット等 |
| & | & | アンパサンド、アンド等 |
| " | " | ダブルクォーテーション |
| ' | ' | シングルクォーテーション |
| ¥ | ¥ | 円マーク |
| ©︎ | © | コピーライト |
| ® | ® | 登録商標記号 |
| | 空白 |
うまく組み合わせることで、特殊文字自体をそのまま表示することもできます。
例えば「<」ではなく「<」と表示したい場合、「&lt;」と書きます。
実際の執筆画面
実際に記事内にこの内容を埋め込んだ時はこんな感じ。
何度もプレビューして確認しないと、頭が混乱します…
Wordpressを使っていると小なりと大なり、角カッコは閉じた場合にHTMLソースコードとして認識され、ブラウザで非表示になってしまいます。
ですので「<」は、「<」でもそのまま「<」でもOKみたい。
エディタを切り替えた時に特殊文字が自動変換される可能性があるので注意。
WordPressのショートコードをそのまま表示する方法
Wordpressではよく使う機能をページ内やウィジェット内で簡単に呼び出すことができるショートコードという機能が付いています。
プラグインの使い方の記事でショートコードをそのままページに表示したい場合。
普通に[short code]と書くと、プレビュー時にそのままコードが実行されてしまってうまく表示できません。
こういう場合は角カッコを二つ重ねて使用します。
[[short code]]
このようにエスケープ処理すれば角カッコが一つだけ表示され、うまく表示されます。
もちろん先ほどの特殊文字を使用して
[short code]
と角カッコをエスケープ処理して埋め込んでもOKです。
開始と終了の二つのショートコードを使う場合
[short code]～ほげほげ～[/short code]
のように開始ショートコードと終了ショートコードをエスケープしてそのまま表示したい場合は工夫が必要です。
表示したい場合一番最初の角カッコと最後の角カッコをエスケープします。
[[short code]～ほげほげ～[/short code]]
まとめ
Wordpressで記事作成時によく使いそうなHTMLコードをそのままページに表示する方法を簡単にまとめました。
エスケープ処理といえば、C言語プログラムだと文字列の改行＝「¥n」ですが、これはエスケープシーケンスと呼ばれています。よく似ていますね。
↑こういう文章を書きたい時にも重宝します。
別の問題で半角￥マークは「\」で表示されてしまうことが多いので「¥」を使いましょう。
