今回は、初心者にはちょっと難しいタグやコードを文字で表示する方法をご紹介します。
HTMLタグを記事に表示する方法は、ちょっとググれば山のように参考になる記事がヒットします。しかし、ショートコード([コード]~[/コード])は、ちょっと苦戦しました…
というのも、検索キーワードに「wordpress 文字として表示」なんて入れても、ショートコードに関する記事は、なかなかヒットしません。
そのため、そもそも[コード]~[/コード]がショートコードという名称ということですら、調べるのに時間がかかってしまいました。
ショートコードを文字で表示する方法は、HTMLタグを文字で表示する方法を知っておいた方が理解しやすいので、まずはHTMLタグからご説明します。
クリックできる目次
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エディタで以下のように書きます。
"えいじまん"公園いこうか!"むすめ"いきたい!いきたーい!
このように、タグ(”<>”)ではなくカギカッコ(“[]”)で記述するものをショートコードと呼びます。
文字で表示
HTMLタグと同様、SyntaxHighlighter Evolvedプラグインを使います。
以下のように、カギカッコ(“[]”)をさらにカギカッコで囲みます。
例えば、[a]~[/a]というショートコードの場合、以下のようにします。
ショートコード全体をカギカッコ(“[]”)で囲むと、ショートコードを記事中に表示できます。
"えいじまん"公園いこうか!"むすめ"いきたい!いきたーい!
まとめ
プラグインの使い方やHTMLコードの書き方を説明するような、ハウツー(HowTo)記事を書くときには重宝する内容です。
冒頭でも書きましたが、筆者は、ショートコードを記事中に文字で表示するのに苦労しました。。。なので、同じように困っている方のお役に立てれば幸いです。
それでは!