WordPress│編集記事下にCSSとJSの入力欄を追加する方法

<?php
function waza_code_allowed($id) {
    return current_user_can('manage_options') && current_user_can('unfiltered_html') && current_user_can('edit_post', $id);
}
function waza_code_valid($value) {
    return is_string($value) && !preg_match('~</(?:script|style)~i', $value);
}
add_action('add_meta_boxes', function ($type, $post) {
    if (!in_array($type, ['post', 'page'], true) || !waza_code_allowed($post->ID)) return;
    add_meta_box('waza-page-code', '記事専用 CSS / JS', function ($post) {
        wp_nonce_field('waza-code-' . $post->ID, 'waza_code_nonce');
        foreach (['css', 'js'] as $kind) {
            $value = get_post_meta($post->ID, '_waza_code_' . $kind, true);
            echo '<p><label for="waza-code-' . esc_attr($kind) . '">' . esc_html(strtoupper($kind)) . '</label></p>';
            echo '<textarea id="waza-code-' . esc_attr($kind) . '" name="waza_code_' . esc_attr($kind) . '" rows="8" style="width:100%">' . esc_textarea(is_string($value) ? $value : '') . '</textarea>';
        }
        echo '<p>タグを付けずにコードだけを入力します。script/style の終了タグを含む入力は保存されません。</p>';
    }, $type, 'normal', 'default');
}, 10, 2);
function waza_code_save($id) {
    if ((defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) || wp_is_post_revision($id) || wp_is_post_autosave($id)) return;
    if (!in_array(get_post_type($id), ['post', 'page'], true) || !waza_code_allowed($id)) return;
    if (!isset($_POST['waza_code_nonce']) || !is_string($_POST['waza_code_nonce']) || !wp_verify_nonce(wp_unslash($_POST['waza_code_nonce']), 'waza-code-' . $id)) return;
    $values = [];
    foreach (['css', 'js'] as $kind) {
        $key = 'waza_code_' . $kind;
        if (!isset($_POST[$key]) || !is_string($_POST[$key])) return;
        $values[$kind] = wp_unslash($_POST[$key]);
        if (!waza_code_valid($values[$kind])) return;
    }
    foreach ($values as $kind => $value) {
        // update_post_meta() が外すスラッシュを補い、JSのバックスラッシュを保つ。
        update_post_meta($id, '_waza_code_' . $kind, wp_slash($value));
    }
}
add_action('save_post', 'waza_code_save');
function waza_code_enqueue() {
    if (!is_singular(['post', 'page'])) return;
    $id = get_queried_object_id();
    $css = get_post_meta($id, '_waza_code_css', true);
    $js = get_post_meta($id, '_waza_code_js', true);
    if (waza_code_valid($css) && $css !== '') {
        wp_register_style('waza-page-code', false);
        wp_enqueue_style('waza-page-code');
        wp_add_inline_style('waza-page-code', $css);
    }
    if (waza_code_valid($js) && $js !== '') {
        wp_register_script('waza-page-code', false, [], null, true);
        wp_enqueue_script('waza-page-code');
        wp_add_inline_script('waza-page-code', $js);
    }
}
add_action('wp_enqueue_scripts', 'waza_code_enqueue');

<button type="button" class="waza-code-test">動作を確認</button>

.waza-code-test { border: 3px solid #a21d32; padding: .7em 1em; }

document.querySelectorAll('.waza-code-test').forEach(function (button) {
  button.addEventListener('click', function () {
    button.textContent = 'JavaScriptが動作しました';
  });
});