Lognote

整体師によるお役立ち情報ブログ

affinger4-hukidashi-thumbnail

WordPressでショートコードから会話風ふきだしを呼び出して表示させる方法

2017-03-22

昨年12月、AFFINGER4に会話風ふきだし機能が追加されました。

affinger4-hukidashi-01

これ、使い勝手良さそう!

ただ、ふきだしのためだけにAFFINGER4に移行するのはリスクも高いし、また一からカスタマイズし直すのはさすがに気が重く躊躇していました。

それに、AFFINGER4じゃなくても今使っているテーマで同じようにふきだしが使えたらそれに越したことはないですよね?

WordPressなら「Speech bubble」というプラグインもありますが、なるべくプラグインは使わずにつけられないかといろいろ調べて、ショードコードを使って呼び出す方法で簡単に実装できるということがわかりました。

この方法だと、クイックタグをあらかじめ登録しておくことで、記事内の好きなところに自由に使うこともできます。

ふきだしごとにHTMLコードを入力する必要もなくなるので、記事も煩雑にならないというメリットもあります。

最終完成イメージ

この記事で紹介するカスタマイズの完成イメージです。

見た目はほぼAFFINGER4と同じです。

ヤマカワ
このようなふきだしが記事内どこにでも自由に配置できます

AFFINGER4では数に制限がありますが、何人でも好きなだけ登録できます(10人でも100人でもOK!)
CSSでふきだしの色も自由に変更できます

カスタマイズの手順

カスタマイズは以下の手順でおこないます。

  • functions.phpにショートコードを作成
  • デザイン用CSSを記述
  • オリジナルクイックタグを追加

functions.phpにショートコードを作成

それでは、実際にカスタマイズをおこなっていきます。

まず、下記のPHPコードをfunctions.phpに追記してください。

//会話風ふきだしショートコード
function kaiwasc1Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon1 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa1', 'kaiwasc1Func');

アイコンURLに表示したい人物の画像URLを指定します。CSSで60pxの正方形で表示するので、最低でも60px以上の画像を指定してください。

アイコンの名前はアイコンの下に小さく表示される名前です。

会話アイコンを2人、3人と増やしたい場合は、上記コードをそのままコピペすればOKです。

例えば3人分作りたいときは、

//会話風ふきだしショートコード
function kaiwasc1Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon1 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa1', 'kaiwasc1Func');

function kaiwasc2Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon2 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa2', 'kaiwasc2Func');

function kaiwasc3Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon3 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa3', 'kaiwasc3Func');

このように、2行目のkaiwasc1Func、3行目のkaiwaicon1、6行目のkaiwa1kaiwasc1Funcも数字部分をコピーした数に合わせて変更してください。

また、ふきだしの色やデザインは3行目のkaiwaicon1のセレクタで指定します。

デザイン用CSSを記述

次にデザインを加えます。

共通部分に下記のCSSを追記してください。

/*--------------------------------------
会話風ふきだしデザイン
--------------------------------------*/
.kaiwa-box {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display:table;
}

.kaiwa-face {
    text-align:center;
    display: table-cell;
    width:60px;
    vertical-align:middle;
}

.kaiwa-face img{
    border-radius: 60px;
    border: 1px solid #ccc;
    margin-bottom:5px;
}

.kaiwa-face-name {
    color: #333333;
    font-size:70%;
    line-height:1.5;
    max-width:60px;
}

.kaiwa-area {
    display: table-cell;
    margin:0;
    vertical-align:middle;
    text-align:left;
}

.kaiwa-hukidashi {
    display: inline-block;
    padding: 15px 20px;
    margin-left: 20px;
    border-radius: 7px;
    position: relative;
    background-color: #f9f9f9;
}

.post .kaiwa-hukidashi p:last-child {
     margin-bottom:0px;
}

.kaiwa-hukidashi:after {
    content: "";
    position: absolute;
    top: 50%; left: -10px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #f9f9f9 transparent transparent;
}

