WordPressではお使いのテーマによってショートコードが用意されていることが多いです。
例えば当サイトで使用中のSWELLであればショートコードでアイコンの表示も可能です。
ちなみにこのTwitterアイコンの表示は
[icon class="icon-twitter"]のように入力しています。
そして今回の記事でお伝えしたいのは
まさに今見て頂いたように
[icon class="icon-twitter"]のようにショートコードを文字列としてそのまま表示させる方法です。結論から言うと、ショートコードをショートコードの文字列としてそのまま表示させたい場合は
ショートコードを囲っている角括弧を二重にするだけでショートコード化をエスケープ出来ます。
つまりWordPressの場合、ショートコードを文字列としてサイト上に表示させたい場合は
[[icon class="icon-twitter"]]のように記入すると、文字列としてサイト上に表示されます。WordPressのショートコード[]をそのまま表示させる方法
今回の話は、ショートコードの使い方などを説明する記事を書きたい時に役に立ちます。
ショートコードは角括弧[]で囲うことによって機能しますが、逆に機能させたくない時
つまりショートコードを文字列としてそのまま表示させたい時に役に立つ方法です。
記事編集画面での入力の見え方と、記事公開後の見え方に次のような違いがあります。
編集画面での見え方 | 公開後の見え方 |
---|---|
[icon class="icon-twitter"] | |
[[[icon class="icon-twitter"]] | [icon class="icon-twitter"] |
[[[[icon class="icon-twitter"]]] | [[icon class="icon-twitter"]] |
つまり編集画面で見ている時より、記事公開後は[]が一組消えて表示されることになります。
ちなみにこれはショートコードとして登録されているからこそ1組が消えて表示されるので
ショートコードとして登録されていないものを[]で二重に囲っても二重で表示されるだけです。
つまり[[shortcodes]]と入力しても、登録されていないので[[shortcodes]]と表示されるだけです。
二重で囲うことによるエスケープは、あくまでそのショートコードがあるから機能するものです。
HCBなどのプラグインを使う場合もこの方法が有効
HCBなどのコードの表示をサポートするようなプラグインを使う場合もこの方法が有効です。
もし二重で囲わない場合は、HCBを使用する場合でもショートコードが機能してしまいます。
なのでHCBの中でショートコードを表示させたい場合も、同じように二重で囲ってください。
[icon class="icon-twitter"]
WordPressのショートコードとは?
ショートコードは、WordPressが2008年リリースのバージョン2.5からサポートしている機能で
functions.phpに記述した関数を[]を使うことで記事等に呼び出すことが出来るようになりました。
なのでお使いのーマによってfunctions.phpの内容も使えるショートコードも変わりますし
プラグインの導入でも新しいショートコードが使えるようになりますし、自作も可能です。
つまりショートコードは、登録した機能をショートカットで呼び出せるコードということです。
ちなみにショートコードに使用する[]は、大括弧・角括弧・ブラケットとも呼ばれます。
最後まで読んで頂きありがとうございました。