【wordpress】ビジュアルエディターにプルダウンを追加する

2022年10月3日
2022年10月18日
wordpress
PHP, wordpress

wordpress

どうも神田です。今回はWordpressのビジュアルエディターにプルダウンを追加する手順について説明していきます。

WordPressで記事を書いていると、同じような文言を入れたくなったりしますよね。そのときに、キーワードのリストのようなものを作成しておくと便利です。

プラグインなどを利用せずに、純粋にPhpコードを弄って実装しますので、是非とも参考にしてください。

この記事を書いている私は大学時代にHPの勉強を始め、その後SEとして会社に3年勤務。
退職後はフリーランスとして独立して現在も活動しています。WordPressは既に5年以上使い続け、PHPコードを改造する程に使い込んでいます

【wordpress】ビジュアルエディターにプルダウンを追加する

①今回したいことについて

さて、今回のゴールですが、管理画面のビジュアルエディターにプルダウンを設置します。
内容は「テスト1」、「テスト2」、「テスト3」みたいに簡単にします。以下のイメージです。

実装するにあたって、エディターを強化するTinymceプラグインを使用しています。最近はテーマに含まれている場合も多いですが、対応していない場合はインストールしておいてください。
テーマに入っているなら、下記のようなビジュアルエディターに近いものになっているはずです。

②ビジュアルエディターの仕組みについて知る

さて、まずは仕組みからです。ビジュアルエディターにプルダウンを追加するにはJSファイルとPHPファイルの両方を編集します。
PHPファイルは、よく弄る子テーマのfunctions.phpです。一方で、JSファイルも子テーマのJSファイルをいじる必要があります。

初期状態ではwordpressの管理画面から参照出来るJSファイルは子テーマには用意されていません。そのため、自分で作成する必要があります。
子テーマ、および子テーマの設定方法については以下の記事を参考にしてみてください。

【WordPress】子テーマについて理解しよう【PHP】

どうも神田です。今回はWordpressの子テーマについて簡単に説明していきます。 Wordpressでブログなどを運営していて、もう少し改造したいなぁ、と思った方は是非とも参考にしてみて下さい。この記事を書いている私は大学時代にHPの勉[…]

③子テーマにPHPファイルとJSファイルを編集する

子テーマに編集していきます。functions.phpには「jsファイルへのリンク」「プルダウンの設定」を、
JSファイルには選んだ時に挿入される文言などを記載します。コードは以下の通りです。コピペしても構いません。

JSファイル（example.js）

(function() {
  tinymce.create('tinymce.plugins.original_tinymce_button', {
    init: function(ed, url) {
      ed.addButton('test', {
        // text : ボタンの表示名
        text: 'テスト',
        // type: 'menubutton'にすると、プルダウンのようなメニューボタンを作成することができます。
        type: 'menubutton',
        menu: [
          {
			// それぞれのメニュー項目と、クリック時に表示する文言を指定します。
			// 内部にmenuをさらに加えることで、二段階のプルダウンにすることもできます。
            text: 'テスト１',
                onclick: function() {
                  ed.insertContent('テスト１');
                }
		  },{
            text: 'テスト２',
                onclick: function() {
                  ed.insertContent('テスト２');
                }
		  },{
            text: 'テスト３',
                onclick: function() {
                  ed.insertContent('テスト３');
                }
          }
        ]
      });
    },
    createControl : function(n, cm) {
      return null;
    },
  });
	//名称に関してはPHPで設定した名前と同じにしてください
  tinymce.PluginManager.add('original_tinymce_button_plugin', tinymce.plugins.original_tinymce_button);
})();

(function() {

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

init: function(ed, url) {

ed.addButton('test', {

// text : ボタンの表示名

text: 'テスト',

// type: 'menubutton'にすると、プルダウンのようなメニューボタンを作成することができます。

type: 'menubutton',

menu: [

{

// それぞれのメニュー項目と、クリック時に表示する文言を指定します。

// 内部にmenuをさらに加えることで、二段階のプルダウンにすることもできます。

text: 'テスト１',

onclick: function() {

ed.insertContent('テスト１');

}

},{

text: 'テスト２',

onclick: function() {

ed.insertContent('テスト２');

}

},{

text: 'テスト３',

onclick: function() {

ed.insertContent('テスト３');

}

]

});

createControl : function(n, cm) {

return null;

});

//名称に関してはPHPで設定した名前と同じにしてください

tinymce.PluginManager.add('original_tinymce_button_plugin', tinymce.plugins.original_tinymce_button);

})();

PHPファイル（functions.php）

// 作成したプラグインを登録
add_filter( 'mce_external_plugins', function ( $plugin_array ) {
  $plugin_array[ 'original_tinymce_button_plugin' ] = get_stylesheet_directory_uri() . "/js/example.js";
  return $plugin_array;
});
// プラグインで作ったボタンを登録
add_filter( 'mce_buttons_4', function ( $buttons ) {
  $buttons[] = 'test';
  return $buttons;
});

// 作成したプラグインを登録

add_filter( 'mce_external_plugins', function ( $plugin_array ) {

$plugin_array[ 'original_tinymce_button_plugin' ] = get_stylesheet_directory_uri() . "/js/example.js";

return $plugin_array;

});

// プラグインで作ったボタンを登録

add_filter( 'mce_buttons_4', function ( $buttons ) {

$buttons[] = 'test';

return $buttons;

});

PHPファイル、およびjsファイル共にコメントを詳細に残しているので、参照してみてください。
PHPファイルの’mce_buttons_4’はエディタの何行目に作成したメニューを表示するかを表します。
3行目にしたい場合は’mce_buttons_3’という風に変更してください。