wp decoupled

WP脫鉤⚡

這是用於WordPress的React主題樣板，它使用Next JS，WebPack，Babel，Node，Express構建。

實時演示網站。

現場演示

演示？

入門 ？

這些說明將使您在本地計算機上啟動該項目的副本，以開發目的。

安裝？

1. 克隆此倉庫中的[email protected]:rtCamp/wp-decoupled.git
2. cd wp-decoupled
3. nvm use
4. npm install

配置後端（WordPress網站）？

1。在WordPress上添加GraphQl支持

1. 在WordPress插件目錄中克隆並激活以下插件：

   • wp-graphql暴露了WordPress的GraphQl
   • wp-graphql-jwt-partentication此插件將擴展WP-GraphQL插件，以使用JWT提供身份驗證。
   • wp-graphiql為WP-Admin提供GraphiQl IDE（遊樂場）
   • WP-GraphQL-WooCommerce將WooCommerce功能添加到WPGRAPHQL模式（測試至WP-GraphQL-WooCommerce的V0.7.0）

2. 您還可以導入WooCommerce插件隨附的默認WooCommerce產品開發（如果您在WordPress安裝中沒有任何產品）WP儀表板>工具> WooCommerce產品（CSV）：WooCommerce默認產品CSV文件CSV文件可在wp-content/plugins/woocommerce/sample-data/sample_products.csv

2。用於身份驗證

一個。您可以使用您選擇的任何秘密令牌，但是最好使用WordPress鹽生成器（https://api.wordpress.org/secret-key/1.1.1/salt/）生成一個秘密來生成一個秘密。並且只需拿起任何一個令牌，然後將其添加代替下面的“秘密token”：

在您的WordPress目錄的wp-config.php中定義一個秘密：

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

b。根據您的特定環境，您可能必須研究如何啟用這些標題，但是在Apache中，您可以在.htaccess中執行以下操作：

 SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

配置前端？

• 重命名.env.example為.env並更新您的詳細信息

 SITE_URL=http://localhost:3000
NEXT_PUBLIC_WOO_SITE_URL=http://yourwocommercesite.com
WOO_CONSUMER_KEY=xxxxx
WOO_SECRET=xxxxx

命令

• npm run dev在開發模式下運行節點服務器
• npm run dev:inspect使用Inspector運行DEV服務器
• npm run server運行下一個生產服務器
• npm run lint運行襯裡
• npm run format運行格式
• npm run build創建下一個構建

在手機上使用PWA

• 在手機上打開Chrome的網站，然後單擊“添加到主屏幕”。
• 它將在您的手機上下載並保存為漸進式Web應用程序。
• 一旦添加了移動設備上的WP Decoupled應用程序。
• 即使您離線，此PWA也將起作用。

分支信息？

1. 大師主反應WooCommerce主題
2. 開發進行測試
3. WP-Docoupled-Boilerplate樣板將使用PWA實施（正在進行的工作）啟動新的React主題項目

作者

• rtcamp

貢獻者？

• 伊姆蘭說
• 穆罕默德·穆辛（Muhammad Muhsin）
• Divyaraj Masani
• 賽義德·塔基（Sayed Taqui）
• Vipin Kumar Dinkar
• Belal Dif

執照 ？

該項目已根據MIT許可證獲得許可 - 有關詳細信息，請參見許可證文件。

您感興趣嗎？