البرنامج التعليمي ووردبريس

استخدام NextJS مع WordPress بدون رأس

25 فبراير

يعد الفصل بين الواجهة الأمامية والخلفية نموذج تطوير يعمل على تحسين أداء موقع الويب وكفاءة تعاون الفريق。في ووردبريس，通过使用例如React.js的前端技术，مدمج مع WordPress REST API，يمكن تحقيق التطوير المستقل وتبادل البيانات للواجهة الأمامية والخلفية。يعزز هذا النهج مرونة موقع الويب وقابلية التوسع，ولكن عليك أيضًا الانتباه إلى التحديات مثل تحسين محركات البحث وإدارة الأخطاء。

تطوير الويب التقليدي，تم دمج كود الواجهة الأمامية والخلفية بشكل وثيق。وهذا يعني أن الواجهة (HTML、CSS) والمنطق (PHP、عمليات قاعدة البيانات) يتم التعامل معها في نفس الموقع。لكن，هذا النهج حيث تصبح المواقع أكثر تعقيدًا وغنية بالمحتوى，تم الكشف عن حدودها。

WordPress Management

前后端分离是一种网站开发模式，إنها طبقات واجهة المستخدم والبيانات。تركز الواجهة الأمامية فقط على طبقة العرض，هذا هو الجزء الذي يتفاعل معه المستخدم，تقوم الواجهة الخلفية بمعالجة البيانات、عمليات المنطق والخادم。يتواصل الاثنان من خلال واجهات برمجة التطبيقات，واجهات برمجة التطبيقات (APIs) هي واجهات تسمح لتطبيقات البرامج المختلفة بالعمل مع بعضها البعض。

为什么要在 WordPress 中实现前后端分离？

  1. 性能提升：يتم تحميل تطبيقات الواجهة الأمامية بسرعة，احصل على البيانات من الواجهة الخلفية فقط عند الحاجة إليها，تحسين سرعة الاستجابة وتجربة المستخدم للموقع بشكل كبير。
  2. المرونة：يمكن لفرق التصميم والتطوير العمل بشكل مستقل，لن تتداخل مع بعضها البعض。这对于大型项目和团队来说，是一个巨大的优势。
  3. 扩展性：由于前后端的分离，增加新功能或进行规模扩展变得更加容易。
  4. 多平台支持：一套后端系统可以同时服务于网站、移动应用、甚至是桌面应用。

如何实现 WordPress 的前后端分离？

  1. 选择合适的前端技术：决定采用什么技术栈对前端开发至关重要。常见的技术选择包括React.js、Vue.js 等。这些都是现代 JavaScript 框架，可以创建动态、交互式的用户界面。
  2. 利用 WordPress REST API：WordPress 提供了一个强大的 REST API，允许开发者读取、写入、修改和删除网站数据（如文章、页面、媒体等）。通过使用 REST API，前端应用可以通过 HTTP 请求从 WordPress 后端检索或发送数据。
  3. 创建自定义端点：虽然 WordPress REST API 已经提供了大量的端点，但有时您可能需要更特定的功能。在这种情况下，您可以创建自定义端点，这些端点是与您的应用逻辑相对应的 API URL。
  4. 认证与权限：当涉及到敏感数据或需要用户登录的功能时，你需要处理认证（用户的身份）和授权（用户可以做什么）。WordPress 提供了几种认证方法，包括 Cookie 认证、应用密码和 OAuth。
  5. 静态资源的管理：前后端分离后，前端的静态资源（如 JavaScript、CSS、图像文件等）可以使用 CDN（内容交付网络）来加速加载。
  6. 错误处理和调试：使用前后端分离架构，特别是涉及到 API 时，有效的错误处理和调试变得非常重要。确保你的前端应用能够妥善处理来自后端的错误信息，并且使用如 Chrome 开发者工具等工具进行调试。
  7. SEO 优化：前后端分离可能会影响搜索引擎优化（SEO），因为搜索引擎可能无法正确抓取完全由 JavaScript 生成的内容。解决这个问题的技术之一是使用 SSR（服务器端渲染）或预渲染内容，确保搜索引擎可以读取网站内容。

WordPress在全球超过 13 亿个网站上使用,它非常适合作为无头 CMS。NextJS是一个基于 React 构建的框架,可为您提供惊人数量的功能,否则您需要自己设置这些功能(静态渲染、捆绑、预取等),并提供超快速和高性能的网站。让我们将两者结合起来创建一个超快速的无头 WordPress 网站!

先决条件:

  • NodeJS和React的基本了解
  • 一个现有的 WordPress 网站,其中包含一些帖子和页面

