【WordPress】TinyMCEに自作ボタンを追加して定型文をgit管理したい！

こんにちは。ソフトウェアエンジニアのぽんです。
WordPressでボタンやアコーディオンといったパーツを実装することってありますよね。
TinyMCE TemplatesやAddQuickTagといったプラグインを使用し、定型文を作って実装する方法がよく紹介されていますが
WordPress上にマークアップを記載していくことになるため、git上で管理できないのが難点です。
今回は、gitで管理できる定型文の実装方法をお話ししていこうかなと思います！

完成系

こんな感じになります。

※ ビジュアルエディタを実際の記事と同じ見た目になるようカスタマイズしています。 こちらの記事も合わせてどうぞ！ aimstogeek.hatenablog.com

必須プラグイン

今回はTinyMCEの機能を使うため、こちらのプラグインが必須となります。

• Classic Editor

WordPress5.0から標準エディタが「Gutenberg」となっているため、旧エディタをTinyMCEに変更するプラグインです。

実装方法

TinyMCEプラグインを作成

JavaScriptファイルを作成します。
ファイルの作成場所は任意ですが、今回はテーマディレクトリ配下にinculudesというディレクトリを作成しその中にsetting-template.jsという名前でJSファイルを作成しました。
ここにボタンを追加するTinyMCEプラグインを書いて行きます。

(function() {
  tinymce.create('tinymce.plugins.original_tinymce_button', {
    init: function(ed, url) {
      ed.addButton('insert_template', {
        // text : ボタンの表示名
        text: 'テンプレートの挿入',
        // type: 'menubutton'にすると、プルダウンのようなメニューボタンを作成することができます。
        type: 'menubutton',
        menu: [
          {
            text: 'ボックス',
            menu: [
              {
                text: 'デフォルト',
                onclick: function() {
                  // insertContentでカーソルのある位置に要素を追加します
                  ed.insertContent('<div class="box"><h3>見出し</h3><p>テキスト</p></div>');
                }
              },{
                text: 'コラム',
                onclick: function() {
                  ed.insertContent('<div class="box box-clm"><h3>見出し</h3><p>テキスト</p></div>');
                }
              }
              ]
          }, {
            text: 'ダウンロードボタン',
            onclick: function() {
              ed.insertContent('<p class="btn-dl><a href="dummy">ダウンロード</a></p>');
            }
          }
        ]
      });
    },
    createControl : function(n, cm) {
      return null;
    },
  });
  tinymce.PluginManager.add('original_tinymce_button_plugin', tinymce.plugins.original_tinymce_button);
})();

今回は
プラグイン名: original_tinymce_button_plugin
ボタン名: insert_template
で作成しました。
こちらをfunction.phpで設定していきます。

function.phpに追記

先ほど作成したTinyMCEプラグインをボタンとして登録します。

<?php
// 作成したプラグインを登録
add_filter( 'mce_external_plugins', function ( $plugin_array ) {
  $plugin_array[ 'original_tinymce_button_plugin' ] = get_template_directory_uri() . '/includes/setting-template.js';
  return $plugin_array;
});
// プラグインで作ったボタンを登録
add_filter( 'mce_buttons', function ( $buttons ) {
  $buttons[] = 'insert_template';
  return $buttons;
});

こちらで完成です！

まとめ

WordPressでの定型文の作り方やTinyMCEの自作ボタンの作り方は星の数ほど紹介しているサイトが多いのですが、 私の中でこの2つが結びつかなくて実装する際にすごく時間がかかってしまったので今回紹介してみました。

今の状態だとただ要素をエディタに貼り付けるだけなので、ボタンを押したらポップアップが表示されてそこで文章編集やリンクを編集できるように改良したらさらに使いやすくなりそうだなと思いました。
まだまだ改善の余地ありですね・・・！！

---

＼\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! /／ 919.jp