本地主机WordPress中引入CSS与JS文件无效问题排查

嘿，我来帮你排查这个问题！我之前在本地开发WordPress主题时也碰到过类似的情况，咱们一步步来解决：

1. 确认函数已正确挂载到钩子 #

你提供的代码只定义了styles()和scripts()函数，但如果没有通过add_action挂载到正确的钩子上，这些资源根本不会被加载。补全代码如下：

// 加载样式
function styles() {
    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css');
    wp_enqueue_style('fontawesome-css', get_template_directory_uri() . '/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts', 'styles');

// 加载脚本
function scripts() {
    // 更推荐依赖WordPress自带的jQuery，避免版本冲突
    // wp_enqueue_script('jquery-js', get_template_directory_uri() . '/js/jquery.js', array(), false, true);
    wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'scripts');

注意：Bootstrap依赖jQuery，我把脚本的依赖改成了WordPress自带的jquery（WordPress默认已经注册了这个脚本），比自己引入更稳妥，能避免重复加载或版本不兼容问题。

2. 验证文件路径是否正确 #

虽然用了get_template_directory_uri()，但还是要确认文件实际存在：

• 打开浏览器，直接访问资源URL，比如http://localhost/你的WordPress目录/wp-content/themes/你的主题名/css/bootstrap.min.css
• 如果返回404错误，检查：
  • 主题文件夹下的css/js目录是否存在
  • 文件名是否拼写正确（比如大小写，Windows环境不敏感但部分本地服务器可能敏感）
  • 有没有把文件放到子主题里却用了父主题的路径函数？如果是子主题，要换成get_stylesheet_directory_uri()

3. 清除各种缓存（本地环境也会有缓存！） #

这是最容易被忽略的点：

• 浏览器缓存：按Ctrl+Shift+R强制刷新页面，或者用无痕模式访问
• WordPress缓存插件：如果装了缓存插件（比如WP Rocket），暂时禁用并清除缓存
• 本地服务器缓存：比如XAMPP/WAMP的OPcache，重启服务器即可

4. 检查浏览器开发者工具的错误信息 #

按下F12打开开发者工具，重点看这两个标签：

• Console：有没有404资源错误、JS语法错误？如果有，根据提示修复路径或代码
• Network：查看加载的CSS/JS资源的Status是否为200，如果是404/500，对应解决路径或服务器问题

5. 确认主题模板里的关键函数调用 #

资源要正确输出，必须在主题的模板文件里添加：

• 在header.php的</head>标签前添加<?php wp_head(); ?>（样式会输出到这里）
• 在footer.php的</body>标签前添加<?php wp_footer(); ?>（设置了$in_footer=true的脚本会输出到这里）

如果缺少这两个函数，哪怕代码正确，资源也不会被输出到页面里。

6. 检查functions.php的语法错误 #

你提供的代码里bootstrap-js行末尾有...，要确认完整代码有没有语法错误（比如少了分号、闭合括号）。可以查看本地服务器的PHP错误日志（比如XAMPP的apache/logs/error.log），如果有语法错误，修复后重启服务器即可。

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