▶ Windows 11情報をお求めの方はこちらをクリック

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

2 min

 

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

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]というショートコードの場合、以下のようにします。

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

 

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

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

 

 

まとめ

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

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

それでは!

SEパパ

SEパパ

外資系IT企業SE職で2児の父ちゃん!職業柄かリサーチ&問題解決が好き。

幅広いジャンルで「お悩み解決」記事を執筆中。月間最高24万PV。雑誌掲載。

読者様に役立つ情報提供を心がけています。

カテゴリー:

コメントを残す

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

CAPTCHA