WordPressのビジュアルエディタにショートコードを呼び出すボタンを追加する方法

圧倒的備忘録……！

WordPressにはショートコードという便利な機能があるのですが、たくさん作ると全てを覚えるのは困難……！　なめてなどいない。熟知しているだけだ……人間の無力について……！

とどのつまり、ビジュアルエディタからボタン1つでショートコードを呼び出せると楽……！　圧倒的に楽……！

が……駄目っ……！　ネットの情報……良くわからない……！　古かったり、英語だったり、有象無象……！　理解の及ばぬ人外魔境っ……！

＊　＊　＊

はい、という訳でビジュアルエディタにショートコードを呼び出すボタンを追加する方法についてまとめてみました。

え!? function.phpでフィルターフックを!?

できらぁ！

WordPressではビジュアルエディタにTinyMCEというエディタを使っています。これにボタンを使いするのはJSを流し込んだらできるのですが、JSを流し込む処理をいつするかをフィルターフックで指定します。

function my_tinymce_button() {
  if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {
    add_filter( 'mce_buttons', 'my_register_tinymce_button' );
    add_filter( 'mce_external_plugins', 'my_tinymce_button_script' );
  }
}
add_action( 'admin_init', 'my_tinymce_button' );

function my_register_tinymce_button( $buttons ) {
  array_push( $buttons, 'my_button' );
  return $buttons;
}

function my_tinymce_button_script( $plugin_array ) {
  $plugin_array['my_button_script'] = 'path/to/tinymce.js';  // jsのパスをここに
  return $plugin_array;
}

function my_tinymce_button() {

if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {

add_filter( 'mce_buttons', 'my_register_tinymce_button' );

add_filter( 'mce_external_plugins', 'my_tinymce_button_script' );

}

add_action( 'admin_init', 'my_tinymce_button' );

function my_register_tinymce_button( $buttons ) {

array_push( $buttons, 'my_button' );

return $buttons;

}

function my_tinymce_button_script( $plugin_array ) {

$plugin_array['my_button_script'] = 'path/to/tinymce.js'; // jsのパスをここに

return $plugin_array;

}

フィルターと、そんときに実行する処理を書きました。読み込みに行くjsのパスは

path/to/tinymce.js

1	path/to/tinymce.js

の箇所を自分で用意したファイルのパスに変更しておいてください（フルパスで）

え!? JSでボタン押したら出てくるモーダルウィンドウと処理を!?

できらぁ！

適当な箇所にtinymceというjsファイルを作ります。ここにボタンを押したときの処理をカカッと書いていきます。

今回はLine風の吹き出しを呼び出すボタンを作りたかったのでこんな感じに書いていきます。

(function() {
    tinymce.create('tinymce.plugins.MyButtons', {
        init: function( editor, url ) {
            editor.addButton( 'my_button', {
                title: 'Line風吹き出し',
                icon: false,
                onclick: function() {
                   //モーダルウィンドウが出て来る処理
                    editor.windowManager.open({
                        title: 'Line風吹き出し',
                        body: [{
                            type: 'textbox',
                            name: 'name',
                            label: '名前'
                        },{
                            type: 'textbox',
                            name: 'img',
                            label: '画像アドレス'
                        },{
                            type   : 'listbox',
                            name   : 'position',
                            label  : '開始位置',
                            values : [
                            { text: '右', value: 'right' },
                            { text: '左', value: 'left' }
                            ],
                        value : 'right' // デフォルト値
                        },{
                            type: 'textbox',
                            name: 'message',
                            label: '本文'
                        }],
                        onsubmit: function( e ) {

                            editor.insertContent( '[line_hukidashi111 position="' + e.data.position + '" img="'+ e.data.img + '" name="'+ e.data.name + '" message="' + e.data.message + '"]' );
                        }
                    });
                }
            });
        },
        createControl: function( n, cm ) {
            return null;
        }
    });
    tinymce.PluginManager.add( 'my_button_script', tinymce.plugins.MyButtons );
})();

(function() {

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

init: function( editor, url ) {

editor.addButton( 'my_button', {

title: 'Line風吹き出し',

icon: false,

onclick: function() {

//モーダルウィンドウが出て来る処理

editor.windowManager.open({

title: 'Line風吹き出し',

body: [{

type: 'textbox',

label: '名前'

},{

type: 'textbox',

label: '画像アドレス'

},{

type : 'listbox',

name : 'position',

label : '開始位置',

values : [

{ text: '右', value: 'right' },

{ text: '左', value: 'left' }

value : 'right' // デフォルト値

},{

type: 'textbox',

label: '本文'

}],

onsubmit: function( e ) {

editor.insertContent( '[line_hukidashi111 position="' + e.data.position + '" img="'+ e.data.img + '" name="'+ e.data.name + '" message="' + e.data.message + '"]' );

}

});

}

});

createControl: function( n, cm ) {

return null;

}

});

tinymce.PluginManager.add( 'my_button_script', tinymce.plugins.MyButtons );

})();

ほい！

こんな感じで書くとボタンを押すとこういうウインドウがでてきます。

OKを押すとショートコードが出てきます。

[　line_hukidashi111 position=”入力された値” img=”入力された値” name=”入力された値” message=”入力された値”　]

※このショートコードの処理はfunction.phpかどっかに書きました。

これで簡単に吹き出しが作れます。

え!?　絵心ないからボタンのアイコンはDashiconで!?

できらぁ！

ネットの情報を見るとボタンのイラストはpngで指定しましょうとか書かれていることがありますが、CSSでDashiconsを指定することもできます。DashiconsはWordPressの管理画面のデフォルトで入ってるアイコンセットみたいなやつです（たぶん）。

どんなのがあるかはここを見ておいてください。

function.phpに以下を追記。

function my_tinymce_button_dashicon() {
  ?>
  <style type="text/css">
  .mce-i-my_button:before {
    content: '\f101';
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1 'dashicons';
    vertical-align: top;
    color: #7cd044;
  }
  </style>
  <?php
}
add_action( 'admin_head', 'my_tinymce_button_dashicon' );