HTML转WordPress添加样式表方法及本地XAMPP下CSS未链接问题

核心错误点分析 #

1. 路径重复+主题名称不匹配
   get_template_directory_uri() 函数已自动返回当前主题的根URL（比如你的本地环境应为 http://localhost/wp-content/themes/lacomparaison/），但你在代码里额外拼接了 /wp-content/themes/firstguide/——这不仅导致路径重复，还写错了主题名称（HTML里用的是lacomparaison，代码里却写了firstguide）。

   错误代码片段：

   wp_register_style( 'ft-header-style-css', get_template_directory_uri() . '/wp-content/themes/firstguide/css/header/header.css', false, '1.1', 'all' );
   

   修正后代码：

   function add_css() {
       wp_register_style( 'ft-header-style-css', get_template_directory_uri() . '/css/header/header.css', false, '1.1', 'all' );
       wp_enqueue_style( 'ft-header-style-css' );
   
       wp_register_style( 'fontAweasome-css', get_template_directory_uri() . '/fonts/fontawesome/css/all.css', false, '1.1', 'all' );
       wp_enqueue_style( 'fontAweasome-css' );
   }
   add_action( 'wp_enqueue_scripts', 'add_css' );
   

2. 移除HTML硬编码的CSS链接
   既然已经通过wp_enqueue_style注册并加载CSS，就不需要再在HTML头部手动写<link>标签——硬编码的相对路径在不同页面可能失效，还会和WordPress的资源队列加载逻辑冲突，直接删除HTML里的那两个<link>标签即可。

验证步骤 #

1. 替换functions.php里的路径代码，确保主题名称和路径拼接正确
2. 删除HTML头部的硬编码CSS链接
3. 刷新页面，打开浏览器开发者工具（F12），查看Network标签下的CSS文件请求状态，确认是否返回200（成功加载）
4. 如果仍有问题，检查主题文件夹的文件结构是否和路径对应，比如css/header/header.css是否确实存在于lacomparaison主题目录下

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