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）將其部署到託管提供商。對於快速，更輕鬆的替代方案，請立即查看。