{"id":13377,"date":"2023-08-07T09:00:00","date_gmt":"2023-08-07T16:00:00","guid":{"rendered":"https:\/\/wordherd.io\/?p=13377"},"modified":"2026-07-02T11:39:52","modified_gmt":"2026-07-02T15:39:52","slug":"building-headless-websites-with-the-wordpress-rest-api","status":"publish","type":"post","link":"https:\/\/wordherd.io\/zh\/blog\/building-headless-websites-with-the-wordpress-rest-api\/","title":{"rendered":"Building Headless Websites with the WordPress REST API"},"content":{"rendered":"<p class=\"wp-block-paragraph\">In the modern web development landscape, creating headless websites has gained significant traction. Headless architecture decouples the frontend from the backend, allowing developers to use different technologies for each layer. WordPress, a widely used content management system (CMS), offers a robust REST API that enables developers to build headless websites easily. In this article, we&#8217;ll explore how to connect to WordPress remotely via the REST API to create headless websites, along with some code examples.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before we dive into the code examples, ensure you have the following in place:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>WordPress Installation<\/strong>: Make sure you have a WordPress website set up and running. The REST API is available by default in recent versions of WordPress. If you don&#8217;t have a WordPress website or hosting, you can quickly spin up a managed WordPress website at <a href=\"https:\/\/corral.host\/plans\">Corral<\/a>. <\/li>\n\n\n\n<li><strong>Authentication<\/strong>: To interact with the REST API, you&#8217;ll need to authenticate using the appropriate credentials. This can be achieved using basic authentication, OAuth, or JWT.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Connecting to the WordPress REST API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To connect to the WordPress REST API, you need to send HTTP requests to the API endpoints. These requests can be made using various programming languages and libraries. Here, we&#8217;ll demonstrate with JavaScript using the <code>fetch<\/code> API using basic authentication.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>const apiUrl = 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/';\nconst username = 'your_username';\nconst password = 'your_password';\n\n\/\/ Create a base64-encoded token from the username and password\nconst token = btoa(`${username}:${password}`);\n\n\/\/ Fetch posts using basic authentication\nfetch(apiUrl + 'posts', {\n  headers: {\n    Authorization: `Basic ${token}`\n  }\n})\n  .then(response => response.json())\n  .then(data => {\n    console.log(data); \/\/ Process the retrieved data\n  })\n  .catch(error => {\n    console.error('Error fetching data:', error);\n  });<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">apiUrl<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">username<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">your_username<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">password<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">your_password<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ Create a base64-encoded token from the username and password<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">token<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">btoa<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">`<\/span><span style=\"color: #81A1C1\">${<\/span><span style=\"color: #D8DEE9\">username<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #A3BE8C\">:<\/span><span style=\"color: #81A1C1\">${<\/span><span style=\"color: #D8DEE9\">password<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #ECEFF4\">`<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ Fetch posts using basic authentication<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">fetch<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">apiUrl<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">posts<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #88C0D0\">headers<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">Authorization<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">`<\/span><span style=\"color: #A3BE8C\">Basic <\/span><span style=\"color: #81A1C1\">${<\/span><span style=\"color: #D8DEE9\">token<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #ECEFF4\">`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">json<\/span><span style=\"color: #D8DEE9FF\">())<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">console<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">log<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ Process the retrieved data<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">catch<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">error<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">console<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">error<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Error fetching data:<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">error<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Replace <code>'your-wordpress-site.com'<\/code>, <code>'your_username'<\/code>, and <code>'your_password'<\/code> with your actual WordPress site URL, username, and password. Keep in mind that using basic authentication exposes your username and password in the request headers, which can be a security risk. To enhance security, consider using more secure authentication methods like OAuth or JWT.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember to always use HTTPS when working with authentication and transmitting sensitive information. Also, it&#8217;s a good practice to store sensitive credentials in a secure environment and avoid hardcoding them directly in your code for production applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a Headless Website<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we can fetch data from the WordPress site, let&#8217;s see how we can use this data to build a headless website using popular frontend frameworks like React.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assuming you have Node.js and npm installed, follow these steps to create a simple React app that displays WordPress posts:<\/p>\n\n\n\n<h3 class=\"kt-adv-heading_bdced9-f1 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_bdced9-f1\">Create a new React app:<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npx create-react-app headless-wordpress-app\ncd headless-wordpress-app<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">npx<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">create-react-app<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">headless-wordpress-app<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">cd<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">headless-wordpress-app<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"kt-adv-heading_54f291-d0 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_54f291-d0\">Install dependencies:<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npm install<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">npm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">install<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"kt-adv-heading_f7db0d-fe wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_f7db0d-fe\">Replace the contents of <code>src\/App.js<\/code> with the following code:<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import React, { useState, useEffect } from 'react';\n\nfunction App() {\n  const &#91;posts, setPosts&#93; = useState([]);\n\n  useEffect(() => {\n    fetch('https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts')\n      .then(response => response.json())\n      .then(data => {\n        setPosts(data);\n      })\n      .catch(error => {\n        console.error('Error fetching data:', error);\n      });\n  }, []);\n\n  return (\n    &lt;div>\n      &lt;h1>Headless WordPress App&lt;\/h1>\n      &lt;ul>\n        {posts.map(post => (\n          &lt;li key={post.id}>{post.title.rendered}&lt;\/li>\n        ))}\n      &lt;\/ul>\n    &lt;\/div>\n  );\n}\n\nexport default App;<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">import<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">React<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">useState<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">useEffect<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">from<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">react<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">App<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#91;<\/span><span style=\"color: #D8DEE9\">posts<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">setPosts<\/span><span style=\"color: #ECEFF4\">&#93;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">useState<\/span><span style=\"color: #D8DEE9FF\">([])<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #88C0D0\">useEffect<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">fetch<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">json<\/span><span style=\"color: #D8DEE9FF\">())<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">setPosts<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">catch<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">error<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">console<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">error<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Error fetching data:<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">error<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">},<\/span><span style=\"color: #D8DEE9FF\"> [])<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;h1&gt;<\/span><span style=\"color: #D8DEE9FF\">Headless WordPress App<\/span><span style=\"color: #81A1C1\">&lt;\/h1&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;ul&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">posts<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">map<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">post<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">key<\/span><span style=\"color: #81A1C1\">={<\/span><span style=\"color: #D8DEE9\">post<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">id<\/span><span style=\"color: #81A1C1\">}&gt;{<\/span><span style=\"color: #D8DEE9\">post<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">title<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">rendered<\/span><span style=\"color: #81A1C1\">}&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        ))<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;\/ul&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  )<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">export<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">default<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">App<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"kt-adv-heading_2622a6-8b wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_2622a6-8b\">Start the development server:<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npm start<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">npm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">start<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This React app will display a list of WordPress post titles. You can customize the app&#8217;s appearance and functionality further, integrating various components and features.<\/p>\n\n\n\n<h2 class=\"kt-adv-heading_ef7213-a0 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_ef7213-a0\">\u7ed3\u8bba<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The WordPress REST API opens up exciting opportunities for building headless websites. By connecting to WordPress remotely via the REST API, developers can create dynamic and feature-rich frontend applications using modern frameworks like React, Angular, or Vue.js. This approach allows for greater flexibility and scalability while still leveraging the power of WordPress as a content management system. With the provided code examples and guidelines, you&#8217;re ready to embark on your journey to building compelling headless websites with WordPress.<\/p>","protected":false},"excerpt":{"rendered":"<p>In the modern web development landscape, creating headless websites has gained significant traction. Headless architecture decouples the frontend from the backend, allowing developers to use different technologies for each layer. WordPress, a widely used content management system (CMS), offers a robust REST API that enables developers to build headless websites easily. In this article, we&#8217;ll [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":14321,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"builders":[],"industry":[],"platform":[],"class_list":["post-13377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Building Headless Websites with the WordPress REST API - WordHerd WordPress Migration<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wordherd.io\/zh\/\u535a\u5ba2\/building-headless-websites-with-the-wordpress-rest-api\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Headless Websites with the WordPress REST API - WordHerd WordPress Migration\" \/>\n<meta property=\"og:description\" content=\"In the modern web development landscape, creating headless websites has gained significant traction. Headless architecture decouples the frontend from the backend, allowing developers to use different technologies for each layer. WordPress, a widely used content management system (CMS), offers a robust REST API that enables developers to build headless websites easily. In this article, we&#8217;ll [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wordherd.io\/zh\/\u535a\u5ba2\/building-headless-websites-with-the-wordpress-rest-api\/\" \/>\n<meta property=\"og:site_name\" content=\"WordHerd WordPress Migration\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/wordherdio\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T16:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-02T15:39:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wordherd.io\/wp-content\/uploads\/wordherd-headless-react-tutorial-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"498\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"WordHerd\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wordherdio\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"WordHerd\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/\"},\"author\":{\"name\":\"WordHerd\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/#\\\/schema\\\/person\\\/373419b97c0fbc45a3a16462bdba0fac\"},\"headline\":\"Building Headless Websites with the WordPress REST API\",\"datePublished\":\"2023-08-07T16:00:00+00:00\",\"dateModified\":\"2026-07-02T15:39:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/\"},\"wordCount\":482,\"publisher\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/wordherd-headless-react-tutorial-1.jpg\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/\",\"url\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/\",\"name\":\"Building Headless Websites with the WordPress REST API - WordHerd WordPress Migration\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/wordherd-headless-react-tutorial-1.jpg\",\"datePublished\":\"2023-08-07T16:00:00+00:00\",\"dateModified\":\"2026-07-02T15:39:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/wordherd-headless-react-tutorial-1.jpg\",\"contentUrl\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/wordherd-headless-react-tutorial-1.jpg\",\"width\":850,\"height\":498,\"caption\":\"wordherd headless react tutorial 1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/building-headless-websites-with-the-wordpress-rest-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wordherd.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building Headless Websites with the WordPress REST API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/#website\",\"url\":\"https:\\\/\\\/wordherd.io\\\/\",\"name\":\"WordHerd WordPress Migration\",\"description\":\"Website Migration Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wordherd.io\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/#organization\",\"name\":\"WordHerd WordPress Migration\",\"url\":\"https:\\\/\\\/wordherd.io\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/wordherd-trademark.png\",\"contentUrl\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/wordherd-trademark.png\",\"width\":1000,\"height\":315,\"caption\":\"WordHerd WordPress Migration\"},\"image\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/#\\\/schema\\\/person\\\/373419b97c0fbc45a3a16462bdba0fac\",\"name\":\"WordHerd\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g\",\"caption\":\"WordHerd\"},\"sameAs\":[\"https:\\\/\\\/wordherd.io\",\"https:\\\/\\\/www.facebook.com\\\/wordherdio\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/wordherd\",\"https:\\\/\\\/x.com\\\/wordherdio\"],\"url\":\"https:\\\/\\\/wordherd.io\\\/zh\\\/blog\\\/author\\\/wordherd\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building Headless Websites with the WordPress REST API - WordHerd WordPress Migration","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wordherd.io\/zh\/\u535a\u5ba2\/building-headless-websites-with-the-wordpress-rest-api\/","og_locale":"zh_CN","og_type":"article","og_title":"Building Headless Websites with the WordPress REST API - WordHerd WordPress Migration","og_description":"In the modern web development landscape, creating headless websites has gained significant traction. Headless architecture decouples the frontend from the backend, allowing developers to use different technologies for each layer. WordPress, a widely used content management system (CMS), offers a robust REST API that enables developers to build headless websites easily. In this article, we&#8217;ll [&hellip;]","og_url":"https:\/\/wordherd.io\/zh\/\u535a\u5ba2\/building-headless-websites-with-the-wordpress-rest-api\/","og_site_name":"WordHerd WordPress Migration","article_author":"https:\/\/www.facebook.com\/wordherdio\/","article_published_time":"2023-08-07T16:00:00+00:00","article_modified_time":"2026-07-02T15:39:52+00:00","og_image":[{"width":850,"height":498,"url":"https:\/\/wordherd.io\/wp-content\/uploads\/wordherd-headless-react-tutorial-1.jpg","type":"image\/jpeg"}],"author":"WordHerd","twitter_card":"summary_large_image","twitter_creator":"@wordherdio","twitter_misc":{"\u4f5c\u8005":"WordHerd","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/#article","isPartOf":{"@id":"https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/"},"author":{"name":"WordHerd","@id":"https:\/\/wordherd.io\/#\/schema\/person\/373419b97c0fbc45a3a16462bdba0fac"},"headline":"Building Headless Websites with the WordPress REST API","datePublished":"2023-08-07T16:00:00+00:00","dateModified":"2026-07-02T15:39:52+00:00","mainEntityOfPage":{"@id":"https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/"},"wordCount":482,"publisher":{"@id":"https:\/\/wordherd.io\/#organization"},"image":{"@id":"https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/#primaryimage"},"thumbnailUrl":"https:\/\/wordherd.io\/wp-content\/uploads\/wordherd-headless-react-tutorial-1.jpg","articleSection":["Uncategorized"],"inLanguage":"zh-Hans"},{"@type":"WebPage","@id":"https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/","url":"https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/","name":"Building Headless Websites with the WordPress REST API - WordHerd WordPress Migration","isPartOf":{"@id":"https:\/\/wordherd.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/#primaryimage"},"image":{"@id":"https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/#primaryimage"},"thumbnailUrl":"https:\/\/wordherd.io\/wp-content\/uploads\/wordherd-headless-react-tutorial-1.jpg","datePublished":"2023-08-07T16:00:00+00:00","dateModified":"2026-07-02T15:39:52+00:00","breadcrumb":{"@id":"https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/#primaryimage","url":"https:\/\/wordherd.io\/wp-content\/uploads\/wordherd-headless-react-tutorial-1.jpg","contentUrl":"https:\/\/wordherd.io\/wp-content\/uploads\/wordherd-headless-react-tutorial-1.jpg","width":850,"height":498,"caption":"wordherd headless react tutorial 1"},{"@type":"BreadcrumbList","@id":"https:\/\/wordherd.io\/blog\/building-headless-websites-with-the-wordpress-rest-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wordherd.io\/"},{"@type":"ListItem","position":2,"name":"Building Headless Websites with the WordPress REST API"}]},{"@type":"WebSite","@id":"https:\/\/wordherd.io\/#website","url":"https:\/\/wordherd.io\/","name":"WordHerd WordPress \u79fb\u8f6c","description":"\u7f51\u7ad9\u8fc1\u79fb\u670d\u52a1","publisher":{"@id":"https:\/\/wordherd.io\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wordherd.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":"Organization","@id":"https:\/\/wordherd.io\/#organization","name":"WordHerd WordPress \u79fb\u8f6c","url":"https:\/\/wordherd.io\/","logo":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/wordherd.io\/#\/schema\/logo\/image\/","url":"https:\/\/wordherd.io\/wp-content\/uploads\/wordherd-trademark.png","contentUrl":"https:\/\/wordherd.io\/wp-content\/uploads\/wordherd-trademark.png","width":1000,"height":315,"caption":"WordHerd WordPress Migration"},"image":{"@id":"https:\/\/wordherd.io\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/wordherd.io\/#\/schema\/person\/373419b97c0fbc45a3a16462bdba0fac","name":"WordHerd","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/secure.gravatar.com\/avatar\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g","caption":"WordHerd"},"sameAs":["https:\/\/wordherd.io","https:\/\/www.facebook.com\/wordherdio\/","https:\/\/www.linkedin.com\/company\/wordherd","https:\/\/x.com\/wordherdio"],"url":"https:\/\/wordherd.io\/zh\/blog\/author\/wordherd\/"}]}},"_links":{"self":[{"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/posts\/13377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/comments?post=13377"}],"version-history":[{"count":1,"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/posts\/13377\/revisions"}],"predecessor-version":[{"id":15220,"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/posts\/13377\/revisions\/15220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/media\/14321"}],"wp:attachment":[{"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/media?parent=13377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/categories?post=13377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/tags?post=13377"},{"taxonomy":"builders","embeddable":true,"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/builders?post=13377"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/industry?post=13377"},{"taxonomy":"platform","embeddable":true,"href":"https:\/\/wordherd.io\/zh\/wp-json\/wp\/v2\/platform?post=13377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}