脱プラグイン!吹き出しで会話するショートコードを自作しよう【WordPressカスタマイズ】

2018年9月22日 2018年11月27日 Wordpressカスタマイズ /

会話形式の記事が書ける「吹き出し」のショートコードを実装する方法を紹介します。

Speech Bubbleというプラグインでもカンタンに「吹き出し」は使えますが、色々なデザインのCSSをたくさん読み込むため、サイトの表示速度的に少し残念な気がしていました。

【初心者向け】吹き出しでチャット風の記事が書ける無料プラグインSpeech Bubbleの使い方

ということで今回ご紹介するのは、
すごくシンプルなデザインでなるべくカンタンに実装できる「吹き出しショートコード」の作り方です!

テーマのfunctions.phpを編集

まず、吹き出しのショートコードの定義をします。
functions.phpに次のコードをコピペします。

これでショートコードの定義は完了です。

吹き出しショートコードの使い方

WordPressの本文に、次のようにショートコードを入力します。

属性設定は、colornameiconの3種類。

colorは、吹き出しの色をCSSカラーで指定します。
例えば、青にする場合は”blue”または16進数で”#0000FF”と指定します。

参考:
カラーネーム140色カラーネーム

nameは、喋っているキャラクターの名前を入力します。
指定しない場合、名前は表示されません。

iconは、キャラクターの画像URLを入力します。
指定しない場合、デフォルト画像を表示します。
テーマフォルダの下記の場所にデフォルト画像を置いておくと、指定なしで表示します。

テーマ(子テーマ)/images/fukidashi-default.png

幅・高さともに200~300px程度の正方形の画像がおすすめです。

デフォルト画像以外に複数のキャラクターを使いたい場合は、あらかじめ「メディア」にアップしておき、その画像のURLをiconに入力して使います。
アップした画像のURLは「メディア>ライブラリ」で確認します。
「ファイルのURL」に記載してあるパスをコピペして使用してください。

 

属性値を入力したコード例です。

実際に表示される吹き出しのデモはこちら。

ゴリ夫君ゴリ夫君

ワイはゴリ夫や!よろしくやで!

 

ちなみに、キャラクターは常に左側に表示します。
左右にキャラクターが分かれたLINE形式だと「目線が左右に動いて読みづらい」という声もあります。
よって右側に表示させる機能はつけませんでした。

吹き出しのHTML要素とCSSデザイン

吹き出しショートコードでは、HTMLはこのように出力されます。

吹き出しをCSSでデザインしていきます。
次のコードをテーマのstyle.cssにコピペします。
レスポンシブにも対応しています。

吹き出しショートコードまとめ

CSSが出来れば、デザインにアレンジを加えることもできますし、カスタマイズもしやすいと思います。

AddQuicktagなどのプラグインでショートコードを登録しておくと、記事の執筆効率も格段に上がります!
ぜひお試しくださいね。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ウェルスナビで損失?