wp decoupled

wp decoupled ⚡

นี่คือชุดหม้อต้มธีม React สำหรับ WordPress ที่สร้างขึ้นด้วย JS, Webpack, Babel, Node, Express

เว็บไซต์สาธิตสด

การสาธิตสด

สาธิต?

เริ่มต้น?

คำแนะนำเหล่านี้จะทำให้คุณมีสำเนาโครงการและทำงานบนเครื่องในพื้นที่ของคุณเพื่อการพัฒนา

การติดตั้ง?

1. โคลน repo นี้ใน [email protected]:rtCamp/wp-decoupled.git
2. cd wp-decoupled
3. nvm use
4. npm install

กำหนดค่าแบ็กเอนด์ (ไซต์ WordPress)?

1. เพิ่มการรองรับ GraphQl บน WordPress

1. โคลนและเปิดใช้งานปลั๊กอินต่อไปนี้ในไดเรกทอรีปลั๊กอิน WordPress ของคุณ:

   • WP-GRAPHQL เปิดเผย GraphQL สำหรับ WordPress
   • WP-GRAPHQL-JWT-Authentication ปลั๊กอินนี้ขยายปลั๊กอิน WP-GRAPHQL เพื่อให้การรับรองความถูกต้องโดยใช้ JWT
   • wp-graphiql ให้ graphiql ide (สนามเด็กเล่น) ไปยัง WP-admin
   • WP-GRAPHQL-WOOCOMMERCE เพิ่มฟังก์ชันการทำงานของ WOOCOMMERCE ลงใน WPGRAPHQL SCHEMA

2. นอกจากนี้คุณยังสามารถนำเข้าผลิตภัณฑ์ WooCommerce เริ่มต้นที่มาพร้อมกับปลั๊กอิน WooCommerce เพื่อการพัฒนา (หากคุณไม่มีผลิตภัณฑ์ใด ๆ ในการติดตั้ง WordPress ของคุณ) WP Dashboard> เครื่องมือ> WooCommerce Products (CSV): ผลิตภัณฑ์เริ่ม wp-content/plugins/woocommerce/sample-data/sample_products.csv WooCommerce

2. สำหรับการรับรองความถูกต้อง

. คุณสามารถใช้โทเค็นความลับใด ๆ ที่คุณเลือก แต่จะเป็นการดีที่สุดถ้าคุณสร้างหนึ่งโดยใช้เครื่องกำเนิดเกลือ WordPress (https://api.wordpress.org/secret-key/1.1/salt/) เพื่อสร้างความลับ และเพียงแค่หยิบโทเค็นตัวใดตัวหนึ่งและเพิ่มเข้ามาแทนที่ 'ของคุณ-ลับ-เทน' ด้านล่าง:

กำหนดความลับใน wp-config.php ของไดเรกทอรี WordPress ของคุณ:

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

ข. ขึ้นอยู่กับสภาพแวดล้อมเฉพาะของคุณคุณอาจต้องค้นคว้าวิธีการเปิดใช้งานส่วนหัวเหล่านี้ แต่ใน 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 รันเซิร์ฟเวอร์ dev กับ ผู้ตรวจสอบ
• npm run server เรียกใช้เซิร์ฟเวอร์ Projecton Next
• npm run lint รัน linter
• npm run format ทำงานแบบฟอร์แมต
• npm run build สร้างงานสร้าง ครั้งต่อไป

ใช้ PWA บนมือถือ

• เปิดไซต์ใน Chrome บนมือถือของคุณจากนั้นคลิกที่เพิ่มลงในหน้าจอหลัก
• มันจะถูกดาวน์โหลดและบันทึกเป็นเว็บแอปก้าวหน้าบนมือถือของคุณ
• เมื่อเพิ่มแอพ WP Decoupled บนมือถือของคุณ
• PWA นี้จะทำงานได้แม้ว่าคุณจะออฟไลน์

ข้อมูลสาขา?

1. ชุดรูปแบบ Master Main React WooCommerce
2. พัฒนาสำหรับการทดสอบ
3. WP-DoCoupled-Boilerplate Boilerplate เพื่อเริ่มโครงการ React Theme ใหม่ด้วยการใช้งาน PWA (ทำงานระหว่างดำเนินการ)

ผู้เขียน

• RTCAMP

ผู้มีส่วนร่วม?

• Imran Sayed
• มูฮัมหมัดมูห์ซิน
• Divyaraj Masani
• Sayed Taqui
• Vipin Kumar Dinkar
• belal dif

ใบอนุญาต ?

โครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT - ดูไฟล์ License.md สำหรับรายละเอียด

สิ่งนี้สนใจคุณหรือไม่?