WordPress自定义主题无法入队脚本与样式问题求助

问题描述 #

从零搭建非子主题的WordPress自定义主题，functions.php中入队样式和JS的代码无效果。已确认：

• 代码与之前正常运行的主题完全一致
• functions.php已被正确调用（开头echo语句可正常输出）
• 全新WordPress安装，无缓存插件，排除缓存问题

提供的入队代码如下：

<?php

/* begin register style sheets */

function bh24_registerThemeStyles() {
    wp_enqueue_style('bootstrap_css', get_stylesheet_uri() . '/css/bootstrap.min.css');
    wp_enqueue_style('style_css', get_template_directory_uri() . '/style.css', array('bootstrap_css'));
}

add_action('wp_enqueue_scripts', 'bh24_registerThemeStyles');

/* end register style sheets */

/* begin register javascript */

function bh24_registerThemeJS() {
  wp_enqueue_script('bootstrap_js', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array('jquery'), '', true);
  wp_enqueue_script('bh24_js', get_template_directory_uri() . '/js/app.js', array('bootstrap_js'), '', true);
}

add_action('wp_enqueue_scripts', 'bh24_registerThemeJS');

/* end register javascript */

?>

核心问题与修正步骤 #

1. 样式路径错误（最可能的原因） #

get_stylesheet_uri()函数返回的是当前主题style.css文件的完整URL，而非主题目录的URL。你在它后面拼接/css/bootstrap.min.css会生成错误的路径：

例如：http://你的域名/wp-content/themes/你的主题/style.css/css/bootstrap.min.css

修正代码：将bootstrap_css的路径改为使用get_template_directory_uri()（非子主题推荐）：

function bh24_registerThemeStyles() {
    // 修正路径函数
    wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css');
    wp_enqueue_style('style_css', get_template_directory_uri() . '/style.css', array('bootstrap_css'));
}

2. 检查主题模板的钩子调用 #

确保主题的header.php文件末尾（</head>标签之前）添加了wp_head()函数，这是WordPress输出入队样式的关键：

<?php wp_head(); ?>
</head>

同时，footer.php文件末尾（</body>标签之前）必须添加wp_footer()函数，否则设置了$in_footer = true的JS文件无法输出：

<?php wp_footer(); ?>
</body>
</html>

3. 验证文件实际存在 #

确认以下文件在主题目录中的位置正确：

• /css/bootstrap.min.css
• /js/bootstrap.bundle.min.js
• /js/app.js
  可以直接通过浏览器访问这些文件的URL（比如http://你的域名/wp-content/themes/你的主题/css/bootstrap.min.css），检查是否能正常加载。

4. 检查函数名冲突 #

如果存在其他插件或代码使用了相同的函数名bh24_registerThemeStyles或bh24_registerThemeJS，会导致函数被覆盖。可以尝试修改函数名，比如改为bh24_enqueue_theme_styles和bh24_enqueue_theme_js。

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