必须通过wp_enqueue_style和wp_enqueue_script在wp_enqueue_scripts钩子中加载，否则依赖错乱导致JS组件静默失效、CSS覆盖或加载失败。
直接用 CDN 最快，但上线前必须换成本地文件 + 正确加载顺序，否则 JS 组件（比如下拉菜单、模态框）会静默失效。
为什么 wp_enqueue_style 和 wp_enqueue_script 不能随便写
WordPress 的资源加载有依赖链和执行时机。Bootstrap 的 JS 组件（如 Dropdown、Modal）依赖 Popper.js 和 jQuery（Bootstrap 5 已移除 jQuery 依赖，但很多 WordPress 主题或插件仍隐式依赖它）。如果只用 <link> 和 <script></script> 硬塞进 header.php，会出现：
- JS 组件初始化失败，控制台无报错，但点击没反应
- 自定义 CSS 被 Bootstrap 默认样式覆盖（因为加载顺序错乱）
- 移动端折叠导航栏点不开——
data-bs-toggle="collapse"不生效
正确做法是通过 functions.php 注册并声明依赖：
function mytheme_enqueue_bootstrap() {
// 先加载 Bootstrap CSS
wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
// 再加载 Bootstrap JS（注意：Bootstrap 5 不再需要 Popper 单独引入，已内置）
wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.bundle.min.js', array(), '5.3.3', true);
// 如果主题或插件仍用 jQuery，确保它在 bootstrap-js 之前加载
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_bootstrap');
wp_nav_menu 怎么输出 Bootstrap 导航结构
WordPress 默认输出的 <ul><li></ul> 结构和 Bootstrap 要求的 navbar-nav、nav-item、nav-link 类名不匹配，直接套 class 会失效。
必须用 WP_Bootstrap_Navwalker 这类自定义 walker，否则：
- 下拉菜单无法展开（缺少
dropdown-menu容器和data-bs-toggle="dropdown"） - 移动端按钮（
navbar-toggler）不绑定折叠区域 - 多级菜单被截断，只显示一级
关键步骤：
- 把
class-wp-bootstrap-navwalker.php放进主题根目录 - 在
functions.php中require_once并注册 - 调用
wp_nav_menu()时传入'walker' => new WP_Bootstrap_Navwalker()
示例片段（放在 header.php）：
Word报告自动生成神器。自动生成专业Word文档报告，支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'navbar-nav ms-auto',
'walker' => new WP_Bootstrap_Navwalker()
));
?>
</div>
</div>
</nav>
栅格错位、样式不生效，大概率是容器没套对
Bootstrap 5 的栅格系统要求严格嵌套：container → row → col。WordPress 模板里常犯的错误是：
- 在
index.php或single.php里直接写<div class="row">，但外层没 <code>container，导致内容贴边、间距异常 - 用
get_sidebar()加载侧栏后，main区域和sidebar没放在同一row下，造成断行错位 - 在小屏下期望
col-md-8+col-md-4并排，但实际堆叠——因为父row被其他未闭合标签打断 - 用 SCSS 编译：把 Bootstrap 源码放进主题
/assets/scss/，修改$primary等变量后npm run build - 用 CSS 变量覆盖：在
或:root中重设--bs-primary: #2c3e50; - 加更具体的选择器：比如不用
.card，而用.blog-card .card提升权重
检查方法很简单：打开浏览器开发者工具，看元素是否被包裹在 .container 或 .container-fluid 内；.row 下是否只有 .col*，没有 <p></p>、<div> 等干扰节点。
<h3>自定义样式总被覆盖？别硬写 <code>!important
Bootstrap 5 使用 CSS 变量（如 --bs-primary）和高优先级类名（如 bg-primary），直接在 style.css 里写 .btn { background: red !important; } 是临时解法，长期会失控。
真正可持续的方式是：
特别注意：WordPress 后台编辑器（Gutenberg）自带样式也会污染前端，建议在主题 functions.php 中禁用 Block Library CSS：
function disable_block_library_css() {
wp_dequeue_style('wp-block-library');
}
add_action('wp_enqueue_scripts', 'disable_block_library_css');
最常被忽略的是 bootstrap.bundle.min.js 和 bootstrap.min.js 的区别——前者含 Popper，后者不含。线上环境一旦用了后者，所有下拉、Tooltip、Popover 全部失效，且控制台不报错，排查起来极耗时间。
