NOプラグイン！LINE風吹き出しをサイトに表示するためのショートコードを自作しよう

2022年2月12日2022年10月24日

NOプラグイン！LINE風吹き出しをサイトに表示するためのショートコードを自作しよう

ホームページやブログサイト上でよく見るLINE風会話形式の表示「吹き出し」を実装し、ショートコードで使えるようにする方法を作成したので、シェアします！

Speech Bubbleというプラグインでもカンタンに「吹き出し」は使えたので使っていた方も多いと思いますが、2018年に開発が終わってしまったんですよね。
他にも複数のプラグインはあるものの、色々な機能やデザイン（CSS）を多く読み込むため、サイトの表示速度が落ちるので実質使えないと思っています。

そんな経緯もありましたが、やっぱり使いたい時は来るもので、今回クライアントさんにもカンタンに使ってもらえるように「吹き出しショートコード」を作成することにしました！

STEP

テーマのfunctions.phpを編集

まず、ショートコードの定義をします。
functions.phpに次のコードをコピペします。
※function.phpを編集する時は、必ずアップロードの前に必ずバックアップをしてください！

functions.phpはご使用のテーマフォルダ内にもあります。
テーマを触れない人はCode Snippetsというプラグインを入れて編集しましょう。

//LINE風吹き出しショートコード
function speech_init( $atts, $content = null ) {
 extract( shortcode_atts( array(
	'color' => '#EFEFEF',
	'icon' => get_stylesheet_directory_uri() .'/images/'. 'speech-default.png',
	'name' => ''
	), $atts ) );
	return '<div class="speech"><div class="icon"><img src="' . $icon . '" alt="' . $name. '" /><span>' . $name. '</span></div><div style="border-color:' . $color. ';background-color: ' . $color. ';" class="ball"><p>' . $content . '</p></div></div>';
	}
 add_shortcode('speech', 'speech_init');

STEP

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

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

[speech color="red" name="キャラ名" icon="icon.jpg"]セリフを入れる[/speech]

属性は、color、name、iconの3種類。

colorは、吹き出しの背景色をCSSカラーで指定できるようにしました。
例）青にする場合は”blue”または16進数で”#0000FF”と指定します。
カラーコードを探すおすすめサイトは色の名前とカラーコードが一目でわかるWEB色見本さんです。

デフォルトはLINE同様に吹き出しの色は、[ #efefef ] にしています。
そのままがいい場合は、color指定を無くしてください。

nameは、喋っている人のアイコンの「名前」を入力します。指定しない場合、名前は表示されないようになっています。

iconは、アイコンに指定したいの画像URLを入力します。
指定しない場合、デフォルト画像が表示されます。
テーマフォルダの下記の場所にデフォルト画像を置いておくと、指定なしで表示されます。

テーマフォルダ/images/speech-default.png

※アイコンサイズは、幅・高さともに200～300px程度の正方形の画像がおすすめです。

デフォルト画像以外に複数のキャラクターを使いたい場合は、あらかじめ「メディア」にアップロードしておいて、その画像のURLをiconに入力して使います。

[speech color="red" name="キャラ名" icon="ここに画像のURLを入れる"]セリフを入れる[/speech]

アップした画像のURLは「メディア＞ライブラリ」で確認できます。
[ ファイルのURL ] の箇所に記載してあるパス（URL）をコピーして、上記の [ ここに画像のURLを入れる ] のところに貼り付けて使用してください。

実際に、サイト上に表示される吹き出し

出力されるHTML

吹き出しショートコードを管理画面から挿入すると、サイト上のHTMLはこのように出力されます。

<div class="speechballoon">
  <div class="icon">
      <img src="画像URL" alt="名前">
      <span>名前</span>
  </div>
  <div style="border-color:#eeeeee;background-color: #eeeeee;" class="ball">
      <p>ここにセリフを入れます</p>
  </div>
</div>

見た目を整えるためのSCSS

SCSS

.speechballoon {
  margin: 2em 0;
  &::after {
    display: table;
    clear: both;
    content: '';
  }
  .ball {
    display: inline-block;
    position: relative;
    margin-left: 2rem;
    max-width: calc(100% - 7rem);
    background-color: #eee;
    border-color: #eee;
    border-radius: 10px;
    padding: 7px 15px;
    @media screen and (min-width: 768px) {
      margin-left: 20px;
      max-width: calc(100% - 100px);
      padding: 15px;
    }
    p{
      &:last-child{
        margin-bottom: 0;
      }
    }
  }
  .ball::after {
    right: 100%;
    top: 30px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-right-color: inherit;
    border-width: 10px 15px;
    margin-top: -10px;
  }
  .icon {
    float: left;
    width: 5rem;
    @media screen and (min-width: 768px) {
      width: 80px;
    }
  }
  .icon > img {
    max-width: 100%;
    border-radius: 50%;
    margin-bottom: 0;
  }
  .icon > span {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.9rem;
    @media screen and (min-width: 768px) {
      font-size: 12px;
    }
  }
}

CSSの知識があれば、ぜひオリジナルデザインも作成してみてくださいね！
アレンジやカスタマイズをご希望の方は、お気軽にご連絡ください。

AddQuicktagなどのプラグインでショートコードを登録してけば簡単に利用できますし、使用頻度も増えそうですね。

URLをコピーしました！

この記事を書いた人

今田紋奈

埼玉県川口市で、自営業や起業家のホームページ制作を行っいます。
Web制作会社に7年務めたのち独立。Web制作歴12年、2500件以上のサイト制作に携わり、WordPressサイトを得意とし「作って終わり」にしない、結果が出るサイトであることを大切にしてます。「10人いれば10通りの最適なサイトがある」という信念のもと、型にハマったサイトづくりではなく、マーケティングから考えた、その人のビジネスにとって一番最適なサイトをご提案。技術面で不安のあるWebデザイナーのシステム面のサポートも行っております。