如何将WordPress Customizer生成的内联CSS转存至customizer.css文件？

没问题，我帮你搞定这个需求——要把WordPress Customizer生成的CSS从内联<style>标签转到单独的customizer.css文件，只需要三步就能实现，我给你详细拆解：

1. 禁用Customizer默认的内联CSS输出 #

首先得阻止WordPress自动输出内联样式，我们可以在主题的functions.php文件里添加以下代码，移除默认的内联CSS队列并清空额外CSS的输出：

add_action('wp_enqueue_scripts', 'disable_customizer_inline_css', 100);
function disable_customizer_inline_css() {
    // 移除Customizer默认的内联样式队列
    wp_dequeue_style('wp-customizer');
    // 把Customizer额外CSS的输出置空
    add_filter('wp_customize_additional_css', '__return_empty_string');
}

这样就不会再看到页面里的内联<style>标签了。

2. 提取Customizer CSS并写入文件 #

接下来要在用户保存Customizer设置时，把生成的CSS内容写入到主题目录下的customizer.css文件中。同样在functions.php里添加这段代码：

add_action('customize_save_after', 'save_customizer_css_to_file');
function save_customizer_css_to_file($wp_customize) {
    // 获取Customizer中保存的额外CSS内容
    $additional_css = wp_get_custom_css();
    
    // 如果没有CSS内容，直接返回不执行写入
    if (empty($additional_css)) {
        return;
    }
    
    // 定义文件路径：主题根目录下的customizer.css
    $file_path = get_stylesheet_directory() . '/customizer.css';
    
    // 将CSS内容写入文件（注意服务器需要主题目录的写入权限）
    file_put_contents($file_path, $additional_css);
}

⚠️ 注意：线上服务器可能需要手动创建customizer.css文件并设置合适的权限（比如644），否则会出现写入失败的情况。

3. 加载生成的customizer.css文件 #

最后一步，让WordPress在前端加载我们生成的CSS文件，继续在functions.php中添加：

add_action('wp_enqueue_scripts', 'enqueue_customizer_css_file');
function enqueue_customizer_css_file() {
    $file_path = get_stylesheet_directory() . '/customizer.css';
    // 先检查文件是否存在，避免加载无效资源
    if (file_exists($file_path)) {
        // 用文件修改时间作为版本号，避免浏览器缓存旧文件
        wp_enqueue_style('customizer-css', get_stylesheet_directory_uri() . '/customizer.css', array(), filemtime($file_path));
    }
}

额外提醒 #

• 如果你用的是子主题，get_stylesheet_directory()指向的是子主题目录，get_template_directory()指向父主题，根据你的实际情况调整路径即可。
• 完成设置后，记得清除浏览器缓存或者WordPress缓存插件的缓存，确保新的CSS文件能正常加载。

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