headless wp starter

مجموعة WordPress + REACT المطلوبة من Postlight هي مجموعة أدوات تلقائية ستدور ثلاثة أشياء:

1. الواجهة الخلفية WordPress التي تخدم بياناتها عبر WP Rest API و GraphQL.
2. عينة من الواجهة الأمامية التي تعمل بها WP GraphQL API ، والتي تدعم المنشورات والصفحات والفئات والقوائم والبحث وتوقيع المستخدم.
3. عينة أخرى من جانب الخادم المقدمة من جانب رد الفعل باستخدام Next.js مدعوم من واجهة برمجة تطبيقات WP Rest.

يمكنك قراءة كل شيء عن ذلك في هذه المقدمة المفيدة.

ماذا في:

• مثبت آلي يقوم بتمهيد تثبيت WordPress الأساسي الذي يوفر واجهة برمجة تطبيقات راحة ثابتة ومستقرة.
• المكون الإضافي الذي يعرض واجهة برمجة تطبيقات GraphQL الأحدث والمدلية لـ WordPress.
• مكونات WordPress التي تحتاجها إلى إعداد أنواع المنشورات المخصصة والحقول المخصصة (الحقول المخصصة المتقدمة و UI -type type).
• المكونات الإضافية التي تعرض تلك الحقول المخصصة وقوائم WordPress في WP REST API (ACF إلى WP API و WP-REST-API V2 قوائم).
• مكونات المصادقة JWT: JWT WP REST و JWT WP GraphQL.
• تتطلب جميع رمز و WordPress المبدئي وبعثات مقطوعة الرأس ، بما في ذلك الرابط الثابت ، ورؤوس Allow-Origin ، ووظائف التسجيل المفيدة لسهولة تصحيح الأخطاء.
• آلية لاستيراد البيانات بسهولة من تثبيت WordPress موجود في أي مكان على الويب باستخدام WP Migrate DB Pro والإضافات المصاحبة لها (الترخيص المطلوب).
• عينة ، starter Frontend React App مدعوم من GraphQL.
• عينة أخرى ، ATTLER FRONTEND React App ، من جانب الخادم يتم تقديمها عبر NEXT.JS ، مدعوم من واجهة برمجة تطبيقات WP REST.
• حاويات Docker والبرامج النصية لإدارتها ، لتشغيل تطبيقات React Fronted بسهولة والخلفية محليًا أو نشرها على أي مزود استضافة مع دعم Docker.

لنبدأ.

ثَبَّتَ

المتطلب السابق: قبل أن تبدأ ، تحتاج إلى تثبيت Docker. على Linux ، قد تحتاج إلى تثبيت Docker-Cormsal بشكل منفصل.

يقوم 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

بمجرد تشغيل الحاويات ، يمكنك زيارة مقدمة WordPress الواجهة الخلفية في متصفحك.

الواجهة

توفر مجموعة المبتدئين هذه حاويات الواجهة الأمامية:

• حاوية frontend التي تعمل بواسطة واجهة برمجة تطبيقات WP Rest هي من جانب الخادم الذي يتم تقديمه باستخدام Next.js ، ويتعرض على المنفذ 3000 : http: // localhost: 3000
• الحاوية frontend-graphql مدعومة بواسطة GraphQL ، المكشوفة في المنفذ 3001 : http: // localhost: 3001

هذا ما يبدو عليه الواجهة الأمامية:

يمكنك متابعة إخراج yarn start عن طريق تشغيل أمر logs Docker-Compose متبوعًا باسم الحاوية. على سبيل المثال:

 docker-compose logs -f frontend

إذا كنت بحاجة إلى إعادة تشغيل هذه العملية ، فأعد تشغيل الحاوية:

 docker-compose restart frontend

ملاحظة: تصفح الواجهة الأمامية التالية. JS في وضع التطوير بطيء نسبيًا بسبب حقيقة أن الصفحات مبنية على الطلب. في بيئة الإنتاج ، سيكون هناك تحسن كبير في تحميل الصفحة.

