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

スポンサーリンク

収益化に手ごたえが感じられるクマ吉です。

ワードプレスの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]

 

 

その他おすすめプラグインについて

 

ワードプレスでブログを立ち上げたら、運営するためにはプラグインが必須となりますが、何を選んでいいの?

このような悩みを解決している記事です。

本記事では、プラグインの目的を明確にしていますので、自身のブログ運営で必要なモノをしっかりと選んで、記事作成に重きを置けるように環境設定をしていきましょう!

 

ワードプレスおすすめ無料プラグイン・ツール【厳選まとめ】
ワードプレスでブログを立ち上げたら、運営するためにはプラグインが必須となりますが、何を選んでいいのでしょうか?今回は、すべて無料で使用できるワードプレスのおすすめプラグイン12選!として、初めてブログを立ち上げた初心者の方にとって有益なプラグインを目的別にご紹介していきます

 

 

最後にまとめ

いかがでしたか?

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

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

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

 

関連 グーグルアドセンスの厳しい審査に通るには?合格方法や文字数などを解説2019

関連 【簡単】ブログのアクセス数を10倍に増やす正しい方法!

 

日常会話の英語フレーズ一覧【ビジネスでも使える厳選まとめ集】ではカテゴリ別に使えるフレーズをピックアップしています。

まとめて読みたい方は是非ご覧ください。

 

私はこれで英語をマスターしました!
コンサル&無料体験レッスン実施中

専属コンサルタントが、現在のレベル、課題と目標を明確にして短期間で最適な学習方法をアドバイスします。

こんな方へ
・どうやって勉強したらいいかわからない
・なんとなく英会話スクールに迷われている方
・英会話教室に通ったけど、話せるようにならなかった
・自分の英語の弱点を知りたい方
・一度オンライン英会話をやったけれども飽きてしまった方
・海外の方との会議や海外出張で英語が話せず困っている
・今すぐビジネス英会話を覚えたい方
・途中でやめてしまった経験がある




受講開始して、途中で「思っていたのと違う」「自分には無理そう」等感じたら、 開始から30日以内であれば受講費を全額返金するシステムがあるので安心です。

ブログ構築/ワードプレス
スポンサーリンク
スポンサーリンク
シゲキタイムズ

コメント

  1. ゆきぴ より:

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

タイトルとURLをコピーしました