我们将在本演练中使用Colby Fayock 的Next.js WordPress Starter (https://github.com/colbyfayock/next-wordpress-starter/)。这个 Next.js WordPress Starter 项目旨在“将 WordPress 作为一个无头 CMS,并使用 Next.js 创建可以部署在任何地方的静态体验。"

Next.js WordPress Starter 项目允许我们轻松提取您通常期望在 WordPress 网站中的所有内容(بريد、页面、作者列表、全局搜索),并通过 GraphQL 端点将其引入 NextJS。该项目正在积极开发中,因此请关注 repo 以获取更多功能更新!

实操入门

WordPress

Next.js WordPress Starter 使用 GraphQL,因此首先登录您的 WordPress 网站并安装WPGraphQL。如果您没有现有的 WordPress 网站,我已经设置了一个虚拟项目,您可以在以下位置使用:https://fake-data.better-wordpress.dev。

Next.js WordPress 启动器

在前端开始使用 NextJS 的最快方法是打开终端,导航到要开始工作的文件夹,然后运行:

yarn create next-app -e https://github.com/colbyfayock/next-wordpress-starter

安装完成后,打开代码编辑器并将.env.local文件添加到项目的根目录。这是我们要设置环境变量的地方,以便 NextJS 知道从哪里获取我们的数据。

Starter Project 使用的环境变量是:WORDPRESS_GRAPHQL_ENDPOINT,所以我使用WORDPRESS_GRAPHQL_ENDPOINT="https://fake-data.better-wordpress.dev/graphql"来获取一些虚拟数据。您也可以在测试时使用这个虚拟 WordPress 数据,但是当您准备好上线时,不要忘记用您自己的 WordPress 端点替换 url!

[.env.local 文件的屏幕截图](https://res.cloudinary.com/practicaldev/image/fetch/s–yTHzS9ou–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// /dev-to-uploads.s3.amazonaws.com/uploads/articles/x1uabk6infw3yqhlchrx.jpg)

回到您的终端,运行yarn dev会启动一个开发服务器。现在不是查看新 NextJS 网站的性能和捆绑包大小的时候(我在第一次尝试 NextJS 时犯的一个错误),尽管您应该始终确保发布尽可能小的捆绑包大小。我们稍后会谈到。

在终端中运行yarn devخلف,您现在可以打开浏览器并看到您的 Headless WordPress 站点运行在:http://localhost:3000。

恭喜——您现在在 JAM 堆栈上运行了一个完全无头的 WordPress 网站,其中包括您所有的帖子、页面和实时搜索!如果您使用的是我的假数据 API,那么您的网站应该类似于此屏幕截图:

[来自在 NextJS

上运行的无头 WordPress 安装的数据屏幕截图](https://res.cloudinary.com/practicaldev/image/fetch/s–yL18MnTZ–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto% 2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plfscqemyudt0qx2twwr.jpg)

来自在 NextJS 上运行的 Headless WordPress 安装的数据的屏幕截图

此时,您可以开始自定义启动项目,使其外观和功能完全符合您的要求。بعد الانتهاء,是时候部署您的网站让全世界看到了!

部署您的 NextJS 网站

在运行生产构建之前,使用您的实时 URL 更新您的package.json文件(第 3 行)。这是将传递到您的站点地图中的 URL——对于 SEO 非常重要。

[package.json 文件的屏幕截图](https://res.cloudinary.com/practicaldev/image/fetch/s–GL6yBr2m–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// dev-to-uploads.s3.amazonaws.com/uploads/articles/5fnd6zc8jxfidnzf9nx2.jpg)

在您的终端中运行yarn build实际上会获取您的所有帖子和页面,创建站点地图和静态网站的优化生产版本,准备部署到您的服务器。

运行yarn buildخلف,您可以运行yarn start来运行本地服务器并测试您的本地生产版本。这是查看捆绑包大小和站点速度的最佳时机,因为它很好地代表了您的站点将如何在服务器上响应。

我使用vercel.com来部署 better-wordpress.dev。 Vercel 是构建 NextJS 的同一团队,他们有一个慷慨的免费层,所以在那里部署它是非常有意义的。

我目前正在撰写博客文章,解释如何将 NextJS 部署到 Vercel、Netlify 和其他主机——但与此同时,Vercel 文档非常棒:https://nextjs.org/docs/deployment

最后的话

您现在拥有一个在 JAM 堆栈上运行的功能齐全且速度极快的网站,在前端使用 NextJS 并为您的数据使用 WordPress。

前后端分离不是一种全新的概念，但它在 WordPress 生态系统中正变得越来越流行。它提供了无与伦比的灵活性和扩展性，尤其是对于那些需要高性能和多平台支持的复杂项目。لكن，它也带来了其自身的挑战，如 SEO 优化和错误管理。لذلك，在决定采用这种结构之前，确保您已经考虑了这些因素，并准备好投入额外的时间进行开发和维护。

عن قسم التحرير

فريق التحرير في Kuajinggu هو فريق من خبراء WordPress，بقيادة ديلان，在 WordPress、مضيف افتراضي、التجارة الإلكترونية、أكثر من 10 سنوات من الخبرة في كبار المسئولين الاقتصاديين والتسويق。Kuajinggu التي تم إنشاؤها على 2014 سنة，إنه حاليًا أكبر موقع مجاني لموارد WordPress في الصناعة，ويكيبيديا ، وغالبا ما تسمى ووردبريس。

أحدث حل مشكلة انقطاع معرف مقالة WordPress بشكل مثالي- فعالة في الاختبارات الشخصية
الرجوع للقائمة
اكبر سنا قائمة موارد الروابط الخلفية SEO (الرابط الخارجي).：شراء منصة الارتباط الخارجي、أداة الارتباط、استراتيجية الارتباط الخارجي (2024)