如何创建含自定义CSS的WordPress插件？实现激活生效、停用失效

核心逻辑 #

WordPress插件停用后，其内部代码会停止执行。只需将自定义CSS的加载逻辑写在插件文件内，通过WordPress官方样式加载钩子挂载，就能实现「激活生效、停用失效」的效果。

具体实现步骤 #

1. 搭建插件基础结构

新建插件目录（比如custom-active-css），在目录内创建主文件custom-active-css.php，添加WordPress识别插件必需的头部注释：

/*
Plugin Name: 激活生效自定义CSS
Version: 1.0
Description: 插件激活时加载自定义CSS，停用自动失效
Author: 你的名称
License: GPL2
*/

2. 加载自定义CSS（两种方式可选）

方式一：加载外部CSS文件

适合样式代码较多的场景：

1. 在插件目录内新建css子目录，创建custom-style.css文件，写入自定义样式：

body {
    background-color: #f0f8ff;
}
.site-title {
    color: #2c3e50;
    font-weight: 700;
}

2. 在主插件文件中添加样式加载逻辑：

function custom_active_css_enqueue() {
    // 注册并加载插件内的CSS文件
    wp_enqueue_style(
        'custom-active-style',
        plugin_dir_url(__FILE__) . 'css/custom-style.css',
        array(),
        '1.0',
        'all'
    );
}
// 挂载到前端样式加载钩子，确保样式在页面加载时输出
add_action('wp_enqueue_scripts', 'custom_active_css_enqueue');

方式二：输出内联CSS

适合样式代码简短的场景，无需额外文件：

function custom_active_css_inline() {
    $custom_css = '
        body { background-color: #f0f8ff; }
        .site-title { color: #2c3e50; font-weight: 700; }
    ';
    // 依赖WordPress默认加载的区块样式句柄，确保内联样式被正确输出
    wp_add_inline_style('wp-block-library', $custom_css);
}
add_action('wp_enqueue_scripts', 'custom_active_css_inline');

3. 可选：激活/停用的额外操作

如果需要在插件激活时初始化设置，或停用后清理数据，可使用官方钩子：

// 插件激活时初始化默认CSS设置（可选）
function custom_active_css_activate() {
    add_option('custom_active_css_content', 'body { background: #f0f8ff; }');
}
register_activation_hook(__FILE__, 'custom_active_css_activate');

// 插件停用时删除设置（可选，若需保留设置可删除此函数）
function custom_active_css_deactivate() {
    delete_option('custom_active_css_content');
}
register_deactivation_hook(__FILE__, 'custom_active_css_deactivate');

若使用这种方式，样式加载逻辑可改为从数据库读取：

function custom_active_css_load_from_db() {
    $custom_css = get_option('custom_active_css_content', '');
    if (!empty($custom_css)) {
        wp_add_inline_style('wp-block-library', $custom_css);
    }
}
add_action('wp_enqueue_scripts', 'custom_active_css_load_from_db');

参考文档方向 #

• WordPress官方文档中wp_enqueue_style的用法说明
• WordPress官方文档中插件生命周期钩子（register_activation_hook、register_deactivation_hook）的详情
• WordPress官方文档中wp_add_inline_style的参数与使用场景说明

内容的提问来源于stack exchange，提问作者TECH FREEKS