Cocoonの吹き出しをショートコードで表示する方法【WordPress】

WordPressテーマ、Cocoonの便利な機能の1つとして、吹き出しデザインが内蔵されていることが挙げられます。

しかしこちらの吹き出し機能は、画像毎に管理画面から追加の設定を行う必要があります。

なので、例えば記事毎に使用したい吹き出し用画像が異なる場合は、毎回設定するのは正直面倒ですよね。
また、同じ画像でも位置やデザインを変えたい場合も個別で作らなくてはいけません。

なので今回は、画像のurlを設定するだけで吹き出しデザインとして表示させるショートコードを作成しました。

[myspeech src="https://kinocolog.com/wp-content/uploads/2019/10/kinococo.png" name="のちょう"]
こんな風にね。
[/myspeech]

ビジュアルエディタを介さず、テキストエディタのみで吹き出しデザインを追加できるので、テキストエディタ主体で記事を書かれている方は特に便利です。

吹き出しデザインのショートコードをfunctions.phpに追加するだけで完成

まずは、WordPressのショートコードを追加するために、テーマのfunctions.phpに記述を追加する必要があります。

下記のソースコードを、ご利用のテーマの「functions.php」の末尾に追記してください。

function mySpeechBalloonSC($attr, $content = null){
	// style stn=デフォルト flat=フラット line=LINE風 think=心の声
	// pos l=左 r=右
	// icon cb=丸（枠線あり） cn=丸（枠線なし） sb=四角（枠線あり） sn=四角（枠線なし）
	
	//デフォルト値
	$style = 'stn';
	$pos = 'l';
	$icon = 'cb';
	$name = '';
	$src = '';
	
	if(isset($attr['style'])) $style = $attr['style'];
	if(isset($attr['pos'])) $pos = $attr['pos'];
	if(isset($attr['icon'])) $icon = $attr['icon'];
	if(isset($attr['name'])) $name = $attr['name'];
	if(isset($attr['src'])) $src = $attr['src'];
	
	//囲みショートコードの自動改行対策
	$content = str_replace(['<p>', '<br />', '<br>'], '', $content);
	$content = str_replace('</p>', "\n", $content);	
	$content = preg_replace("/^\n/s", "", $content);
	$content = preg_replace("/\n$/s", "", $content);
	
	$html = '';
	$html .= '<div class="speech-wrap sbs-'.$style.' sbp-'.$pos.' sbis-'.$icon.' cf">';
	$html .= '<div class="speech-person">';
	$html .= '<figure class="speech-icon"><img src="'.$src.'" alt="'.$name.'" class="speech-icon-image"></figure>';
	if($name){
		$html .= '<div class="speech-name">'.$name.'</div>';
	}
	$html .= '</div>';
	$html .= '<div class="speech-balloon">'.wpautop($content).'</div>';
	$html .= '</div>';
	return $html;
}
add_shortcode('myspeech', 'mySpeechBalloonSC');

ブラウザから修正をする場合は、下記の手順で行えます。

• ダッシュボードを開く
• 外観⇒テーマエディター
• 右のテーマファイルの「テーマのための関数（functions.php）」をクリック
• 末尾に上記のソースコードをコピー
• 「ファイルを更新」ボタンをクリック

ショートコード実行デモ

デザインなどは元々Cocoonで導入されているので、修正はfunctions.phpの追記だけで終了です。

後はエディタで下記のようにショートコードを書き込むだけで、吹き出しデザインが表示されます。

[myspeech src="画像URL"]テキスト[/myspeech]

実際にショートコードを実行してみた実行例はこちら。

[myspeech src="https://kinocolog.com/wp-content/uploads/2019/10/kinococo.png"]
こちらが吹き出しデザインです。
[/myspeech]

発言者に名前を付けたい場合はname=”名前”を追記するだけでOKです。

[myspeech src="https://kinocolog.com/wp-content/uploads/2019/10/kinococo.png" name="のちょう"]
名前を付けたバージョンです。
[/myspeech]

既にご存知だと思いますが、画像のURLはメディアから確認できます。

デザイン・配置変更オプション

吹き出しデザインは固定ではなく、いくつかの種類から選べるようになっています。

ショートコードでそれらのデザインや配置を任意のものにカスタマイズしたい場合は、各種属性を追記することで対応できます。

style	stn	デフォルト（初期値）
	flat	フラット
	line	LINE風
	think	心の声
pos	l	左位置（初期値）
	r	右位置
icon	cb	丸-枠有（初期値）
	cn	丸-枠無
	sb	四角-枠有
	sb	四角-枠無

「LINE風・四角アイコン・右から喋る」という風にカスタマイズを行いたい場合のソースコードです。

[myspeech src="https://kinocolog.com/wp-content/uploads/2019/10/kinococo.png" style="line" pos="r" icon="sb"]
明日の予定はどう？
こっちは13時から空いてるよ。
[/myspeech]

記事の演出に合わせていろいろ組み合わせが可能です。

---

Cocoonで吹き出しデザインを大量に扱う方はとても便利だと思うので、是非ご活用ください。

以上、Cocoonの吹き出しをショートコードで表示する方法、でした。