【WordPress】会話風の吹き出しを挿入するツールボタンを自作してみた

2017年6月6日みやびテクノロジー, プログラミング

みやびです。最近は相変わらずPHPの勉強をやりつつ、社長と一緒に新しいブログへの移設やデザイン補修を行っていました。そして昨日の帰り際、社長から新しい要求が降ってまいりました。「WordPressで会話風の吹き出しを入れたい。なるべく簡単に。任せるよ。」

プラグインを使わずに自作する

吹き出しを挿入するプラグインとして有名なものとして「Speech Bubble」が挙げられますが、ざっと見たところ、あまりワクワクしなかったのと、これくらい自分でサクっと実装できなきゃね！ってことで、勉強がてら自分で作ってみることにしました。

とは言ったものの、WordPress標準搭載のビジュアルエディタ「Tiny-MCE」をカスタマイズした経験は皆無なので、そこから勉強開始です。

仕方ない。いっちょやってやりますか！

みやびのせるのチョロいわー！

まずは計画を立てる

タイトルの通り、今回の目標は「WordPressで誰でも簡単に記事内に吹き出しを挿入できるような仕組みを実装すること」です。

完成までの道のりをイメージする

これを具体的な機能に落とし込むと、

WordPressの記事編集画面にて、ツールバーにアイコンを追加する
追加したアイコンをクリックすると、ビジュアルエディタに吹き出しが挿入される
吹き出しの人物（画像）をメディアライブラリから自由に変更できる
吹き出し内の会話を自由に編集できる

となります。この4ステップであればWordPress初心者でも簡単に使うことができますね。

どの言語を使用するのか？

こちらが自由に決められるものではありませんが、念のため。

吹き出しデザイン：HTML・CSS
Tiny-MCEの自作ブラグイン：JavaScript
WordPressへの組み込みと認識：PHP

WordPressで何か新しい機能を実装しようとする場合には、基本的に上述した言語をある程度理解していれば自作・カスタマイズすることが可能です。

実際に作業する順番についてもこれと同様です。

実際に作ってみる！（全コード公開）

前置きが長くなってしまいそうなので、実際に作成して、このブログでも動いているコード・プログラムを公開します。

1. HTMLとCSSで吹き出しイメージを具現化する

まずはHTMLとCSSを使って実際に表示されるイメージ（コード・デザイン）を描写してみます。

HTML

<!-- 左画像/右吹き出し -->
<table class="balloon-left">
<tbody>
<tr>
<td>thumbnail</td>
<td><div class="inner-balloon inner-balloon-left"><p>talk</p></div></td>
</tr>
</tbody>
</table>

<!-- 右画像/左吹き出し -->
<table class="balloon-right">
<tbody>
<tr>
<td><div class="inner-balloon inner-balloon-right"><p>talk</p></div></td>
<td>thumbnail</td>
</tr>
</tbody>
</table>

<tbody>

<tr>

<td>thumbnail</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td>thumbnail</td>

</tr>

</tbody>

</table>

CSS

/* BALLOON COMMON */
div.inner-balloon {
	background: #EEE;
	border-radius: 16px;
	min-height: 80px;
	height: 100%;
	position: relative;
}
div.inner-balloon p {
	margin-bottom: 0;
	padding: 10px 15px;
	min-height: 80px;
	font-size: 14px;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
}

/* BALLOON LEFT */
table.balloon-left {
	display: table;
	margin: 2em 0;
	border: none;
}
table.balloon-left td {
	display: table-cell;
	padding: 0;
	border: none;
}
table.balloon-left td:nth-child(1) {
	width: 20%;
	min-height: 80px;
	text-align: center;
	vertical-align: middle;
}
table.balloon-left td:nth-child(2) {
	width: 80%;
	min-height: 80px;
	padding-left: 20px;
}
table.balloon-left td:nth-child(1) img {
	width: 100%;
	max-width: 80px !important;
	max-height: 80px;
	border-radius: 200px;
}
div.inner-balloon-left {
	margin-right: .5em;
	box-shadow: 2px 2px 6px 0px #DDD;
}
div.inner-balloon-left:after {
	content: '';
	border-right: 14px solid #EEE;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-top: -10px;
	position: absolute;
	left: -14px;
	top: 50%;
}

/* BALLOON RIGHT */
table.balloon-right {
	display: table;
	margin: 2em 0;
	border: none;
}
table.balloon-right td {
	display: table-cell;
	padding: 0;
	border: none;
}
table.balloon-right td:nth-child(2) {
	width: 20%;
	min-height: 80px;
	text-align: center;
	vertical-align: middle;
}
table.balloon-right td:nth-child(1) {
	width: 80%;
	min-height: 80px;
	padding-right: 20px;
}
table.balloon-right td:nth-child(2) img {
	width: 100%;
	max-width: 80px !important;
	max-height: 80px;
	border-radius: 200px;
}
div.inner-balloon-right {
	margin-left: .5em;
	box-shadow: -2px 2px 6px 0px #DDD;
}
div.inner-balloon-right:after {
	content: '';
	border-left: 14px solid #EEE;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-top: -10px;
	position: absolute;
	right: -14px;
	top: 50%;
}
/* END OF BALLOON CSS */

