PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入や広告を見ていただくだけで広告主からの収益が発生します。閲覧者様には感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁

WordPressのショートコードを文字列のまま本文に表示させる方法

スポンサーリンク

ショートコードをそのまま表示のロゴ画像

こんにちは、解説ゾロです!

WordPressの「ショートコード」が、とっても便利だからブログで皆に教えてあげよう!

と、本文に「ショートコード」を書いても、待ってましたとばかりに仕事熱心なショートコードはお役目通りに機能を呼び出して実行してしまいますので「ショートコード」自体を本文に表示して教えてあげることができません。

前回の記事である「ボックスメニューを本文に表示するCocoonカスタマイズ方法」でも登場しましたショートコードは「ボックスメニュー」というアイコンフォントを使ったメニューを呼び出して表示するショートコードですので「ショートコード」を本文にそのまま書くと、機能通り「ボックスメニュー」が表示されてしまうのです。

もちろん普通にショートコードを使いたい場合は、それで大成功なんですが・・・笑

でも、どうしても「ショートコード」をそのまま本文に表示したい!!!

というお悩みの方もいらっしゃるかと思います・・・が、もう大丈夫です!

今日は、WordPressのショートコードの機能を実行させないで、テキストそのままの文字列を本文に表示させる方法を、画像を見ながらわかりやすく解説いたします。超が付くほど簡単ですので、一緒にやりましょ!

前回の記事はこちら⇩
ボックスメニューを本文に表示するCocoonカスタマイズ方法
ボックスメニューを本文に表示するWordPress Cocoonのカスタマイズ方法を画像を見ながら解説いたします。アイコンフォントを使ったボックスメニューをショートコードで呼び出して本文に表示できるとホームページでも大活躍です。簡単ですので一緒にやりましょ!
スポンサーリンク
スポンサーリンク
スポンサーリンク

WordPressのショートコードを文字列のまま本文に表示させる方法

前回の記事で登場したショートコードは、

[box_menu name="ボックスメニュー"] というソースコードを本文に書いたものでした。

アレっ!「ショートコード」書けてるじゃん!・・・ですよね~笑!

では、早速、種明かしをいたします。
「ショートコード」の前後を囲っている外側の、
  • [ ]を、
  • [[  ]] 二重に、
する!だけなのです。

たったこれだけで、悩みが吹っ飛びます。笑!これで、ショートコードを文字列のままテキストとして本文に表示させることができます。

コレを知っておけば、皆に教えてあげられます・・・よね。笑!

大かっこ・角かっこ・ ブラケット(square brackets)

ショートコードを囲んでいるこの[ ]は、大かっこ・角かっこ・ ブラケット(square brackets)などと呼ばれていますが、この「かっこ」を二重にすれば、OKなのです。

超が付くほど簡単でした・・・が、知らないと何時間でも悩んでしまいます。笑

では、本文に書くこのショートコードの[ ]の数で、実際にはどのような表示の違いがあるのかを、再確認がてらの検証をしてみます。

スポンサーリンク

ショートコードの[ ]の数で変わる表示を検証

では、本文に書くショートコードの[ ]の数で、プレビュー画面での違いを実写?してみます。

「ショートコード」外側の[ ]をそのまま1つで書くと

本文に、
[box_menu name="ボックスメニュー"]
実際には「投稿を編集」の本文で二重の [[ ]] で書いています。

と、ショートコードをそのまま書くと、通常の使い方通りにショートコードの機能が働いて、この場合は、テーマCocoonに登録されている「ボックスメニュー」が呼び出されて、このように表示されます。⇩

「ショートコード」外側の[ ]を二重に [[ ]] と書くと

次は、本文に、
[[box_menu name="ボックスメニュー"]]
実際には「投稿を編集」の本文で三重の [[[ ]]] で書いています。

と、[ ]を二重にしてこのように、[[ ]] と書くと、機能の呼び出しがストップされ、ショートコードが文字列のテキストでそのまま、このように表示されます。⇩

[box_menu name="ボックスメニュー"]

「ショートコード」外側の[ ]を三重に [[[ ]]] と書くと

もう1つオマケに、
[[[box_menu name="ボックスメニュー"]]]
実際には「投稿を編集」の本文で四重の [[[[ ]]]] で書いています。

と、書くと、こんな風に表示されます。⇩

[[box_menu name="ボックスメニュー"]]
スポンサーリンク

検証結果

WordPress ショートコードの[ ]は、プレビュー画面で見ると、本文に書いた[ ]より、1つ少なく表示されることがわかりました。

[ ]が1つの場合に機能が実行されますので、[ ]が2つである二重に書けば、プレビュー画面では1つ少なく表示されますので、正規のショートコードがそのまま表示されるというわけです。

まとめ

「ショートコード」の解説ブログを作る場合は、実際に書く[ ]の数と表示される数が違うので、頭がこんがらがってしまいそうですが、プレビュー画面を見ながら確認すれば、大丈夫です・・・!笑

WordPressテーマCocoonの場合は、予め設定されているショートコードがありますので、いつもながら助かります。

ご自分でもショートコードは登録することができますので「よっしゃー!」という方は、ぜひ、チャレンジしてスキルアップしてくださいませ。

「ショートコード」も「ショートカット」も使い慣れてくれば、充実した時短ブログが完成しますので、楽しいです!

今日も一日、楽しみましょう!・・・ね。

これから、おやすみの方は、楽しい夢を・・・笑

最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした!

関連記事:ボックスメニューを本文に表示するCocoonカスタマイズ方法
関連記事:【初心者向け】パソコンのショートカットキーおすすめ8選
関連記事:仕事が速い人の定番【ショートカットキー便利ランキング】8選
関連記事:ファイルや画像の削除はキーボードのショートカットが1番便利
関連記事:ショートカットをエクスプローラーのダウンロード画面に作成する方法

【開梱レビュー】ケンジントン スリムブレード K72327JP
ケンジントン スリムブレード トラックボール K72327JPの開梱レビューです。私はレスポンスが安定する有線タイプを購入しましたが保証期間が3年に変更されていないか心配でしたが5年モノが手に入ったので安心です。一緒に開梱しましょ!
タイトルとURLをコピーしました