WordPress主题如何批量引入CSS/JS文件夹文件，替代逐个添加？

一、直接批量遍历目录引入的代码实现 #

你可以借助PHP的glob()函数遍历指定文件夹下的所有CSS/JS文件，再通过WordPress的内置函数批量注册引入，不用再逐个添加。

批量引入CSS文件 #

在functions.php中添加这段代码：

function enqueue_all_css_files() {
    // 拿到主题CSS文件夹的服务器物理路径
    $css_dir = get_template_directory() . '/css/';
    // 筛选出所有.css后缀的文件
    $css_files = glob($css_dir . '*.css');
    
    foreach ($css_files as $file) {
        // 把文件名处理成合法的handle（WordPress要求句柄唯一且符合规范）
        $handle = sanitize_title(pathinfo($file, PATHINFO_FILENAME));
        // 生成文件的访问URL
        $file_url = get_template_directory_uri() . '/css/' . basename($file);
        // 用文件修改时间当版本号，自动刷新缓存
        $version = filemtime($file);
        
        wp_enqueue_style($handle, $file_url, array(), $version);
    }
}

批量引入JS文件 #

同样的思路处理JS文件，还能顺便处理依赖（比如jQuery）：

function enqueue_all_js_files() {
    $js_dir = get_template_directory() . '/js/';
    $js_files = glob($js_dir . '*.js');
    
    foreach ($js_files as $file) {
        $handle = sanitize_title(pathinfo($file, PATHINFO_FILENAME));
        $file_url = get_template_directory_uri() . '/js/' . basename($file);
        $version = filemtime($file);
        
        // 如果文件名里包含jquery，就添加jQuery作为依赖，可根据实际需求调整规则
        $dependencies = str_contains(basename($file), 'jquery') ? array('jquery') : array();
        
        // 最后一个true表示把脚本放在页面底部，优化加载顺序
        wp_enqueue_script($handle, $file_url, $dependencies, $version, true);
    }
}

挂载到钩子生效 #

把上面两个函数挂到wp_enqueue_scripts钩子上：

add_action('wp_enqueue_scripts', function() {
    enqueue_all_css_files();
    enqueue_all_js_files();
});

二、更建议的优化方案：合并压缩文件 #

虽然批量引入能解决手动添加的麻烦，但35个CSS+26个JS会产生大量HTTP请求，严重拖慢页面加载速度。更合理的做法是：

• 用Webpack、Gulp这类构建工具，开发时保留拆分的文件方便调试，生产环境自动把多个CSS/JS合并压缩成1-2个文件
• 合并后只需要引入少数几个文件，既简化代码又大幅提升页面性能

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