正文

别再被主题绑架了！用WordPress REST API手搓一个专属网站

机房老炮
机房老炮 V管理员 /1.17 K阅读/3评论
0801
文章最后更新时间2026年08月01日，若文章内容或图片失效，请留言反馈！

如果你已经厌倦了千篇一律的主题模板，想要彻底掌控网站的前端表现，那么这篇文章就是为你准备的。适用人群：懂一点HTML/CSS/JavaScript基础，或者压根不想碰PHP，但想用WordPress作为内容管理后台，自己动手构建前端的建站新手，你不需要会写PHP，也不需要看懂WordPress的底层函数，只需要跟着下面的步骤，就能把网站“拆”成纯数据接口，再用任何你喜欢的前端技术（甚至一个静态HTML文件）搭起来。

完整搭建步骤

第一步：准备一个干净的WordPress站点

如果你已经有WordPress站点，请跳到最后检查固定链接设置，如果从零开始，在本地或服务器上安装最新版WordPress，并确保能够正常访问后台，我们不需要安装任何付费主题，默认的“Twenty Twenty-Four”主题即可用，因为我们要用它只是当“内容仓库”。

第二步：开启漂亮的固定链接

进入 设置 → 固定链接，选择“文章名”这种非默认格式，/%postname%/。这一步至关重要，因为WordPress REST API的很多路由依赖重写规则，如果你保持默认的“朴素”格式，很多接口会返回 rest_no_route 错误,设置后点击保存。

第三步：测试你的API是否“活”了

在浏览器地址栏输入：你的域名/wp-json/wp/v2/posts
如果你能看到一长串JSON数据，恭喜，你的REST API已经可用了，这些数据就是文章列表，里面有标题、链接、作者等信息，如果看到404,先回头检查第二步。

别再被主题绑架了！用WordPress REST API手搓一个专属网站

别再被主题绑架了！用WordPress REST API手搓一个专属网站

第四步：搭建最简单的前端页面

新建一个文件夹（my-site），在里面创建一个 index.html，用编辑器打开,写一个最基本的骨架：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">我的API网站</title>
</head>
<body>
    <h1>最新文章</h1>
    <ul id="post-list"></ul>
    <script>
        fetch('http://你的域名/wp-json/wp/v2/posts')
            .then(res => res.json())
            .then(posts => {
                const list = document.getElementById('post-list');
                posts.forEach(post => {
                    const li = document.createElement('li');
                    const a = document.createElement('a');
                    a.href = post.link;
                    a.textContent = post.title.rendered;
                    li.appendChild(a);
                    list.appendChild(li);
                });
            });
    </script>
</body>
</html>

用浏览器打开这个 index.html，如果能看到文章标题列表，说明你的第一个“无头WordPress”网站已经跑起来了。

第五步：获取单篇文章内容

点击列表里的链接，会跳到WordPress原站页面，我们当然不想要这种体验，要做一个完全自定义的页面，你需要拦截点击事件，然后用API获取单篇内容，给每个链接加上 data-id：

a.dataset.id = post.id;
a.addEventListener('click', async function(e) {
    e.preventDefault();
    const id = this.dataset.id;
    const res = await fetch(`http://你的域名/wp-json/wp/v2/posts/${id}`);
    const post = await res.json();
    document.getElementById('content').innerHTML = post.content.rendered;
});

在HTML里加一个 <div id="content"></div> 用来展示文章正文。

第六步：处理列表摘要与特色图片

默认的文章列表接口并没有返回特色图片的URL，你需要用另一个接口：在请求列表时加上参数 _embed=1，这样每条文章里会出现 _embedded["wp:featuredmedia"] 数据，里面就有图片链接,修改fetch地址：

fetch('http://你的域名/wp-json/wp/v2/posts?_embed=1')

然后在循环里判断：

const img = post._embedded && post._embedded['wp:featuredmedia'];
if (img) {
    const imageUrl = img[0].source_url;
    // 创建<img>元素并插入
}

配置要点（否则你后面会抓狂）

固定链接必须是“非朴素”格式

不多说，这是API工作的前提，如果换服务器后API打不开,第一件事检查这里。

启用“应用密码”实现身份认证

