ワードプレスのSyntaxHighlighter EvolvedプラグインでHTMLタグやショートコードを文字で表示する方法

投稿者: | 2018年9月22日

ワードプレスのSyntaxHighlighter EvolvedプラグインでHTMLタグやショートコードを文字で表示する方法について紹介します。

HTMLコードやショートコードを表示してユーザーに説明をしたくて、記事を書いてもコードが表示されず困った・・・という人はいませんか?
HTMLコードを文字として表示したいという場合は、検索するとすぐに解決方法は見つかります。

でも・・、ショートコードを文字として表示し説明したくても、思うように表示できなくて困っている方も多いのではないでしょうか。

クマ吉も半日程、悩みました。

こんな時間があれば、1つ記事を書くことができますよね・・・。


 

ショートコードをテキストで表示するには?

答えは、「SyntaxHighlighter Evolved」プラグインを活用すると一発で問題解決です。

Aさん
ショートコードを文字として表示したいんですけど

Bさん
マジ?知らないの?ダサい!

 

SyntaxHighlighter Evolvedプラグインを使うと、下のように文字として表示できます。

 [speech_bubble type="drop" subtype="L1" icon="1.jpg" name="Aさん"] ショートコードを文字として表示したいんですけど [/speech_bubble] 
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="Bさん"] えっ、知らないの?ダサい![/speech_bubble] 

 

※ちなみに、この会話式の表示の方法については、Speech Bubbleプラグインで会話型の吹き出しデザインを極めよう!を参照してね。

 


 

SyntaxHighlighter Evolvedプラグインのインストール

 

【プラグイン】⇒【新規追加】画面を表示します。

「SyntaxHighlighter Evolved」を検索し、プラグインをインストールします。

 

インストールが完了したら、忘れずに【有効化】ボタンをクリックします。

 

【設定】⇒【SyntaxHighlighter Evolved】をクリックし、画面を表示します。

下記のような設定画面が表示されますが、デフォルト設定値のままでOKです。

 


 

使い方

 

ショートコードを文字として表示するには、下記のようにします。

こんな感じにね。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="Aさん"] ショートコードを文字として表示したいんですけど [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="Bさん"] えっ、知らないの?ダサい![/speech_bubble]

 


 

まとめ

いかがでしたか?

からくりがわかると、とても簡単な書き方でしたね。

HTMLコードやショートコードの書き方を説明するような、説明記事を書くときには重宝するプラグインです。

クマ吉同様、困った方にお役に立てたら幸いです。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です