wp_enqueue_style必须在wp_enqueue_scripts钩子中调用,否则因函数未定义或“headers already sent”报错;需用add_action包裹,handle唯一、$src为URL、$deps和$ver不可省略。

wp_enqueue_style 必须在 wp_enqueue_scripts 钩子中调用
直接在 functions.php 顶层写 wp_enqueue_style('bootstrap', '...') 会报 Fatal error: Call to undefined function wp_enqueue_style()——函数根本没加载进来。塞进 header.php 更糟,HTML 已开始输出,再调用会触发 “headers already sent” 错误。
WordPress 只在 wp_enqueue_scripts 这个钩子触发时才准备好资源调度系统,且此时尚未输出,是唯一安全时机。
- 必须用
add_action('wp_enqueue_scripts', 'your_function_name')包裹调用逻辑 - 子主题不能依赖父主题的钩子自动生效,得在自己的
functions.php中显式挂载 - handle 名称重复会导致样式静默失效:你写的
wp_enqueue_style('style', ...)和插件里同名的'style'冲突时,后注册的那个会彻底覆盖前一个,浏览器里看不到对应<link>,也不报错
Bootstrap CSS/JS 的加载顺序和依赖必须显式声明
如果你的主题样式依赖 Bootstrap 的栅格或按钮类,但 bootstrap.css 在你的 style.css 之后才加载,那所有 .btn、.row 都会失效或被覆盖。
正确做法是把 Bootstrap 注册为依赖项:
function my_theme_enqueue_styles() {
wp_enqueue_style(
'bootstrap-css',
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css',
array(), // 无依赖
'5.3.3'
);
wp_enqueue_style(
'my-theme-style',
get_stylesheet_uri(),
array('bootstrap-css'), // 显式声明依赖
filemtime(get_stylesheet_directory() . '/style.css')
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
-
$deps参数不能为空数组(array()),也不能省略——PHP 8+ 会警告 -
$src必须是可访问 URL,传get_template_directory() . '/css/bootstrap.css'会 404 - JS 同理:用
wp_enqueue_script加载 Bootstrap JS,并通过array('jquery')声明对 jQuery 的依赖(Bootstrap 5 仍需 jQuery)
导航菜单必须用 wp-bootstrap-navwalker 才能支持下拉和响应式折叠
WordPress 默认 wp_nav_menu() 输出的是纯 <ul><li></ul>,没有 navbar-expand-lg、data-bs-toggle="collapse" 或下拉所需的 dropdown-menu 结构——直接套 Bootstrap 类名不管用。
需要创建、读取、编辑或处理 Word 文档(.docx / .dotx)时使用。触发词:'Word'、'word 文档'、'.docx'、'生成报告'、'制作合同/简历/方案/说明书'、'提取 word 内容'、'在文档里查找替换'、'给文档加页眉页脚/目录/表格'。也用于把任意内容排版成一份正式的 Word 文件。不要用它处理 PDF、Excel 或无关编程任务。中文创作场景尤其适合:小说大纲稿、投稿文档、合同、简历、工作总结。
必须引入 wp-bootstrap-navwalker 并在调用时指定:
wp_nav_menu(array( 'theme_location' => 'primary', 'container' => 'nav', 'container_class'=> 'navbar navbar-expand-lg navbar-light bg-light', 'menu_class' => 'navbar-nav me-auto mb-2 mb-lg-0', 'fallback_cb' => '', 'walker' => new WP_Bootstrap_Navwalker() ));
- 下载
class-wp-bootstrap-navwalker.php放进主题根目录,再用require_once引入 - 注意 Bootstrap 5 的 data 属性已从
data-toggle改为data-bs-toggle,确保 navwalker 版本支持 Bootstrap 5(老版本只适配 Bootstrap 4) - 如果菜单项没下拉箭头,检查是否漏了
depth => 2参数,或主题没启用多级菜单支持
图标、响应式图片等细节要避免全局 CDN 污染
用 CDN 引入 bootstrap-icons.css 很方便,但默认全站加载——其实多数页面根本用不到图标,白耗带宽。
更合理的方式是按需注入:
- 用
Header Footer Code Manager插件,在特定页面/文章的中插入图标 CSS - 或者在主题中判断:
if (is_page('about') || has_shortcode(get_post()->post_content, 'icon')) { ... } - 响应式图片别只靠
<img class="img-fluid" alt="怎么在Bootstrap中集成WordPress建站主题" >,WordPress 自带的wp_get_attachment_image()会自动输出sizes和srcset,比手动写更可靠
最常被忽略的一点:Bootstrap 的 JavaScript 组件(如 Collapse、Dropdown)需要 DOM 就绪后初始化,而 WordPress 的 wp_enqueue_script 默认是 defer 加载,可能早于 DOM 构建完成。务必加 'in_footer' => true 并确保依赖 jquery 和 bootstrap-js 的执行顺序。

