.kaiwaicon1 .kaiwa-hukidashi:after { border-color: transparent #ddeeff transparent transparent; }
.kaiwaicon1 .kaiwa-hukidashi {  color: #333333; background-color: #ddeeff; }

.kaiwaicon2 .kaiwa-hukidashi:after { border-color: transparent #ECF8E0 transparent transparent; }
.kaiwaicon2 .kaiwa-hukidashi {  color: #333333; background-color: #ECF8E0; }

.kaiwaicon3 .kaiwa-hukidashi:after { border-color: transparent #F8E0E0 transparent transparent; }
.kaiwaicon3 .kaiwa-hukidashi {  color: #333333; background-color: #F8E0E0; }

複数のふきだしを作る場合は、64行目、65行目の.kaiwaicon1.kaiwaicon2.kaiwaicon3のように増やして背景色や文字色を変更してください。

あとは記事編集画面でこのように記述するだけです。

affinger4-hukidashi-02

オリジナルクイックタグを追加

ここまでで会話風ふきだしの実装はできましたが、毎回ショートコードを手打ちするのは面倒ですよね?

そこで、投稿ページにオリジナルのクイックタグを追加します。

下記のPHPコードをfunctions.phpに追記してください。

if (!function_exists('add_orignal_quicktags')) {
//オリジナルクイックタグ登録
    function add_orignal_quicktags() {
        if ( wp_script_is( 'quicktags' ) ) { ?>
            <script type="text/javascript">
                QTags.addButton('ed_kaiwa1', '会話風吹き出し1', '[kaiwa1]', '[/kaiwa1]');
                QTags.addButton('ed_kaiwa2', '会話風吹き出し2', '[kaiwa2]', '[/kaiwa2]');
                QTags.addButton('ed_kaiwa3', '会話風吹き出し3', '[kaiwa3]', '[/kaiwa3]');
            </script>
            <?php
        }
    }
}
add_action('admin_print_footer_scripts', 'add_orignal_quicktags');

これでワンクリックでふきだしが設置できるようになります。

affinger4-hukidashi-03

横顔シルエットフリー素材ダウンロードリンク

今回使わせていただいたシルエットフリー素材を紹介します。

■男性シルエット

affinger4-hukidashi-04

■女性シルエット

affinger4-hukidashi-05

■子供シルエット

affinger4-hukidashi-06

ふきだしと顔の向きが左右逆なので、画像編集ソフトで反転させて使いましょう。

オススメ商品はこちら!

-WordPress
-

ヤマカワ (@lognotebiz) のヒトコト
記事内のちょっとしたアクセントとしてふきだしは便利ですね!実店舗ブログならお客様との会話や口コミページでも使えますよ!
この記事のタイトルとURLをコピーする
WordPressでショートコードから会話風ふきだしを呼び出して表示させる方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

instagram-bug-cause-tw-autolink-thumbnail

Instagramの埋め込みが表示されないバグは「@マークでTwitterの自動リンクを作る」のコードが原因だった

WordPressではfunctions.phpにコードを追加することでさまざまな便利な機能を使えるようになります。 その中のひとつとして、記事内に@(Twit …

mts-simple-booking-c-fatal-error-thumbnail

「MTS Simple Booking-C」のフェイタルエラー解決方法

Web予約カレンダーを設置するプラグイン「MTS Simple Booking-C」にフェイタルエラーが出てしまいました。 まず、このように管理画面の一番上に一 …

advanced-code-editor-thumbnail

テーマ編集で行数を表示するWordPressプラグイン「Advanced Code Editor」

WordPress内でテーマを編集するとき行数表示がなくて不便だなと感じることはないでしょうか。今日はそんな悩みを解決してくれるWordpressプラグインのご …

xserver-morisawa-thumbnail

超美麗!無料で日本語のWebフォントが使えるエックスサーバーの新機能が凄すぎた!

無料SSLサービスに引き続き、エックスサーバーがまたやってくれました! なんと、あの有名な日本語Webフォントのモリサワフォントを無料でWebサイトに利用できる …

custom-field-affiliate-banner-thumbnail

カスタムフィールドで記事毎にアフィリエイト広告を貼り替える方法

今回はWordPressのカスタムフィールドを活用して記事下の広告エリアをカスタマイズする方法を紹介します。 目次1 カスタマイズの経緯1.1 カスタムフィール …


コメントをどうぞ

lognote
2017/5/09
コメントありがとうございます。 本当にそうですよね。 通販サイトは、相手の顔が見えない分信頼第一で成り立っているので、Amazonにはマーケットプレイスの管理をしっかりやっていただきたいで...
匿名探偵
2017/5/09
ここ最近のamazonはちょっとヤバいですね。 4,5000円が相場で微小の変動しかしていなかった市場に、今年度に入って急に1000円切った値で断続的に出品するなど、異常な出品者が様々な商品に出没し...

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士