100

101

102

103

104

105

/* BALLOON COMMON */

div.inner-balloon {

background: #EEE;

border-radius: 16px;

min-height: 80px;

height: 100%;

position: relative;

}

div.inner-balloon p {

margin-bottom: 0;

padding: 10px 15px;

min-height: 80px;

font-size: 14px;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

}

/* BALLOON LEFT */

table.balloon-left {

display: table;

margin: 2em 0;

border: none;

}

table.balloon-left td {

display: table-cell;

padding: 0;

border: none;

}

table.balloon-left td:nth-child(1) {

width: 20%;

min-height: 80px;

text-align: center;

vertical-align: middle;

}

table.balloon-left td:nth-child(2) {

width: 80%;

min-height: 80px;

padding-left: 20px;

}

table.balloon-left td:nth-child(1) img {

width: 100%;

max-width: 80px !important;

max-height: 80px;

border-radius: 200px;

}

div.inner-balloon-left {

margin-right: .5em;

box-shadow: 2px 2px 6px 0px #DDD;

}

div.inner-balloon-left:after {

content: '';

border-right: 14px solid #EEE;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

margin-top: -10px;

position: absolute;

left: -14px;

top: 50%;

}

/* BALLOON RIGHT */

table.balloon-right {

display: table;

margin: 2em 0;

border: none;

}

table.balloon-right td {

display: table-cell;

padding: 0;

border: none;

}

table.balloon-right td:nth-child(2) {

width: 20%;

min-height: 80px;

text-align: center;

vertical-align: middle;

}

table.balloon-right td:nth-child(1) {

width: 80%;

min-height: 80px;

padding-right: 20px;

}

table.balloon-right td:nth-child(2) img {

width: 100%;

max-width: 80px !important;

max-height: 80px;

border-radius: 200px;

}

div.inner-balloon-right {

margin-left: .5em;

box-shadow: -2px 2px 6px 0px #DDD;

}

div.inner-balloon-right:after {

content: '';

border-left: 14px solid #EEE;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

margin-top: -10px;

position: absolute;

right: -14px;

top: 50%;

}

/* END OF BALLOON CSS */

結果

▼左画像/右吹き出し

thumbnail

talk

▼右画像/左吹き出し

talk

thumbnail

▼編集画面上はこんな感じになってます。

miyabi_plog_balloon_in_editor

（全く同じ内容のCSSをエディタに読み込ませています。方法については後述します。）

いやはや、もうちょっとCSSがきれいに書けるといいなぁと思うのですが、ボタンクリックで出力されるHTMLを最小限にしたかった（後からテキストモードでスタイルをいじりたい人が少しでも分かりやすいように…）という言い訳をしておきます笑

上記CSSでは:nth-child()を使っていますが、それぞれクラスをつけても全然問題ないです。

余談ですが、これを書く前に考えていることはこんな感じ。

左に画像、右に吹き出しが基本かな？
会話になると左右反転バージョンも作らなきゃいけない？
会話内容が10文字でも1000文字でも崩れないようにしなきゃ
画像と吹き出しの割合はどのくらいにしようかな？
スマホで見たときは吹き出しは画像の下？それともそのまま横？
floatかinline-blockかtableか。上下中央ならvertical middleか。flexでalign-itemsそろそろ使いたいなぁ。
etc…

みたいなことが頭の中でごちゃごちゃーっと出てきますが、ひとつずつルールを決定していけば自然と使うべきCSSも見えてきます。

2. Tiny-MCE用の自作プラグインをJavaScriptを書く

この手の情報は海外サイトの方が充実しているので、まずは英語検索しながら苦手なJavaScript周りを1時間ほど見て回りました。

使用しているテーマディレクトリ（wp-content/themes/テーマ名/）の下に新しくディレクトリを作成し（ここではcustom_tiny_mceとしています）、その中に新しくJavaScriptファイルを作成します（ここでは例にならってeditor_plugin.jsとしています）。

また、ツールバーに追加したいアイコン画像はICOOOON MONOなどで入手し、上で作成したcustom_tiny_mceディレクトリ内のJSファイルと同階層に置いてください。

editor_plugin.js

