【WordPress】超簡単 記事内に吹き出し会話を挿入してみました

こんな感じで、WordPresの記事に吹き出し会話を作成してみました。

WordPress記事での吹き出し会話

以前から度々見かけて実装してみたいと思っていた吹き出し形式のコンテンツ。
調べてみると、専用プラグインとして、以下「Speech bubble (ふきだしプラグイン)」が定番のようですが、
・最終更新が2年前であることが懸念点、
・できればブラグインを使わずに済ませたいという点
でインストールを躊躇、
ja.wordpress.org

そんな中、プラグインなしで実現可能との方法をご紹介いただいている以下記事を発見。
thk.kanzae.net

吹き出し会話挿入用コード

この機能の実現には、以下のコードを追記します。

《functions.php》
以下コードを追記

/*------------------------------------------------------------
 吹き出し挿入用
-------------------------------------------------------------*/
// 左からの吹き出し
add_shortcode( 'baloon-line-left', function( $atts, $content = null ) {
	$before = '<div class="balloon"><div class="balloon-img-left">';

	if( isset( $atts['img'] ) ) {
		$before .= '<figure><img src="' . $atts['img'] . '" width="60" height="60" alt="';
		$before .= isset( $atts['caption'] ) ? $atts['caption'] : '';
		$before .= '" /></figure>';
	}
	if( isset( $atts['caption'] ) ) {
		$before .= '<span class="balloon-img-caption">' . $atts['caption'] .'</span>';
	}

	$before .= '</div><div class="balloon-left-line">';

	$after = '</div></div>';

	return $before . $content . $after;
});

// 右からの吹き出し
add_shortcode( 'baloon-line-right', function( $atts, $content = null ) {
	$before = '<div class="balloon"><div class="balloon-img-right">';

	if( isset( $atts['img'] ) ) {
		$before .= '<figure><img src="' . $atts['img'] . '" width="60" height="60" alt="';
		$before .= isset( $atts['caption'] ) ? $atts['caption'] : '';
		$before .= '" /></figure>';
	}
	if( isset( $atts['caption'] ) ) {
		$before .= '<span class="balloon-img-caption">' . $atts['caption'] .'</span>';
	}

	$before .= '</div><div class="balloon-right-line">';

	$after = '</div></div>';

	return $before . $content . $after;
});

《css》
以下cssで吹き出し箇所にスタイルを設定します(好みに応じて適宜変更)

/*------------------------------------------------------------
 吹き出し用スタイル
-------------------------------------------------------------*/
.balloon {
	margin-bottom: 40px;
}
.balloon figure {
	width: 60px;
	height: 60px;
}
.balloon-img-left {
	float: left;
}
.balloon-img-right {
	float: right;
}
.balloon-img-left figure {
	margin: 0 auto 0 0;
}
.balloon-img-right figure {
	margin: 0 0 0 auto;
}
.balloon img {
	width: 100%;
	height: 100%;
	margin: 0;
}
.balloon-img-caption {
	padding: 5px 0 0;
	white-space: nowrap;
	font-size: 12px;
}
div[class^="balloon-"] {
	padding: 10px;
	position: relative;
	border-radius: 12px;
}
div[class^="balloon-img"] {
	padding: 0;
	text-align: center;
}
div[class^="balloon-left"] {
	margin-left: 80px;
}
div[class^="balloon-right"] {
	margin-right: 80px;
}
.balloon p {
	margin: 0 0 20px;
}
.balloon p:last-child {
	margin-bottom: 0;
}
div[class^="balloon-left-"]::before,
div[class^="balloon-right-"]::before,
div[class^="balloon-left-"]::after,
div[class^="balloon-right-"]::after {
	position: absolute;
	content: '';
	border: 10px solid transparent;
	top: 12px;
}
div[class^="balloon-left-"]::before,
div[class^="balloon-left-"]::after {
	left: -20px;
}
div[class^="balloon-right-"]::before,
div[class^="balloon-right-"]::after {
	right: -20px;
}
div.balloon::after, div.balloon::before {
	clear: both;
	content: '';
	display: block;
}

/* 吹き出しの背景色 (左) */
div.balloon-left-line {
	background: #e4e8eb;
}
div.balloon-left-line::before,
div.balloon-left-line::after {
	border-right: 12px solid #e4e8eb;
}

/* 吹き出しの背景色 (右) */
div.balloon-right-line {
	background: #bef18c;
}
div.balloon-right-line::before,
div.balloon-right-line::after {
	border-left: 12px solid #bef18c;
}

《記事内での挿入方法》
挿入したい場所には、以下要領でショートコードを設定します。

[baloon-line-left img="左画像URL" caption="左画像下文字"]人物Aのコメント内容[/baloon-line-left]

[baloon-line-right img="右画像URL" caption="右画像下文字"]人物Bのコメント内容[/baloon-line-right]

「これはありがたい！」と早速試してみたところ、見事、ほぼ期待通りの吹き出しが！
これで、晴れてLINEやFacebookメッセンジャーのような吹き出し会話が記事内に挿入できました。

Demo

上記コードを挿入するだけで、プラグインなしでもらくらく吹き出しが挿入できます。
ぜひお試しあれ。

【参考記事】
WordPress でライン風の吹き出しを作るショートコード（プラグインなし） | Thought is free :
https://thk.kanzae.net/net/wordpress/t6908/