Bootstrap与WordPress的奇妙邂逅：简单教程
bootstrap调用wordpress

首页 2025-09-02 12:41:25

哎呀呀，各位小伙伴，今天本少侠嘴角都快咧到耳根子了！为啥这么开心？因为我刚刚把“bootstrap调用wordpress”这道看似八竿子打不着的难题，玩成了乐高积木！别眨眼，且听我边哼小曲儿边拆解。

事情是这样的——昨晚我啃着辣条刷站点，突发奇想：要是让极简风的前端框架和那位老牌内容巨人牵个小手，会不会蹦出奇妙的火花？说干就干，撸起袖子开整！

第一步：把巨人请出家门
WordPress古早归古早，脾气可不小。先给它装个REST API插件当“翻译官”，这样它就能说JSON这种通用语言了。装好后，在固定链接里点个“朴素”，保存！巨人说：“我已准备就绪。”

第二步：给前端小帅哥递名片
打开Bootstrap项目，新建一个api.js文件。写三行代码：

JavaScript

复制

const API = 'https://你的域名.com/wp-json/wp/v2/posts';
fetch(API).then(r=>r.json()).then(posts=>{
  let html = '';
  posts.forEach(p=>{
    html += `
      
        
          ${p.title.rendered}
          ${p.excerpt.rendered}
          ${p.link}" class="btn btn-primary">继续阅读
        
      `;
  });
  document.getElementById('post-list').innerHTML = html;
});

存盘，浏览器一刷新——嚯！卡片式文章瀑布流，简约又高级，WordPress老脸都笑开花。

第三步：让巨人换新装
想让列表更风骚？Bootstrap的网格系统走起！把最外层改成

，再把每个卡片包在

里，瞬间响应式，手机平板全hold住。

第四步：加点魔法彩蛋
巨人有时候偷懒，不给我特像？没关系，咱们在JS里补一句：

JavaScript

复制

const img = p._embedded?.【'wp:featuredmedia'】?.【0】?.source_url || '默认图地址';

然后在卡片顶部插张，一张图秒杀全场！

第五步：一键部署，开心上线
把前端扔到Netlify，把WordPress继续留在原来的虚拟主机。两边域名配好CORS，HTTPS证书一上，齐活！打开站点，首屏秒开，内容管理还在熟悉的后台，爽到飞起！

看着浏览器里那排排站的Bootstrap卡片，我乐得原地转圈：谁说新旧不能混搭？只要思路活，老巨人也能跳街舞！

——开心收工，辣条奖励自己两根！

================================================ 教程：如何用Bootstrap远程调用WordPress内容
（一步一步跟我来，新手也能一次成功）

准备工作
• 一个已安装好的WordPress站点（建议5.0+版本）。
• 本地或线上已初始化的Bootstrap项目（可用CDN或npm安装@5.x皆可）。
开启WordPress的REST API
a. 登录后台 → 插件 → 安装插件 → 搜索“Application Passwords”并启用。
b. 用户 → 你的用户 → 拉到最底部生成应用密码，复制备用（只用于需要写权限的场景，纯读取可跳过）。
c. 固定链接 → 选择“文章名”或“朴素”并保存，确保/wp-json路由可用。
d. 浏览器访问 https://你的域名.com/wp-json/wp/v2/posts 能看到JSON即成功。

在Bootstrap页面中创建挂载点
在index.html里放：

HTML

预览

复制

[/span>div class="container"
  [/span>h1 class="my-4"最新文章h1
  [/span>div id="post-list" class="row row-cols-1 row-cols-md-2 g-4"div
div

编写调用脚本
新建js/wp-loader.js：

JavaScript

复制

(async () => {
  const res = await fetch('https://你的域名.com/wp-json/wp/v2/posts?per_page=6&_embed');
  const posts = await res.json();
  const list = document.getElementById('post-list');
  posts.forEach(p=>{
    const img = p._embedded?.【'wp:featuredmedia'】?.【0】?.source_url || 'https://via.placeholder.com/600x400';
    list.insertAdjacentHTML('beforeend', `
      
        
          ${img}" class="card-img-top" alt="${p.title.rendered}">
          
            ${p.title.rendered}
            ${p.excerpt.rendered.replace(/[span class="token char-class">【^】+/g,'').substring(0,100)}…
            ${p.link}" class="btn btn-primary btn-sm">阅读全文
          
        
      
    `);
  });
})();

在index.html底部引入：

HTML

预览

复制

[/span>script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"script
[/span>script src="js/wp-loader.js"script

解决跨域（CORS）
若域名不一致，在WordPress主题的functions.php里加：
php
复制
```
add_action('send_headers', function(){
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: GET');
});
```
生产环境建议把*换成前端域名，提高安全性。
上线&缓存
• 前端可打包后放Netlify/Vercel，享受CDN加速。
• WordPress端可装WP Super Cache，减少API延迟。
• 若想SSR或静态生成，可用Next.js + @wordpress/source插件，思路相同。
常见问题速查
• 403 Forbidden → 检查固定链接和应用密码。
• 图片不显示 → 确认_embed参数已加，且媒体文件公开。
• 中文乱码 → 保证wp-config.php里DB_CHARSET为utf8mb4。