各位打工人、码农朋友，还有夜里三点还在刷手机的甲方老板们，今天老王不讲一个小目标，讲一个“小插件”——怎么把WordPress像收租一样，优雅地收进Bootstrap的口袋里。别紧张，不画饼，只上菜！
想当年，老王第一次听说“Bootstrap调用WordPress”时，脑壳也嗡嗡的：Bootstrap不是做前端样式的吗？WordPress不是写博客的吗？这俩货居然能一起蹦迪？后来一研究，嘿，原来就是“让Bootstrap的外衣套在WordPress的身子上”，跟把万达影院开进万达广场一个逻辑——外表高端大气，里头还是卖爆米花和电影票！
第一步，老王先端上一杯枸杞茶，打开VSCode，新建个文件夹，起名“rent-house”，听着就吉利。接着npm install bootstrap，再npm install @wordpress/scripts——这俩工具就像物业公司和招商部，一个管装修，一个管租户。
第二步，把Bootstrap的SCSS文件扔进src/sass，再把WordPress的wp-scripts配置到webpack里。这一步像极了装修队进场：水电先走，墙面后刷。webpack.config.js里加一句：
module.exports = {
...defaultConfig,
entry: {
main: 【'./src/sass/app.scss', './src/js/app.js'】,
},
};
第三步，写主题文件。老王不爱写PHP，但这一步逃不掉。functions.php里先注册样式：
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('bootstrap-style', get_template_directory_uri() . '/dist/main.css');
wp_enqueue_script('bootstrap-script', get_template_directory_uri() . '/dist/main.js', 【】, null, true);
});
这就好比给商场贴上“欢迎光临”四个大字，告诉WordPress：咱们家新来了Bootstrap这位租客，别收错房租。
第四步，把Bootstrap的组件搬进WordPress模板。header.php里直接抄一份Bootstrap的Navbar，再把wp_nav_menu塞进去，菜单就能自动生成。老王一边写一边哼小曲：导航栏就像商场指示牌，顾客不迷路，租金才能翻番！
第五步，用wp_query把文章循环出来，套上Bootstrap的Card组件。文章标题当Card-title，缩略图当Card-img-top，底部再放个按钮“立即阅读”。老王眯眼一看，这不就是“精品商铺招租”吗？点击阅读等于“进店消费”，转化率嗖嗖的！
第六步，打包上线。npm run build，生成dist文件夹，压缩、上传、启用主题，一气呵成。老王端着保温杯，刷新页面，Bootstrap的清爽界面和WordPress的文章列表完美结合，就像万达广场里同时开了星巴克和海底捞——流量互导，双赢！
写到这里，老王掐指一算，前后不到两小时，Bootstrap和WordPress就从“互不相识”变成“勾肩搭背”。各位若是怕忘，下面附赠一份“收租清单”，按步骤打勾，保准不踩坑。
教程：Bootstrap调用WordPress的完整收租清单（实操版）
环境准备
• 本地装WordPress ≥ 5.8
• 全局安装Node ≥ 16、npm ≥ 8
• 命令行执行：
npm init -y
npm install bootstrap@latest @wordpress/scripts@latest --save-dev
文件结构
rent-house/
├── src/
│ ├── sass/app.scss // 引入Bootstrap SCSS
│ └── js/app.js // 引入Bootstrap JS
├── dist/ // 构建输出目录
├── index.php
├── style.css // WordPress主题头信息
└── functions.php
引入Bootstrap
// src/sass/app.scss
@import "~bootstrap/scss/bootstrap";
// src/js/app.js
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
配置webpack
新建webpack.config.js：
const defaultConfig = require('@wordpress/scripts/config/webpack.config');
module.exports = {
...defaultConfig,
entry: {
main: 【'./src/sass/app.scss', './src/js/app.js'】,
},
};
打包命令
package.json添加脚本：
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
}
注册资源
functions.php：
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('bootstrap-style', get_template_directory_uri() . '/dist/main.css');
wp_enqueue_script('bootstrap-script', get_template_directory_uri() . '/dist/main.js', 【】, null, true);
});
创建模板
• header.php：复制Bootstrap Navbar，替换菜单为wp_nav_menu()
• index.php：使用WP_Query循环文章，Bootstrap Card输出
• footer.php：放版权和Bootstrap JS
启用与调试
• 把rent-house文件夹扔到wp-content/themes/
• 后台启用主题
• npm run build，刷新首页，查看Console无报错即成功
加分项
• 使用Bootstrap Grid做响应式布局
• 用Custom Post Type做产品展示，配ACF字段
• 部署到服务器后，打开Lighthouse跑分，90分以上请给自己发奖金！
好了，老王收租结束，各位码农照着清单打勾，下一个“小目标”就是：让网站流量像房租一样，月月准时到账！
