【WordPress】投稿エディタに見出しテンプレートやショートコードをボタンで挿入する方法

WordPressの投稿エディタに、よく使う見出しやショートコードをワンクリックで挿入できるボタンがあると、記事執筆の効率が大幅に向上します。特に定型文や共通パーツを頻繁に使うサイトでは、エディタボタンの追加によって編集の手間が省けます。

この記事では、クラシックエディタ（TinyMCE）を対象に、カスタムボタンを追加してテンプレートやショートコードを挿入する方法を紹介します。

ボタン追加の基本コード（functions.php）

まず、使用しているテーマまたは子テーマの functions.php に以下のコードを追加してください。

<?php
// ボタンをエディタに追加
function add_custom_editor_button() {
    if ( current_user_can('edit_posts') && current_user_can('edit_pages') ) {
        add_filter('mce_external_plugins', 'add_custom_editor_plugin');
        add_filter('mce_buttons', 'register_custom_editor_button');
    }
}
add_action('admin_init', 'add_custom_editor_button');

function register_custom_editor_button($buttons) {
    array_push($buttons, "custom_button");
    return $buttons;
}

function add_custom_editor_plugin($plugin_array) {
    $plugin_array['custom_button'] = get_template_directory_uri() . '/js/editor-button.js';
    return $plugin_array;
}
?>

このコードにより、エディタに custom_button という名前のボタンが追加され、その動作が editor-button.js によって制御されるようになります。

JavaScriptファイルの作成（editor-button.js）

次に、テーマフォルダ内に js/editor-button.js というファイルを作成し、以下の内容を記述します。

(function() {
    tinymce.create('tinymce.plugins.custom_button', {
        init : function(ed, url) {
            ed.addButton('custom_button', {
                title : '見出しテンプレートを挿入',
                icon : 'icon dashicons-welcome-write-blog', // WordPress標準アイコン
                onclick : function() {
                    ed.insertContent("<h2>見出しタイトル</h2>\n\n本文をここに記述します。");
                }
            });
        }
    });
    tinymce.PluginManager.add('custom_button', tinymce.plugins.custom_button);
})();

このスクリプトでは、ボタンをクリックすると「<h2>見出しタイトル</h2>」と本文が挿入されるようにしています。用途に応じて、ショートコードや表組みなど、任意のHTMLに変更可能です。

ショートコードを挿入する応用例

以下のように記述を変更すれば、特定のショートコードをワンクリックで挿入できます。

ed.insertContent("[my_shortcode param='value']");

デザイン済みのボックスやお知らせブロックをショートコード化しておけば、編集ミスも防げて便利です。

クラシックエディタが前提

今回の方法は、クラシックエディタ（TinyMCE）を使用しているサイト向けです。Gutenberg（ブロックエディタ）を使用している場合は、別途ブロック作成やカスタムブロック登録が必要になります。

クラシックエディタを使用していない場合は、プラグイン「Classic Editor」を導入することで今回の方法が適用可能になります。

まとめ

WordPressの投稿画面にカスタムボタンを追加することで、見出しテンプレートやショートコードを素早く挿入でき、執筆作業が効率化されます。特定の構造や表現を使い回すケースが多いブログやメディアサイトでは、非常に有用なカスタマイズといえるでしょう。

複数のテンプレートを切り替えたい場合や、もっと複雑な処理を行いたい場合は、ボタンを複数追加するか、選択肢付きのポップアップを表示する処理に拡張することも可能です。