【WordPress】オリジナルのクイックタグを作成する

add_filter( 'quicktags_settings' , function ($qtInit) {
    // $qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,dfw'
    $qtInit['buttons'] = 'link';
    return $qtInit;
} , 10 , 1);

<?php
add_action('admin_print_footer_scripts', function () {
    // quicktagsが登録されていないページではクイックタグの追加をしない
    if ( !wp_script_is( 'quicktags' ) ) {
        return;
    }
?>
    <script type="text/javascript">
        // QTags.addButton(id, ボタンの文字, 開始タグ, 終了タグ);
        QTags.addButton('heading-2', 'h2', '<h2>', '</h2>');
    </script>
<?php
});

<?php
/**
 * フック名はQTags.addButtonのコールバック関数内で実行する、tb_show()第二引数で指定のURL(type=<name>)を使う
 * media_upload_<type=name> となる。
 */
add_action('media_upload_code', function () {
    // 無名関数でも機能するがタブにスタイルシートが適応されない。media_**とする必要がある。
    wp_iframe('media_iframe_code');
});

function media_iframe_code()
{
    add_filter('media_upload_tabs', function ($tabs) {
        // 'tb_show(URLのtab=**)' => インラインフレームでのタブ表示名
        $tab_map = [
            'web_view_url' => 'web_tab',
            'cli_view_url' => 'cli_tab'
        ];

        return $tab_map;
    });

    media_upload_header();

    $current_view_url = filter_input(INPUT_GET, 'tab', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
    require_once __DIR__ . "/${current_view_url}.php";
}

add_action('admin_print_footer_scripts', function () {
    if ( !wp_script_is( 'quicktags' ) ) {
        return;
    }
?>
    <script type="text/javascript">
        QTags.addButton('quicktag_code', 'code', quicktag_code);
        function quicktag_code(e, c, ed)
        {
            tb_show('code', 'media-upload.php?type=code&tab=web_view_url&TB_iframe=true&keepThis=true');

            if (ed.canvas.selectionStart !== ed.canvas.selectionEnd) {
                send_to_editor = function (data) {
                    this.tagStart = data.s;
                    this.tagEnd   = data.e;
                    QTags.TagButton.prototype.callback.call(this, e, c, ed);
                };
            } else {
                send_to_editor = function (data) {
                    QTags.insertContent(data.s + data.e);
                };
            }

            return false;
        }
    </script>
<?php
});

// HTML(form)省略

<button id="insert" class="button button-primary" type="button" name="submit">Insert</button>
<button id="cancel" class="button" type="reset" name="submit">Cancel</button>

<script type="text/javascript">
(function($){
    'use strict';

    // HTML(form)処理省略

    $('#cancel').on('click', function(e) {
        if (confirm('cancel ?')) top.tb_remove();
    });

    $('#insert').on('click', function() {
        const lang = $('#lang').val();
        const label = $('#label').val();

        top.send_to_editor({
            s: `[code lang="${lang}" label="${label}"]\n`,
            e: '\n[/code]'
        });

        top.tb_remove();
    });
})(jQuery);
</script>

<p style="margin: 1rem;">タブの切り替え</p>