如果你以后想通过API发布文章、更新内容，就需要认证，WordPress 5.6以上自带“应用密码”，方法：在后台 个人资料 → 应用密码，生成一组密码（格式像 xxxx xxxx xxxx），调用需要认证的接口时,在HTTP请求头里加：

Authorization: Basic base64(username:application_password)

或者使用 wp-json/wp/v2/posts?context=edit 时，必须带上认证信息，新手最容易犯的错：用管理员密码直接认证，结果无效。必须用应用密码，不能用登录密码。

跨域问题（CORS）

如果你的前端页面不是放在WordPress同一个域名下（比如你用Vue/React开发，页面跑在 localhost:8080），浏览器会因为跨域阻止请求，解决办法：安装官方推荐的插件“CORS Enable”或手动在服务器加响应头，但更简单的方式是：把你的前端文件直接放进WordPress主题目录或子目录下，用同一个域名访问,就完全避开CORS。

使用“自定义字段”和“高级自定义字段”

如果你希望文章显示价格、颜色、自定义按钮文字，需要在后台添加自定义字段，通过REST API获取这些字段时，需要先在后台注册该字段的显示，在主题的 functions.php 里加：

register_rest_field('post', 'subtitle', [
    'get_callback' => function () {
        return get_post_meta(get_the_ID(), 'subtitle', true);
    },
]);

现在API返回的JSON里就有 subtitle 字段了。

常见踩坑提醒（血泪史）

坑1：所有API都返回404

别怀疑代码，先回后台把固定链接改成“文章名”再存一次，如果还是不行，去后台“设置 → 固定链接”点击“保存更改”强制刷新重写规则，服务器如果是Nginx，检查 rewrite 规则是否包含 /wp-json 的放行。

坑2：文章内容HTML被转义到没法看

你直接用 post.content.rendered 时，里面会有大量 \n 和 <p> 标签，这是正常的，如果你用 innerHTML 插入，会正常渲染，如果你用 textContent，就会看到一堆标签代码。内容用 innerHTML用 textContent 或 innerHTML 均可里也可能有实体字符）。

坑3：图片路径是WordPress原站的，不是你自己的

图片默认存在WordPress域名下，如果你做的是完全独立的前端，图片跨域问题不大，因为 <img> 标签不受CORS限制，但是如果某些图片是协议相对路径 //yourdomain.com 没问题；如果是 http:// 并且在HTTPS页面里，会被浏览器拦截，建议所有图片输出前用正则替换成 https:// 或绝对路径。

坑4：分页与翻页失灵

文章列表默认一次只返回10篇，分页参数是 page：/wp-json/wp/v2/posts?page=2，但是你需要从响应头 X-WP-TotalPages 里读取总页数，新手直接拿数组长度来算分页，永远不对,正确做法：

const totalPages = res.headers.get('X-WP-TotalPages');

坑5：自定义文章类型（CPT）的接口不出来

如果你注册了 book 这种自定义内容类型，需要在 register_post_type 的时候设置 'show_in_rest' => true，否则API里没有 wp/v2/book 路由，老主题里很多没开这个,导致你一直测不出来。

坑6：搜索接口和页面接口搞混

搜索文章用 ?search=关键词，搜索页面用 /wp-json/wp/v2/pages?search=关键词，但如果你用分类过滤，请用 ?categories=分类ID 而不是分类名称，管理员后台看到的分类ID可以通过接口 /wp-json/wp/v2/categories 获取。

让网站更像一个真正的“网站”

上面你已经会获取文章列表和详情了,再进一步：

  • 页头导航：调用 /wp-json/wp/v2/pages 生成菜单。
  • 分类筛选：调用 /wp-json/wp/v2/categories 生成分类按钮。
  • 提交评论：通过 POST /wp-json/wp/v2/comments 发送评论申请,需带上认证信息。
  • 定制端点：如果你需要组合多组数据，最新文章+推荐文章”，可以在主题里自定义 /custom/v1/home 端点,一次性返回JSON。

试试看，你会发现WordPress不再是那个“必须装主题”的笨重系统，而是变成了一个灵活的内容API服务，你完全可以用纯静态部署你的前端，也可以把前端打包成App，只要你的JSON数据是通的,整个世界都是你的前端。

跟着这篇文章操作，你已经绕过了最大的几个坑，剩下的事情，就是打开开发者工具，慢慢折腾——网站这个东西,越折腾越有趣。