headless wp starter下载 - headless wp starter源代码下载

headless wp starter

Ai源码

v2.0

下载

WordPress + React入门套件

Postlight的无头WordPress + React入门套件是一种自动化工具集，它将旋转三件事：

WordPress后端通过WP REST API和GraphQL提供数据。
一个由WP GraphQL API供电的样本React前端，该API支持帖子，页面，类别，菜单，搜索和用户登录。
另一个由WP REST API供电的Next.JS的另一个示例服务器端渲染的React前端。

您可以在此方便的介绍中阅读所有有关它的信息。

里面有什么：

一个自动安装程序，该安装程序引导一个核心WordPress安装，该安装提供了建立，稳定的REST API。
一个插入WordPress的较新的，过程中的GragsQl API。
您需要设置自定义帖子类型和自定义字段的WordPress插件（高级自定义字段和自定义帖子类型UI）。
在WP REST API中暴露这些自定义字段和WordPress菜单的插件（ACF到WP API和WP-Rest-API V2菜单）。
JWT身份验证插件：JWT WP REST和JWT WP GraphQl。
所有启动器WordPress主题代码和设置无头都需要，包括漂亮的永久链接，CORS Allow-Origin标头以及有用的日志记录功能，以便于调试。
使用WP迁移DB Pro及其随附的插件（需要许可证），用于从现有WordPress安装中轻松导入数据的机制。
由GraphQl驱动的样本，开启器前端React应用程序。
另一个示例启动器前端React应用程序，由Next.js呈现的服务器端，由WP REST API供电。
Docker容器和脚本来管理它们，以便轻松地运行前端React应用程序并在本地进行后端或将其部署给任何借助Docker Support的托管提供商。

让我们开始。

安装

先决条件：在开始之前，您需要安装Docker。在Linux上，您可能需要单独安装Docker-Compose。

Docker构成构建并默认启动四个容器： db-headless ， wp-headless ， frontend和frontend-graphql ：

 docker-compose up -d

等待几分钟，让Docker首次建立服务。初始构建后，启动只需几秒钟。

您可以按照Docker输出来查看构建进度和日志：

 docker-compose logs -f

另外，您可以使用一些有用的Docker工具，例如Kitematic和 /或Vscode Docker插件来遵循日志，启动 /停止 /删除容器和图像。

可选：您可以在WordPress仍在Docker上运行时本地运行前端：

 docker-compose up -d wp-headless
cd frontend && yarn && yarn start

容器运行后，您可以在浏览器中访问React前端和后端WordPress管理员。

前端

此入门套件提供了两个前端容器：

由WP REST API供电的frontend容器使用Next.js呈现服务器端，并在端口3000上暴露：http：// localhost：3000
frontend-graphql容器由GraphQl供电，在端口3001上暴露：http：// localhost：3001

这就是前端的样子：

前端屏幕截图

您可以通过运行docker-compose logs命令命令遵循yarn start输出，然后使用容器名称。例如：

 docker-compose logs -f frontend

如果需要重新启动该过程，请重新启动容器：

 docker-compose restart frontend

PS：在开发模式下浏览下一个js前端，由于按需构建页面，因此相对较慢。在生产环境中，页面负载将有显着改善。

后端

wp-headless容器在主机端口8080上公开Apache：

仪表板：http：// localhost：8080/wp-admin（默认凭据postlight / postlight ）
REST API：http：// localhost：8080/wp-json
GraphQL API：http：// localhost：8080/graphql

该容器包括一些开发工具：

 docker exec wp-headless composer --help
docker exec wp-headless phpcbf --help
docker exec wp-headless phpcs --help
docker exec wp-headless phpunit --help
docker exec wp-headless wp --info

Apache/PHP日志可通过docker-compose logs -f wp-headless获得。

数据库

db-headless容器在主机端口3307上公开MySQL：

 mysql -uwp_headless -pwp_headless -h127.0.0.1 -P3307 wp_headless

您还可以在容器上运行MySQL外壳：

 docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless

重新安装/导入

要重新安装WordPress，请运行：

 docker exec wp-headless wp db reset --yes && docker exec wp-headless install_wordpress

要从mysql中导入MySqLdump的数据，请运行：

 docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless < example.sql
docker exec wp-headless wp search-replace https://example.com http://localhost:8080

从另一个WordPress安装导入数据

您可以使用名为WP迁移DB Pro的插件来连接到另一个WordPress安装，并从中导入数据。（将需要专业许可证。）

为此，首先将.env中的MIGRATEDB_LICENSE和MIGRATEDB_FROM ，然后重新创建容器以进行更改。

 docker-compose up -d

然后运行导入脚本：

 docker exec wp-headless migratedb_import

如果您需要更多高级功能，请查看可用的WP-CLI命令：

 docker exec wp-headless wp help migratedb

扩展其余和GraphQl API

此时，您可以在WordPress管理员中开始设置自定义字段，并在必要时在Postlight无头WordPress启动器主题中创建自定义REST API端点。

主要主题代码位于wordpress/wp-content/themes/postlight-headless-wp中。

您还可以修改并扩展GraphQL API，创建自定义类型并注册解析器的示例位于以下： wordpress/wp-content/themes/postlight-headless-wp/inc/graphql 。

REST和GRAPHQL JWT身份验证

为了使WordPress用户能够通过前端应用登录登录，请使用WordPress Salt Generator之类的东西为JWT生成秘密，然后在wp-config.php中定义它

对于其余的API：

 define('JWT_AUTH_SECRET_KEY', 'your-secret-here');

对于GraphQl API：

 define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-here');

确保阅读JWT REST和JWT GraphQL文档以获取更多信息。

覆盖

请记住在您走时提起您的代码。

为了修改WordPress主题，您可以使用php_codesniffer这样：

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcs -v .

您也可以尝试自动使用PHPCS错误：

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcbf -v .

为了使JavaScript应用程序格式化和格式化，包括漂亮的和Eslint配置文件。

托管

大多数WordPress主机也不托管节点应用程序，因此，当该上线时，您需要为前端找到托管服务。

这就是为什么我们将Frontend应用程序打包在Docker容器中的原因，该应用程序可以通过Amazon Web Services或Google Cloud Platform（例如Amazon Web Services或Google Cloud Platform）将其部署到托管提供商。对于快速，更轻松的替代方案，请立即查看。