(function(){
	tinymce.create('tinymce.plugins.insertBalloon',{
		init: function(ed, url){
			/******************************
			// BALLOON LEFT
			******************************/
			ed.addCommand('balloon_left_cmd', function(){
				var balloonLeftHtml = '<table class="balloon-left">'
									+ '<tbody>'
									+ '<tr>'
									+ '<td>thumbnail</td>'
									+ '<td><div class="inner-balloon inner-balloon-left"><p>talk</p></div></td>'
									+ '</tr>'
									+ '</tbody>'
									+ '</table>';

				ed.execCommand("mceInsertContent", false, balloonLeftHtml);
			});
			
			ed.addButton('balloon_left',{
				cmd: 'balloon_left_cmd',
				title: '左から吹き出し',
				image: url + '/balloon-left.png'
			});

			/******************************
			// BALLOON RIGHT
			******************************/
			ed.addCommand('balloon_right_cmd', function(){
				var balloonRightHtml = '<table class="balloon-right">'
									 + '<tbody>'
									 + '<tr>'
									 + '<td><div class="inner-balloon inner-balloon-right"><p>talk</p></div></td>'
									 + '<td>thumbnail</td>'
									 + '</tr>'
									 + '</tbody>'
									 + '</table>';
				ed.execCommand("mceInsertContent", false, balloonRightHtml);
			});
			
			ed.addButton('balloon_right',{
				cmd: 'balloon_right_cmd',
				title: '右から吹き出し',
				image: url + '/balloon-right.png'
			});

		},

		/******************************
		// AUTHOR INFO
		******************************/
		getInfo: function(){
			return{
				longname: 'PLOG Custom Buttons',
				author: 'Masahiro MIYABI Kato',
				authorurl: 'https://plan-ltd.co.jp/miyabi',
				infourl: 'https://plan-ltd.co.jp/plog/',
				version: "1.0"
			};
		}
	});

	tinymce.PluginManager.add('insertBalloon', tinymce.plugins.insertBalloon);

})();

