纯代码实现WordPress文章和页面后端发布页支持自定css和js代码-源享圈

我们在实际开发或使用过程中可能会需要修改指定页面或者文章的css样式、js代码等，使用下方代码实现每个页面、文章发布页会有一个自定义css和js代码的输入框，方便个性化。

教程如下：

以下是结合WordPress的文章和页面发布页面上增加自定义CSS和JS代码框的完整代码示例：

打开你的主题的”functions.php”文件（通常位于主题文件夹下），并在文件末尾添加以下代码：

// 添加自定义CSS和JS的Meta Box
function custom_metaboxes() {
    add_meta_box('custom-css-js', '自定义CSS和JS', 'custom_css_js_callback', ['post', 'page'], 'side', 'high');
}
add_action('add_meta_boxes', 'custom_metaboxes');

// 自定义CSS和JS的Meta Box回调函数
function custom_css_js_callback($post) {
    wp_nonce_field(basename(__FILE__), 'custom_meta_nonce');

    $custom_css = get_post_meta($post->ID, '_custom_css', true);
    $custom_js = get_post_meta($post->ID, '_custom_js', true);

    echo '<label for="custom-css">自定义CSS：</label><br>';
    echo '<textarea name="custom-css" id="custom-css" rows="5" style="width: 100%">' . esc_textarea($custom_css) . '</textarea><br>';

    echo '<label for="custom-js">自定义JS：</label><br>';
    echo '<textarea name="custom-js" id="custom-js" rows="5" style="width: 100%">' . esc_textarea($custom_js) . '</textarea>';
}


// 保存自定义CSS和JS的Meta Box数据
function save_custom_css_js($post_id) {
    if (!isset($_POST['custom_meta_nonce']) || !wp_verify_nonce($_POST['custom_meta_nonce'], basename(__FILE__))) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (isset($_POST['custom-css'])) {
        update_post_meta($post_id, '_custom_css', sanitize_textarea_field($_POST['custom-css']));
    }

    if (isset($_POST['custom-js'])) {
        update_post_meta($post_id, '_custom_js', sanitize_textarea_field($_POST['custom-js']));
    }
}
add_action('save_post', 'save_custom_css_js');

// 前端输出自定义CSS和JS
function custom_css_js_output() {
    if (is_singular()) {
        $custom_css = get_post_meta(get_the_ID(), '_custom_css', true);
        $custom_js = get_post_meta(get_the_ID(), '_custom_js', true);

        // 输出自定义CSS
        if (!empty($custom_css)) {
            echo '<style>' . $custom_css . '</style>';
        }

        // 输出自定义JS
        if (!empty($custom_js)) {
            echo '<script>' . $custom_js . '</script>';
        }
    }
}
//以下代码二选一，上面是头部输出、下面是底部输出，另一个注释或删掉即可
add_action('wp_head', 'custom_css_js_output');
add_action('wp_footer', 'custom_css_js_output');