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

投稿者: | 2018年11月28日

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

HTMLコードやショートコードを表示してユーザーに説明をしたくて、記事を書いてもコードが表示されずに困った・・・という人はいませんか?

HTMLコードを文字として表示したいという場合は、検索するとすぐに解決方法は見つかります。

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

SyntaxHighlighter Evolvedプラグインを導入すると、これらの悩みは解決します。

 

 

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

 

 

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

答えは、「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] 

 

※ちなみに、この会話式の表示の方法については、ワードプレスの吹き出しはプラグインで簡単設定。画像アイコンの変更も可能で会話を楽しもう!を参照してね。

 

また、これからブログを開始しようとお考えの方は、まずはこちらの記事もご参考にしてみてくださいね。

⇒ エックスサーバーの契約からドメイン設定・ワードプレスのインストール手順まで

 

 

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

 

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

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

 

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

 

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

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

 


 

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]

 

 

 

最後にまとめ

いかがでしたか?

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

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

全員に必要はないかと思われますが、ワードプレスをこの先使っていこうと考えていれば、知っておいて損はないのではないでしょうか。

 

 

★合わせて読みたい参考記事
⇒ 【無料】ワードプレスおすすめプラグイン12選!ブログ効率UPに期待できます。

⇒ そのブログで使用する画像やアイキャッチ画像は使っても大丈夫?商用フリー写真をご紹介します

⇒ 簡単!ワードプレスの見出しデザインをプラグインで装飾設定・使い方

⇒ ネットで稼いでプチ贅沢☆資産ブログの作成!副収入で月5万円を目指せ!

 

 

 

ワードプレスでHTMLタグやショートコードを文字で表示する方法!SyntaxHighlighter Evolvedプラグインの実装」への1件のフィードバック

  1. ゆきぴ

    こんにちは。
    ブログランキングからきました。
    ショートコードの使い方解りやすく書かれているので
    とても参考になりました。
    また拝見させていただきます。
    ポチっと応援して帰ります。

    返信

コメントを残す

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