(function(){

tinymce.create('tinymce.plugins.insertBalloon',{

init: function(ed, url){

/******************************

// BALLOON LEFT

******************************/

ed.addCommand('balloon_left_cmd', function(){

var balloonLeftHtml = '<table class="balloon-left">'

+ '<tbody>'

+ '<tr>'

+ '<td>thumbnail</td>'

+ '<td><div class="inner-balloon inner-balloon-left"><p>talk</p></div></td>'

+ '</tr>'

+ '</tbody>'

+ '</table>';

ed.execCommand("mceInsertContent", false, balloonLeftHtml);

});

ed.addButton('balloon_left',{

cmd: 'balloon_left_cmd',

title: '左から吹き出し',

image: url + '/balloon-left.png'

});

/******************************

// BALLOON RIGHT

******************************/

ed.addCommand('balloon_right_cmd', function(){

var balloonRightHtml = '<table class="balloon-right">'

+ '<tbody>'

+ '<tr>'

+ '<td><div class="inner-balloon inner-balloon-right"><p>talk</p></div></td>'

+ '<td>thumbnail</td>'

+ '</tr>'

+ '</tbody>'

+ '</table>';

ed.execCommand("mceInsertContent", false, balloonRightHtml);

});

ed.addButton('balloon_right',{

cmd: 'balloon_right_cmd',

title: '右から吹き出し',

image: url + '/balloon-right.png'

});

/******************************

// AUTHOR INFO

******************************/

getInfo: function(){

return{

longname: 'PLOG Custom Buttons',

author: 'Masahiro MIYABI Kato',

authorurl: 'https://plan-ltd.co.jp/miyabi',

infourl: 'https://plan-ltd.co.jp/plog/',

version: "1.0"

};

}

});

tinymce.PluginManager.add('insertBalloon', tinymce.plugins.insertBalloon);

})();

Tiny-MCEの自作プラグインを作成する方法やテンプレート書式なんかは公式サイトにちょこっと記載されています。が、見つけるのも困難な上に理解するのが大変すぎるので、もう少し何とかしてもらいたい…。

上のコードの解説ですが、基本的にプラグイン作成に必要なプログラムはTiny-MCEが提供しているものに準拠する必要があります。

ここではその一部を使用していますが、基本的な流れは、

init: function(ed, url)において、edに現在のエディタ情報、urlにこのjsファイルまでのパスが格納されています。

tinymce.create(‘tinymce.plugins.任意のプラグイン名’,{ にてプラグイン名を決定し、
ed.addCommand(‘任意のコマンド名’, function(){ にてコマンド名を設定し、
ed.execCommand(‘mceInsertContent’, false, ‘出力する要素’); にて実行コマンドを指定し、
ed.addButton(‘任意のボタン名’,{ にてツールバーに追加するボタンを指定します。

ざっくりかよ！！

項目3の種類がいくつかあり、期待するアクションに合わせたものを使用します。

これだけではよく分からないと思いますが、全部コピペしてから自分でいろいろいじってみたらだいたい理解できると思います。

3. WordPressに反映させる

WordPressに反映させるためには、使用しているテーマのfunctions.phpに追記します。

functions.php

function register_button_balloon($buttons){
	$buttons[] = 'balloon_left';
	$buttons[] = 'balloon_right';
	return $buttons;
}
add_filter('mce_buttons', 'register_button_balloon');

function register_button_balloon($buttons){

$buttons[] = 'balloon_left';

$buttons[] = 'balloon_right';

return $buttons;

}

add_filter('mce_buttons', 'register_button_balloon');

これも基本のフィルターフックですが、$buttons配列に先ほどed.addButtonで命名・作成したballoon_leftとballoon_rightをmce_buttonsに追加しています。

余談ですが、mce_buttonsの他にmce_buttons_1、mce_buttons_2、mce_buttons_3、mce_buttons_4も利用でき、それぞれツールバーの何行目に表示したいかを表しています。

ここまでの工程が完了したら、記事編集画面を開いてみてください。念のためスーパーリロードで。

正常に完了していればツールバーにボタンが追加されているはずです。

↓これね（笑）

balloon-left 　 balloon-right

4. CSSをエディタに適用させる

これはオプションですが、今回の吹き出しコードにはテーブルタグを使用しており、デフォルトだとビジュアルモードで見づらいです。

同様のCSSを反映させたい場合には、対象のCSSコードのみを切り取って新しくファイルを作成（ここでは例にならってeditor-style.cssとします）し、テーマファイルのCSSディレクトリ直下にアップロードしたのち、functions.phpに以下のコードを記載してください。

editor-style.css

add_editor_style('css/editor-style.css');

1	add_editor_style('css/editor-style.css');

これでリロードをかければ、記事編集画面のビジュアルモードにてCSSが反映されるので見やすくなります。

作成した吹き出しの使い方

冒頭の「完成までの道のりをイメージする」に記載した通り、

WordPressの記事編集画面にて、ツールバーにアイコンを追加する
追加したアイコンをクリックすると、ビジュアルエディタに吹き出しが挿入される
吹き出しの人物（画像）をメディアライブラリから自由に変更できる
吹き出し内の会話を自由に編集できる

の要領で使用できます。

アイコンをクリックすると、メディア挿入個所に「thumbnail」、吹き出し入力箇所に「talk」と書いてあるテーブルがカーソル位置に自動挿入されます。

そして、thumbnailをダブルクリックして反転させた状態で、メディアを追加→お好きな画像を「サムネイルサイズ（150 x 150）」で挿入してください。

talk部分は自由に何文字でも入力できます。

以上になりますー

ここまで読んでいただいてありがとうございます。

僕もWeb言語はまだまだ理解できていない部分が多いのですが、コーディングやプログラミングの書き方に「正解はない」です。

昔は100点のコードが書けていないと不安で仕方なかったのですが、最近では、ある程度できればそれでよしとしています（セキュリティ周りに関してはもちろん別です）。

いい加減という意味ではなく、80点を100点にする作業よりも、また新しいものを80点目指して作成・勉強した方がよっぽど勉強になると感じているからです。

中級者から上級者に上がる必要性を感じた時に、じっくり時間をかけてより深く勉強していこうと思います。

要するに、コーディングやプログラミングは楽しみましょうってこと！わかった？

Alrighty!!

仕事そっちのけで記事を書いた人

みやび

>> この人の記事をもっと見る

プログラムしたりトレードしたりスケートしたりけん玉したりするひと。趣味はトライアンドエラー。優しいときもあれば厳しいときもある。寝不足を基本とする。

コメントを残すコメントをキャンセル

【WordPress】会話風の吹き出しを挿入するツールボタンを自作してみた

プラグインを使わずに自作する

まずは計画を立てる

完成までの道のりをイメージする

どの言語を使用するのか？

実際に作ってみる！（全コード公開）

1. HTMLとCSSで吹き出しイメージを具現化する

HTML

CSS

結果

2. Tiny-MCE用の自作プラグインをJavaScriptを書く

editor_plugin.js

3. WordPressに反映させる

functions.php

4. CSSをエディタに適用させる

editor-style.css

作成した吹き出しの使い方

以上になりますー

コメントを残す コメントをキャンセル

Appleサポートのチャットがすごく親切で便利だったお話

【PHP・CSS】複数枚の写真や画像をランダムに散らす仕組みをJavaScript無しで自作する

【第2回】独学コーディング＆プログラミングからwebサービス公開までの軌跡

【第1回】独学コーディング＆プログラミングからwebサービス公開までの軌跡

マニックパニックの使い方や染め方と色落ちを徹底検証

超気持ちいい！自分磨き用ローションのレシピと作り方

キレイな銀髪に染めるための正しい方法

ディズニーのミラコスタに泊まるべきではない１０の理由

コメントを残すコメントをキャンセル