الخلفية

تعرض حاوية wp-headless Apache على المنفذ المضيف 8080 :

• لوحة القيادة: 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 MySQL على المنفذ المضيف 3307 :

 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

لاستيراد البيانات من mysqldump مع mysql ، قم بتشغيل:

 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 Migrate DB Pro للاتصال بتثبيت WordPress آخر واستيراد البيانات منه. (ستكون هناك حاجة إلى ترخيص محترف.)

للقيام بذلك ، تم تعيين MIGRATEDB_LICENSE لأول مرة و MIGRATEDB_FROM في .env وإعادة إنشاء الحاويات لسن التغييرات.

 docker-compose up -d

ثم قم بتشغيل البرنامج النصي للاستيراد:

 docker exec wp-headless migratedb_import

إذا كنت بحاجة إلى مزيد من الوظائف المتقدمة ، تحقق من أوامر WP-Cli المتاحة:

 docker exec wp-headless wp help migratedb

تمديد الباقي و APIs GraphQL

في هذه المرحلة ، يمكنك البدء في إعداد حقول مخصصة في مسؤول WordPress ، وإذا لزم الأمر ، قم بإنشاء نقاط نهاية API REST المخصصة في سمة بداية WordPress Postlight.

يقع رمز السمة الأساسي في wordpress/wp-content/themes/postlight-headless-wp .

يمكنك أيضًا تعديل وتوسيع واجهة برمجة تطبيقات GraphQL ، وهو مثال على إنشاء نوع مخصص وتسجيل قرار في: wordpress/wp-content/themes/postlight-headless-wp/inc/graphql .

مصادقة REST & GRATEQL JWT

لإعطاء مستخدمي WordPress القدرة على تسجيل الدخول عبر تطبيق الواجهة الأمامية ، استخدم شيئًا مثل مولد ملح WordPress لإنشاء سر لـ 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 GRATEQL لمزيد من المعلومات.

linting

تذكر أن ترتب رمزك كما تذهب.

إلى تعديلات موضوع WordPress ، يمكنك استخدام php_codesniffer مثل هذا:

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

يمكنك أيضًا محاولة أخطاء phpcs autofix:

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

إلى الوبر وتنسيق تطبيقات JavaScript ، يتم تضمين ملفات تكوين أجمل و ESLINT.

الاستضافة

لا يستضيف معظم مضيفي WordPress أيضًا تطبيقات العقدة ، لذلك عندما يحين الوقت للذهاب مباشرة ، ستحتاج إلى العثور على خدمة استضافة للواجهة الأمامية.

لهذا السبب قمنا بتعبئة تطبيق Frontend في حاوية Docker ، والتي يمكن نشرها في مزود استضافة مع دعم Docker مثل Amazon Web Services أو Google Cloud Platform. للحصول على بديل سريع وأسهل ، تحقق الآن.

استكشاف أخطاء شائعة

تنبيه التغيير - Docker

إذا كان لديك المشروع بالفعل ، ثم تم تحديثه إلى الالتزام الأحدث من 99b4d7b ، فستحتاج إلى الذهاب إلى عملية التثبيت مرة أخرى لأنه تم ترحيل المشروع إلى Docker. ستحتاج أيضًا إلى ترحيل بيانات MySQL إلى حاوية MySQL DB الجديدة.

Docker التخزين المؤقت

في بعض الحالات ، تحتاج إلى حذف صورة wp-headless (وليس فقط الحاوية) وإعادة بنائها.

أخطاء cors

إذا قمت بنشر تثبيت WordPress الخاص بك وتواجه مشكلات CORS ، فتأكد من تحديث /wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.php -content/themes/postlight-headless-wp/inc/frontend-origin.php مع عنوان URL الخاص بك.

ترى أي شيء آخر تريد إضافته هنا؟ الرجاء إرسال طلب سحب!

---

؟ مشروع مختبرات من أصدقائك في Postlight. ترميز سعيد!