こんにちは、解説ゾロです！
WordPressの「ショートコード」が、とっても便利だからブログで皆に教えてあげよう！
と、本文に「ショートコード」を書いても、待ってましたとばかりに仕事熱心なショートコードはお役目通りに機能を呼び出して実行してしまいますので「ショートコード」自体を本文に表示して教えてあげることができません。
前回の記事である「ボックスメニューを本文に表示するCocoonカスタマイズ方法」でも登場しましたショートコードは「ボックスメニュー」というアイコンフォントを使ったメニューを呼び出して表示するショートコードですので「ショートコード」を本文にそのまま書くと、機能通り「ボックスメニュー」が表示されてしまうのです。
もちろん普通にショートコードを使いたい場合は、それで大成功なんですが・・・笑
でも、どうしても「ショートコード」をそのまま本文に表示したい！！！
というお悩みの方もいらっしゃるかと思います・・・が、もう大丈夫です！
今日は、WordPressのショートコードの機能を実行させないで、テキストそのままの文字列を本文に表示させる方法を、画像を見ながらわかりやすく解説いたします。超が付くほど簡単ですので、一緒にやりましょ！
WordPressのショートコードを文字列のまま本文に表示させる方法
前回の記事で登場したショートコードは、
[box_menu name="ボックスメニュー"] というソースコードを本文に書いたものでした。
アレっ！「ショートコード」書けてるじゃん！・・・ですよね～笑！
- ［ ］を、
- [[ ]] 二重に、
たったこれだけで、悩みが吹っ飛びます。笑！これで、ショートコードを文字列のままテキストとして本文に表示させることができます。
コレを知っておけば、皆に教えてあげられます・・・よね。笑！
大かっこ・角かっこ・ ブラケット（square brackets）
ショートコードを囲んでいるこの［ ］は、大かっこ・角かっこ・ ブラケット（square brackets）などと呼ばれていますが、この「かっこ」を二重にすれば、OKなのです。
超が付くほど簡単でした・・・が、知らないと何時間でも悩んでしまいます。笑
では、本文に書くこのショートコードの［ ］の数で、実際にはどのような表示の違いがあるのかを、再確認がてらの検証をしてみます。
ショートコードの［ ］の数で変わる表示を検証
では、本文に書くショートコードの［ ］の数で、プレビュー画面での違いを実写？してみます。
「ショートコード」外側の［ ］をそのまま1つで書くと
[box_menu name="ボックスメニュー"]
と、ショートコードをそのまま書くと、通常の使い方通りにショートコードの機能が働いて、この場合は、テーマCocoonに登録されている「ボックスメニュー」が呼び出されて、このように表示されます。⇩
「ショートコード」外側の［ ］を二重に [[ ]] と書くと
[[box_menu name="ボックスメニュー"]]
と、［ ］を二重にしてこのように、[[ ]] と書くと、機能の呼び出しがストップされ、ショートコードが文字列のテキストでそのまま、このように表示されます。⇩
「ショートコード」外側の［ ］を三重に [[[ ]]] と書くと
[[[box_menu name="ボックスメニュー"]]]
と、書くと、こんな風に表示されます。⇩
検証結果
WordPress ショートコードの［ ］は、プレビュー画面で見ると、本文に書いた［ ］より、1つ少なく表示されることがわかりました。
［ ］が1つの場合に機能が実行されますので、［ ］が2つである二重に書けば、プレビュー画面では1つ少なく表示されますので、正規のショートコードがそのまま表示されるというわけです。
まとめ
「ショートコード」の解説ブログを作る場合は、実際に書く［ ］の数と表示される数が違うので、頭がこんがらがってしまいそうですが、プレビュー画面を見ながら確認すれば、大丈夫です・・・！笑
WordPressテーマCocoonの場合は、予め設定されているショートコードがありますので、いつもながら助かります。
ご自分でもショートコードは登録することができますので「よっしゃー！」という方は、ぜひ、チャレンジしてスキルアップしてくださいませ。
「ショートコード」も「ショートカット」も使い慣れてくれば、充実した時短ブログが完成しますので、楽しいです！
もう少し、HTMLやソースコードのことを詳しくなって、自分で書けるようになったり、キャリアチェンジを考えてみたい方に「おすすめ」を3つ用意してみましたので、様子をチェックしてみてみてください。見るのはタダ～！笑
1つ目のおすすめは、HTML・CSS・BootstrapやWordPressのオリジナルの作成まで学習できる完全オンライン講座です。
受講期間に制限がないので一度受講すればカリキュラムをずっと閲覧できるのでお得で、質問も専門のITエンジニアが回答してくれるから安心です・・・よね！笑
＼詳しくなりたいなぁ～の方は、ポチっ／
ちょっと見てみる
2つ目は、このスクールは、求職者支援訓練校や経済産業省認定のキャリアアップ支援事業のオンラインスクールです。
実践的なWebスキルが学べ、プログラミング、Web制作、Webデザイン、動画編集、ドローンなど幅広いジャンルをカバーする10以上のコースがあり、現役のプロに質問できるのは大きな魅力の1つです・・・よね！笑
＼ちょっとだけ、見てみたいの方は、ポチっ！／
『デイトラ』で仕事につながるWebスキルを身につけよう！
3つ目は、今後も注目のAIプログラミングを未経験でも3か月でAIを習得する一発逆転のオンラインコーチングサービスです。
まったくのプログラミング初心者から、専門的な研究者にまで対応しているので安心感があるコーチングです。
AIの画像認識やアプリの開発に興味がある人にも、嬉しいスクールです・・・よね！笑
＼ちょっと覗いて見ようの方は、ポチっ／
アイデミープレミアムで3ヶ月でAIエンジニア！
今日も一日、楽しみましょう！・・・ね。
これから、おやすみの方は、楽しい夢を・・・笑
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした！
関連記事：ボックスメニューを本文に表示するCocoonカスタマイズ方法
関連記事：【初心者向け】パソコンのショートカットキーおすすめ8選
関連記事：仕事が速い人の定番【ショートカットキー便利ランキング】8選
関連記事：ファイルや画像の削除はキーボードのショートカットが１番便利
関連記事：ショートカットをエクスプローラーのダウンロード画面に作成する方法
