WordPressの投稿で、ショートコードについて紹介するときに困っていたことがあります。
先日のInstagramフィードの表示方法を解説した投稿でもそうだったのですが、ショートコード自体を表示したいのに、変換されてしまうのです。
たとえば、[instagram-feed]という文字列を表示させたいのに、その箇所には実際のInstagramフィードが表示されてしまうといった具合です。
調べてもなかなか情報にヒットしなかったので、ここにシェアしておきます
コンテンツ
エスケープ処理とは
まず考えたのはエスケープ処理です。
WordPressでは「<」のようなhtmlタグで利用する文字（特殊文字）は、単なる文字ではなくhtmlスクリプトの一部とみなされ、レイアウトが崩れてしまいます。
そのため、文章中に「<」と表示させたい場合は、単に文字の「<」を打つのではなく、「<」に対応する文字列の「<」と打つ必要があります。
これをエスケープ処理といいます。
ちなみに普通に「<」と打つと「<」と表示されますので、「<」を表示させたい場合はどうするのかというと、最初の「&」を「&」に変えます♪
ショートコードのエスケープ方法
でも、 [ も ] もhtml上は特殊文字にはあたらないので、どうしたらよいのだろう？と思っていたところ、ちゃんとCodexに記載がありました笑
正解はさらに[]で囲う、だそうです！
[shortcode] と表示させたい場合は、[[shortcode]]と入力すればOKです！
[shortcode] → [[shortcode]]
開始タグと終了タグを持つショートコードの場合は、最初と最後の角括弧をエスケープする様です。
[[shortcode] 〜〜〜 [/shortcode]] ショートコードのエスケープ 『ショートコード - WordPress Codex 日本語版』
おわりに
知ってみるとなんてこと無い、また簡単な方法でエスケープできることがわかりました！
が、まれにしか使わないので、いざというときに忘れてしまいがちです。。。
この投稿がどなたかのお役に立てれば幸いです
ちなみに、機能として登録されていないショートコードはそのまま（角括弧を二重にせず）[shortcode]と入力すればOKです♪
