WordPressのビジュアルエディタに新しいボタンを追加する方法

こんにちは、イナフクカズヤ(@Inafuku_Kazuya)です。

ブログにGoogleマップを貼り付けるので、レスポンシブのクラスを追加できるビジュアルエディタのボタンを実装してほしいという依頼がありました。

ビジュアルエディタにはないボタン(機能)を実装したいケースは、結構あるので、今回はビジュアルエディタに新しいボタンを追加する方法を紹介します。

こちらの記事を参考にさせていただきました。
ビジュアルエディタに独自ボタンを追加する

まずは、ボタンを追加するコードとスクリプトを読み込むコードをfunctions.phpに記述します。僕はjsフォルダはassetsに入れてるので、そちらに保存するようにします。

/*　ボタンを追加するコード　*/

function custom_mce_buttons( $buttons ) {
  $buttons[] = 'button_g'; // Googlemapのボタン
  return $buttons;
}

/*　ボタンのスクリプトの読み込むコード　*/

function custom_mce_external_plugins( $plugin_array ) {
  $plugin_array['custom_button_script'] = get_template_directory_uri() . "/assets/js/tinymce.js";
  return $plugin_array;
}
 
add_filter( 'mce_buttons', 'custom_mce_buttons' );
add_filter( 'mce_external_plugins', 'custom_mce_external_plugins' );

上記のコードでtinymce.jsを読み込む記述を書きました。なので、jsフォルダの中にtinymce.jsを作って保存します。

ファイルの中には下記のように記述します。
ビジュアルエディタ内で選択したものをgmapクラスで囲みます。

(function() {
  tinymce.create('tinymce.plugins.MyButtons', {
    init : function(ed, url) {
      // Googlemapのボタン追加
      ed.addButton( 'button_g', {
        title : 'g',
        //ファイルの置き場所
        image : url + '/map-icon.png',
        cmd: 'button_g_cmd'
      });
      // gボタンの動作
      ed.addCommand( 'button_g_cmd', function() {
        var selected_text = ed.selection.getContent();
        var return_text = '';
        return_text = '' + selected_text + '';
        ed.execCommand('mceInsertContent', 0, return_text);
      });
    },
    createControl : function(n, cm) {
      return null;
    },
  });

  tinymce.PluginManager.add( 'custom_button_script', tinymce.plugins.MyButtons );
})();

gmapのCSSをcssファイルに記述します。

.gmap {
  height: 0;
  overflow: hidden;
  margin-bottom: 30px;
  padding-bottom: 56.25%;
  position: relative;
}

.gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

ファイルの置き場所については、map-icon.pngをtinymce.jsと同じ階層に置くように記述してあるので、同じところに作って置いてください。

32×32くらいのサイズで画像を作った方が綺麗に見えます。