みやびです。最近は相変わらずPHPの勉強をやりつつ、社長と一緒に新しいブログへの移設やデザイン補修を行っていました。そして昨日の帰り際、社長から新しい要求が降ってまいりました。「WordPressで会話風の吹き出しを入れたい。なるべく簡単に。任せるよ。」
吹き出しを挿入するプラグインとして有名なものとして「Speech Bubble」が挙げられますが、ざっと見たところ、あまりワクワクしなかったのと、これくらい自分でサクっと実装できなきゃね!ってことで、勉強がてら自分で作ってみることにしました。
とは言ったものの、WordPress標準搭載のビジュアルエディタ「Tiny-MCE」をカスタマイズした経験は皆無なので、そこから勉強開始です。
![]() |
仕方ない。いっちょやってやりますか! |
みやびのせるのチョロいわー! |
![]() |
タイトルの通り、今回の目標は「WordPressで誰でも簡単に記事内に吹き出しを挿入できるような仕組みを実装すること」です。
これを具体的な機能に落とし込むと、
となります。この4ステップであればWordPress初心者でも簡単に使うことができますね。
こちらが自由に決められるものではありませんが、念のため。
WordPressで何か新しい機能を実装しようとする場合には、基本的に上述した言語をある程度理解していれば自作・カスタマイズすることが可能です。
実際に作業する順番についてもこれと同様です。
前置きが長くなってしまいそうなので、実際に作成して、このブログでも動いているコード・プログラムを公開します。
まずはHTMLとCSSを使って実際に表示されるイメージ(コード・デザイン)を描写してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- 左画像/右吹き出し --> <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 |
▼編集画面上はこんな感じになってます。
(全く同じ内容のCSSをエディタに読み込ませています。方法については後述します。)
いやはや、もうちょっとCSSがきれいに書けるといいなぁと思うのですが、ボタンクリックで出力されるHTMLを最小限にしたかった(後からテキストモードでスタイルをいじりたい人が少しでも分かりやすいように…)という言い訳をしておきます笑
上記CSSでは:nth-child()を使っていますが、それぞれクラスをつけても全然問題ないです。
余談ですが、これを書く前に考えていることはこんな感じ。
みたいなことが頭の中でごちゃごちゃーっと出てきますが、ひとつずつルールを決定していけば自然と使うべきCSSも見えてきます。
この手の情報は海外サイトの方が充実しているので、まずは英語検索しながら苦手なJavaScript周りを1時間ほど見て回りました。
使用しているテーマディレクトリ(wp-content/themes/テーマ名/)の下に新しくディレクトリを作成し(ここではcustom_tiny_mceとしています)、その中に新しくJavaScriptファイルを作成します(ここでは例にならってeditor_plugin.jsとしています)。
また、ツールバーに追加したいアイコン画像はICOOOON MONOなどで入手し、上で作成したcustom_tiny_mceディレクトリ内のJSファイルと同階層に置いてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
(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ファイルまでのパスが格納されています。
![]() |
ざっくりかよ!! |
項目3の種類がいくつかあり、期待するアクションに合わせたものを使用します。
これだけではよく分からないと思いますが、全部コピペしてから自分でいろいろいじってみたらだいたい理解できると思います。
WordPressに反映させるためには、使用しているテーマのfunctions.phpに追記します。
1 2 3 4 5 6 |
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も利用でき、それぞれツールバーの何行目に表示したいかを表しています。
ここまでの工程が完了したら、記事編集画面を開いてみてください。念のためスーパーリロードで。
正常に完了していればツールバーにボタンが追加されているはずです。
↓これね(笑)
これはオプションですが、今回の吹き出しコードにはテーブルタグを使用しており、デフォルトだとビジュアルモードで見づらいです。
同様のCSSを反映させたい場合には、対象のCSSコードのみを切り取って新しくファイルを作成(ここでは例にならってeditor-style.cssとします)し、テーマファイルのCSSディレクトリ直下にアップロードしたのち、functions.phpに以下のコードを記載してください。
1 |
add_editor_style('css/editor-style.css'); |
これでリロードをかければ、記事編集画面のビジュアルモードにてCSSが反映されるので見やすくなります。
冒頭の「完成までの道のりをイメージする」に記載した通り、
の要領で使用できます。
アイコンをクリックすると、メディア挿入個所に「thumbnail」、吹き出し入力箇所に「talk」と書いてあるテーブルがカーソル位置に自動挿入されます。
そして、thumbnailをダブルクリックして反転させた状態で、メディアを追加→お好きな画像を「サムネイルサイズ(150 x 150)」で挿入してください。
talk部分は自由に何文字でも入力できます。
ここまで読んでいただいてありがとうございます。
僕もWeb言語はまだまだ理解できていない部分が多いのですが、コーディングやプログラミングの書き方に「正解はない」です。
昔は100点のコードが書けていないと不安で仕方なかったのですが、最近では、ある程度できればそれでよしとしています(セキュリティ周りに関してはもちろん別です)。
いい加減という意味ではなく、80点を100点にする作業よりも、また新しいものを80点目指して作成・勉強した方がよっぽど勉強になると感じているからです。
中級者から上級者に上がる必要性を感じた時に、じっくり時間をかけてより深く勉強していこうと思います。
![]() |
要するに、コーディングやプログラミングは楽しみましょうってこと!わかった? |
Alrighty!! |
![]() |