よく使う特殊文字の早見表!WordPressで「<>、[]」などの表示されないHTMLコードをそのまま表示する方法。

2021-03-13

サイトでHTMLソースコードやWordpressプラグインのショートコードの使い方を説明するときに、記事内に書き込んだソースコードが表示されない!

<>,&,",',[] 」など本来コードとして使用されるこれらの特殊文字は、そのまま記事内に書き込んでもブラウザによってソースコードとして認識されるため、ページ内に文字として表示することができません。

そこでエスケープ処理というものをさせて文字として表示するのですが、覚えられないのでよく使う特殊文字の文字コードを一覧にしました。

自分用でもあります。いつでもコピペで使えるようにまとめておきました!

よく使う&特殊文字一覧-コピペ用

表示したい箇所に以下の&付きの特殊文字をそのままコピペして使って下さい。
プレビューで確認すると記号となって表示されます。

表示される記号 文字コード 読み方(すべて半角)
< &lt; 小なり
> &gt; 大なり
[ &lsqb; 角カッコ、ブラケット等
] &rsqb; 角カッコ、ブラケット等
& &amp; アンパサンド、アンド等
" &quot; ダブルクォーテーション
' &apos; シングルクォーテーション
¥ &yen; 円マーク
©︎ &copy; コピーライト
® &reg; 登録商標記号
&nbsp; 空白

うまく組み合わせることで、特殊文字自体をそのまま表示することもできます。

例えば「<」ではなく「&lt;」と表示したい場合、「&amp;lt;」と書きます。

エスケープ処理と&特殊文字1

実際の執筆画面

実際に記事内にこの内容を埋め込んだ時はこんな感じ。
何度もプレビューして確認しないと、頭が混乱します…

WordPressを使っていると小なりと大なり、角カッコは閉じた場合にHTMLソースコードとして認識され、ブラウザで非表示になってしまいます。
ですので「<」は、「&lt;」でもそのまま「<」でもOKみたい。

エディタを切り替えた時に特殊文字が自動変換される可能性があるので注意。

WordPressのショートコードをそのまま表示する方法

WordPressではよく使う機能をページ内やウィジェット内で簡単に呼び出すことができるショートコードという機能が付いています。

プラグインの使い方の記事でショートコードをそのままページに表示したい場合。
普通に[short code]と書くと、プレビュー時にそのままコードが実行されてしまってうまく表示できません。

こういう場合は角カッコを二つ重ねて使用します。

[[short code]]

このようにエスケープ処理すれば角カッコが一つだけ表示され、うまく表示されます。

もちろん先ほどの特殊文字を使用して

&lsqb;short code&rsqb;

と角カッコをエスケープ処理して埋め込んでもOKです。

開始と終了の二つのショートコードを使う場合

[short code]~ほげほげ~[/short code]
のように開始ショートコードと終了ショートコードをエスケープしてそのまま表示したい場合は工夫が必要です。

表示したい場合一番最初の角カッコと最後の角カッコをエスケープします。

[[short code]~ほげほげ~[/short code]]

まとめ

WordPressで記事作成時によく使いそうなHTMLコードをそのままページに表示する方法を簡単にまとめました。

エスケープ処理といえば、C言語プログラムだと文字列の改行=「¥n」ですが、これはエスケープシーケンスと呼ばれています。よく似ていますね。
↑こういう文章を書きたい時にも重宝します。

別の問題で半角¥マークは「\」で表示されてしまうことが多いので「&yen;」を使いましょう。

プラグインや使用しているテーマによって二連角カッコの方法がうまくいかないことがあるかもしれません。

当サイトでは目次プラグインTOC+のショートコードのエスケープ表示がうまく表示できませんでした。
【関連記事】TOC+のショートコードをエスケープして表示しようとするとHTMLコメントタグ扱いにされ、うまく表示されなかった

-サイト構築

© 2021 ソロ学