WordPress中如何为其他独立页面正确引入专属CSS文件

• 直接在aboutus.html里写相对路径引入CSS失效：相对路径aboutus.css会跟随当前访问URL拼接资源地址，受WordPress路由规则、站点安装目录影响，浏览器无法定位到真实的CSS文件位置。
• 在functions.php中调用wp_enqueue_style失效：一方面你写的get_stylesheet_uri()默认指向主题根目录的style.css，根本没有关联到你自定义的aboutus.css；另一方面独立存放的aboutus.html没有走WordPress模板渲染流程，不会触发wp_head钩子，enqueue的资源根本不会被注入到页面中。

你可以根据自己的需求二选一：

方案1：保留独立HTML文件结构（改动最小） #

不需要改现有PHP逻辑，只需要修正CSS引入路径：

1. 将aboutus.css放到当前启用主题的css目录下（没有就新建该文件夹）
2. 打开aboutus.html，把原来的相对路径link标签替换为站点根目录绝对路径引入：

<!-- 注意替换成你自己的主题目录名，如果WordPress装在子目录，开头加上子目录路径即可 -->
<link rel="stylesheet" href="/wp-content/themes/你的主题目录名/css/aboutus.css" />

路径开头的/不能省略，代表从站点根目录开始寻址，不受当前页面URL影响，能稳定定位到CSS文件。

方案2：遵循WordPress开发规范（推荐，后续维护成本最低） #

不建议把栏目页存为独立HTML文件，用WordPress原生自定义页面模板实现更稳定：

1. 在当前主题根目录新建page-aboutus.php作为About Us页面模板，文件开头加模板声明，内容结构参考：

<?php
/*
Template Name: About Us专属模板
*/
get_header(); // 自动加载主题头部，触发样式、脚本加载钩子
?>
<!-- 把原来aboutus.html里的所有页面内容代码粘贴到这里 -->
<?php get_footer(); // 自动加载主题底部 ?>

2. 登录WordPress后台，新建标题为「About Us」的页面，页面属性里的模板选项选择刚才创建的「About Us专属模板」，发布后把导航栏里原来指向静态aboutus.html的链接替换为该页面的固定链接。
3. 在主题的functions.php中添加条件加载逻辑，只在About Us页面加载专属CSS，避免其他页面加载冗余资源：

function custom_aboutus_style() {
    // 括号里填About Us页面的固定链接别名（slug），也可以传页面ID
    if (is_page('about-us')) {
        wp_enqueue_style(
            'aboutus-css',
            get_template_directory_uri() . '/css/aboutus.css',
            array(),
            filemtime(get_template_directory() . '/css/aboutus.css'),
            'all'
        );
    }
}
add_action('wp_enqueue_scripts', 'custom_aboutus_style');

不要用microtime()作为样式版本号，会导致每次页面刷新都重新加载CSS，完全丢失浏览器缓存能力拖慢加载速度，用filemtime()获取CSS文件的最后修改时间作为版本号，文件更新时自动刷新缓存，平时正常走浏览器缓存，是最优实践。

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