WordPressのショートコード[]をそのまま表示させる方法

WordPressではお使いのテーマによってショートコードが用意されていることが多いです。

例えば当サイトで使用中のSWELLであればショートコードでアイコンの表示も可能です。

ちなみにこのTwitterアイコンの表示は

のように入力しています。

そして今回の記事でお伝えしたいのは

まさに今見て頂いたように

結論から言うと、ショートコードをショートコードの文字列としてそのまま表示させたい場合は

ショートコードを囲っている角括弧を二重にするだけでショートコード化をエスケープ出来ます。

つまりWordPressの場合、ショートコードを文字列としてサイト上に表示させたい場合は

✅ 運営者プロフィール（@aoto_yuzuto）

ココナラでブログ相談受付中

技術相談・方向性相談・外観デザイン設定など

ご相談プラン一覧はこちら

WordPressのショートコード[]をそのまま表示させる方法

今回の話は、ショートコードの使い方などを説明する記事を書きたい時に役に立ちます。

ショートコードは角括弧[]で囲うことによって機能しますが、逆に機能させたくない時

つまりショートコードを文字列としてそのまま表示させたい時に役に立つ方法です。

記事編集画面での入力の見え方と、記事公開後の見え方に次のような違いがあります。

つまり編集画面で見ている時より、記事公開後は[]が一組消えて表示されることになります。

ちなみにこれはショートコードとして登録されているからこそ1組が消えて表示されるので

ショートコードとして登録されていないものを[]で二重に囲っても二重で表示されるだけです。

つまり[[shortcodes]]と入力しても、登録されていないので[[shortcodes]]と表示されるだけです。

二重で囲うことによるエスケープは、あくまでそのショートコードがあるから機能するものです。

HCBなどのプラグインを使う場合もこの方法が有効

HCBなどのコードの表示をサポートするようなプラグインを使う場合もこの方法が有効です。

WordPress.org 日本語

Highlighting Code Block prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。 (Gutenberg とクラシックエディター共に利用可能)

もし二重で囲わない場合は、HCBを使用する場合でもショートコードが機能してしまいます。

なのでHCBの中でショートコードを表示させたい場合も、同じように二重で囲ってください。

[icon class="icon-twitter"]

WordPressのショートコードとは？

ショートコードは、WordPressが2008年リリースのバージョン2.5からサポートしている機能で

functions.phpに記述した関数を[]を使うことで記事等に呼び出すことが出来るようになりました。

なのでお使いのーマによってfunctions.phpの内容も使えるショートコードも変わりますし

プラグインの導入でも新しいショートコードが使えるようになりますし、自作も可能です。

つまりショートコードは、登録した機能をショートカットで呼び出せるコードということです。

ちなみにショートコードに使用する[]は、大括弧・角括弧・ブラケットとも呼ばれます。

最後まで読んで頂きありがとうございました。