Contents
「Post Snippets」をダウンロードします。
コードスニペットを管理できるWordpressのプラグインです。
こちらの記事で、・・・
WordPressで、「Speech Bubble」プラグインを使わないで、CSS(スタイルシート)とHTMLで、会話形式の吹き出しバブルデザインを構築する方法。
画像を用いて、会話形式の吹き出しを作ることを説明させていただきました。
その時に、毎回、同じようなHTMLを何度も記入しなければいけないこともお話しました。
そんな時、この長文のHTMLなどを一旦、登録していると、ショートコード化して
表示してくれる、とても、便利なプラグインです。
設定・操作方法は、極めて簡単でシンプル。
以下のようなHTMLをショートコード化します。
1 2 3 4 |
<div id="wrapper"> <div class="question_Box"> <div class="question_image"><img src="/img/takeru_smile-L.png" /><br>タケル</div> <div class="arrow_question_takeru"> |
画像を使った吹き出し形式での会話を表現する際には、上記のようなコードを何度も、記述しなければいけない、煩わしさがありますね。
まず、新規にスニペットしますので、最下部にあるをクリックして、
設定画面を表示させます。
これを、下記の画像のように設定して短縮できるようにします。
設定作業は、これだけです。
あとは、このボタンをクリックするだけです。
テキストウィジェットでショートコードを利用できるようにする方法。
テキストウィジェットが使えるところで、このショートコードを利用します。
まず、functions.phpに下記コードを追加します。
1 |
add_filter('widget_text', 'do_shortcode'); |
これで、ウィジェット部分でも、ショートコードを利用可となります。
実用例

タケル

未来

先生
ね!
会話しているように見えるでしょ。
是非、あなたも、挑戦してみてください。