WordPressでHTMLタグやショートコードを文字で表示する方法

今回は、初心者にはちょっと難しいタグやコードを文字で表示する方法をご紹介します。

HTMLタグを記事に表示する方法は、ちょっとググれば山のように参考になる記事がヒットします。しかし、ショートコード([コード]~[/コード])は、ちょっと苦戦しました

というのも、検索キーワードに「wordpress 文字として表示」なんて入れても、ショートコードに関する記事は、なかなかヒットしません。

そのため、そもそも[コード]~[/コード]がショートコードという名称ということですら、調べるのに時間がかかってしまいました。

ショートコードを文字で表示する方法は、HTMLタグを文字で表示する方法を知っておいた方が理解しやすいので、まずはHTMLタグからご説明します。

Sponsored Link

HTMLタグを文字で表示する方法

例えば記事中に、以下のようなHTMLコードを表示したいとします。




<div style="border: 1px solid #cccccc; padding: 10px; background: #F5F5F5;">テスト</div>



これをwordpressエディタのテキストにそのまま入力すると、こんな表示になります。

テスト

ではどうすればよいのか?

SyntaxHighlighter Evolvedインストール

SyntaxHighlighter Evolvedというプラグインを使います。

インストールして、有効化しましょう。

文字で表示

wordpressエディタのテキストでHTMLコードを以下のようにhtmlで囲みます。

そうすると、下のように表示されます。




<div style="border: 1px solid #cccccc; padding: 10px; background: #F5F5F5;">テスト</div>



HTMLタグの場合は、HTMLコードをSyntaxHighlighter Evolvedプラグインで囲むだけですので、簡単ですね。

ショートコードを文字で表示する方法

ショートコードとは

例えば、会話風に表示ができるspeech bubbleというプラグイン

えいじまん
公園いこうか!
むすめ
いきたい!いきたーい!

この会話は、wordpressエディタで以下のように書きます。

[speech_bubble type="ln" subtype="L1" icon="画像ファイル" name="えいじまん"]公園いこうか![/speech_bubble]
[speech_bubble type="ln" subtype="R1" icon="画像ファイル" name="むすめ"]いきたい!いきたーい![/speech_bubble]

このように、タグ(”<>”)ではなくカギカッコ(“[]”)で記述するものをショートコードと呼びます。

文字で表示

HTMLタグと同様、SyntaxHighlighter Evolvedプラグインを使います。

以下のように、カギカッコ(“[]”)をさらにカギカッコで囲みます。

例えば、[a]~[/a]というショートコードの場合、以下のようにします。

カギカッコで囲む [[a]~[/a]]

ショートコード全体をカギカッコ(“[]”)で囲むと、ショートコードを記事中に表示できます。

[speech_bubble type="ln" subtype="L1" icon="画像ファイル" name="えいじまん"]公園いこうか![/speech_bubble]
[speech_bubble type="ln" subtype="R1" icon="画像ファイル" name="むすめ"]いきたい!いきたーい![/speech_bubble]

まとめ

プラグインの使い方やHTMLコードの書き方を説明するような、ハウツー(HowTo)記事を書くときには重宝する内容です。

冒頭でも書きましたが、筆者は、ショートコードを記事中に文字で表示するのに苦労しました。。。なので、同じように困っている方のお役に立てれば幸いです。

それでは!

Sponsored Link

シェアする

  • このエントリーをはてなブックマークに追加

フォローする