スポンサーリンク

WordPressの記事でショートコードを「見せる」方法

Wordpress
スポンサーリンク
スポンサーリンク

ショートコードってなに?

WordPressでは、プラグインを導入したり、functions.phpにプログラムを記述することで、機能を追加することができるんですよね。

そして、記事作成画面でその機能を利用する場合に、よく使われるのが「ショートコード」というものなんです。

[ と ] で囲まれた中に、指定された文字列を入力することで、プログラムが動作して指定した機能を発揮してくれます。

私のサイトで最近紹介した「会話風の吹き出し」を実現する機能も、記事作成時にショートコードを入力することで実現します。

これです。

サイト管理人のまりんです。こんな風に会話風の吹き出しを表示することが出来るようになったんですよ。

人物アイコンまりん

これを実現するショートコードは、これです。

[fukidashi speaker="まりん" txt="サイト管理人のまりんです。こんな風に会話風の吹き出しを表示することが出来るようになったんですよ。" img="/images/icon/marine-bup_icon.png" fuki="left"]

 

ショートコードを「見せる」「紹介する」方法

いや、もう既に上で見せているんですけど・・・気を取り直して、その方法をこれから紹介したいと思います。

phpなどのコードを紹介する時には、 <pre>ここにコード</pre>と記述することで・・・

ここにコード

と、こんな感じに記述することができるんですよね。

ところが、ショートコードについては、ちょっと別モンの感じ。同じように記述してもこんな感じになるんです。

サイト管理人のまりんです。こんな風に会話風の吹き出しを表示することが出来るようになったんですよ。

人物アイコンまりん

 

ね? ショートコードの紹介になっていないでしょ?

では、どうするかというと、実はとっても簡単なことでした。

[ の前にもうひとつ [ を追加するだけで良かったんです。

[fukidashi speaker="まりん" txt="サイト管理人のまりんです。こんな風に会話風の吹き出しを表示することが出来るようになったんですよ。" img="/images/icon/marine-bup_icon.png" fuki="left"]

はい。ちゃんと表示されましたね。

当然ながら、上に表示されているのは、実際には文頭が [[  文末が ]] と記述されています。

わかっていただけましたか? 余り深く考えずに、そんなもんだと思ってもらえたら良いと思いますよ〜

人物アイコンまりん

 

 

コメント