WordPress如何合并CSS文件

1. WordPress里面嘛，CSS文件多了页面加载就慢，像老牛拉破车，浏览器得一个个请求，等得花儿都谢了。咱得把它们合并成一个文件，减少请求次数，速度嗖嗖上去。别手动搞，用代码和插件都行，这里主要唠代码的法子。

2. 先 hook 进 WordPress 的排队系统，用 wp_enqueue_scripts 动作。咱们写个函数，把那些零散的 CSS 抓起来，拼成一个新文件。代码扔进主题的 functions.php 文件里，小心别写错地方。

add_action('wp_enqueue_scripts', 'combine_css_files', 999);
function combine_css_files() {
    if (!is_admin()) { // 只对前台搞，后台别动
        global $wp_styles;
        $handles = array('style-css', 'theme-css', 'plugin-css'); // 替换成你的句柄
        $combined_css = '';
        $deps = array();

        foreach ($handles as $handle) {
            if (isset($wp_styles->registered[$handle])) {
                $src = $wp_styles->registered[$handle]->src;
                $deps = array_merge($deps, $wp_styles->registered[$handle]->deps);
                $combined_css .= file_get_contents($_SERVER['DOCUMENT_ROOT'] . parse_url($src, PHP_URL_PATH));
                wp_dequeue_style($handle); // 去掉原来的
            }
        }

        $upload_dir = wp_upload_dir();
        $file_path = $upload_dir['path'] . '/combined-styles.css';
        file_put_contents($file_path, $combined_css);
        $file_url = $upload_dir['url'] . '/combined-styles.css';

        wp_enqueue_style('combined-css', $file_url, array_unique($deps), null);
    }
}

3. 这段代码嘛，先定义要合并的 CSS 句柄，然后循环读取每个文件内容，拼接成一个字符串。注意路径得处理对，不然文件找不到。写完新文件后，用 wp_enqueue_style 重新排队。依赖关系也别忘，不然样式顺序乱了，页面看起来像被猫抓过。

4. 但这种方法有点糙，没缓存处理，每次都会生成。最好加个版本控制或检查文件是否存在。思维跳跃一下——就像做菜，材料齐了才下锅，不然半生不熟。代码可以改进，用文件修改时间做版本号。

$version = filemtime($file_path);
wp_enqueue_style('combined-css', $file_url, array_unique($deps), $version);

5. 最后，提醒备份 functions.php，万一出错网站白屏，就悲剧了。合并 CSS 能提速，但测试下别 break 样式。WordPress 生态里，也有插件像 Autoptimize 可以自动搞，省心但少点控制。根据需求选吧，代码法给开发者更多自由。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。