WordPress单篇文章页(single.php)无法加载自定义CSS文件问题

首先明确：WordPress的single.php文章单页模板不存在任何特殊的资源加载限制，加载失败完全是代码写法不符合WordPress开发规范导致。

核心问题排查 #

你的代码存在4个直接导致加载失败的问题：

• 样式句柄重复：load_single_style()函数中给single.css设置的入队句柄是header_1，和header_1.css的入队句柄完全重名。WordPress的资源入队机制要求每个资源的句柄全局唯一，重名会直接导致后注册的资源被忽略，甚至覆盖之前注册的资源路径，引发加载异常。
• 入队时机错误：wp_enqueue_scripts钩子会在页面wp_head()执行前完成所有头部资源的入队解析，你在single.php模板中手动调用load_single_style()时，页面头部已经渲染完成，入队的CSS没有输出位置，自然无法加载。其他页面能生效只是因为你碰巧在get_header()执行前调用了对应函数，属于偶然情况，不具备通用性。
• 嵌套函数风险：你把所有load_xxx_style子函数全部定义在add_theme_scripts父函数内部，PHP嵌套函数会在父函数第一次执行后全局生效，一旦add_theme_scripts被钩子重复触发，会直接抛出「函数已重复定义」的致命错误。
• 参数不规范：load_header_style和load_single_style的第三个参数（资源依赖项）直接传了false，规范写法应传空数组array()，虽然不会直接报错，但会提高资源依赖解析的异常概率。

正确实现代码 #

删除所有嵌套定义的load_xxx_style函数，删除所有模板文件中手动调用资源加载函数的代码，所有资源入队逻辑统一放在functions.php的wp_enqueue_scripts回调中，通过WordPress自带的条件标签判断页面类型加载对应资源，修复后的代码如下：

function add_theme_scripts() {
    // 全局加载公共CSS
    wp_enqueue_style( 'slider_swiper', get_template_directory_uri() . '/css/swiper.min.css', array(), '1.0', 'all');
    wp_enqueue_style( 'font-awseom-all', get_template_directory_uri() . '/css/all.min.css', array(), '1.0', 'all');
    wp_enqueue_style( 'theme-main-style', get_stylesheet_uri(), array(), '1.0', 'all' );

    // 全局加载公共JS
    // 注意：WordPress内核自带jQuery，不建议手动引入本地jQuery版本，极易和插件加载的jQuery产生冲突
    // wp_enqueue_script( 'theme-jquery', get_template_directory_uri() . '/js/jquery-3.6.0.min.js', array(), '3.6.0', true);
    wp_enqueue_script( 'swiper-bundle', get_template_directory_uri() . '/js/swiper-bundle.min.js', array(), '1.0', true);
    wp_enqueue_script( 'theme-app', get_template_directory_uri() . '/js/app.js', array(), '1.0', true);

    // 分类/归档页加载对应CSS
    if ( is_archive() || is_category() ) {
        wp_enqueue_style( 'category-archive', get_template_directory_uri() . '/css/category_archive.css', array(), '1.0', 'all');
    }

    // 全局加载头部样式
    wp_enqueue_style( 'header-style', get_template_directory_uri() . '/css/header_1.css', array(), '1.0', 'all');

    // 文章单页加载对应CSS，句柄保持全局唯一
    if ( is_single() ) {
        wp_enqueue_style( 'single-post-style', get_template_directory_uri() . '/css/single.css', array(), '1.0', 'all');
    }

    // WooCommerce商品归档页加载对应CSS
    if ( is_post_type_archive( 'product' ) || is_shop() ) {
        wp_enqueue_style( 'product-archive-style', get_template_directory_uri() . '/css/archive_product.css', array(), '1.0', 'all');
    }

    // 问答页加载对应CSS，判断条件根据你实际的页面规则调整
    if ( is_page('question') ) {
        wp_enqueue_style( 'question-page-style', get_template_directory_uri() . '/css/question.css', array(), '1.0', 'all');
    }

    // WooCommerce商品详情页加载对应CSS
    if ( is_singular( 'product' ) ) {
        wp_enqueue_style( 'product-detail-style', get_template_directory_uri() . '/css/product.css', array(), '1.0', 'all');
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

*注：代码中资源的版本号参数（第四个参数）可以替换为filemtime( get_template_directory() . '/css/xxx.css' )的形式，实现CSS/JS修改后自动更新版本号，避免浏览器缓存旧资源看不到修改效果。

后续排查项 #

如果替换代码后仍然无法加载，按以下顺序检查：

• 确认主题目录下/css/single.css文件真实存在，文件名、路径没有拼写错误
• 确认服务器对该CSS文件有读取权限，直接访问文件URL不会返回403/404状态码
• 清空WordPress缓存插件、服务器缓存、CDN缓存、浏览器本地缓存后再测试

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