كيف تبني أول مشروع WordPress بدون رأس باستخدام ACF + WPGraphQL

كل شخص لديه أدواته المفضلة عندما يتعلق الأمر بتطوير WordPress ، وقد تكون فكرة إنشاء موقع بلا رأس بدون هذه الأدوات أمرًا شاقًا. لحسن الحظ ، هناك أداتان مفضلتان لمطوري WordPress - ACF و WPGraphQL - يمكنهما مساعدتك على غمر أصابع قدميك في عملية التطوير بلا رأس.

في هذه الجلسة ، يُظهر جيف إيفرهارت ، كبير مطوري WP Engine ، مداخل وعموم البنية التحتية من خلال إنشاء موقع تجريبي في دقائق معدودة باستخدام Atlas!

شرائح الجلسة:

نص:

جيف إيفرهارت: ما الأمر ، الجميع؟ اسمي Jeff Everhart ، أحد كبار المطورين المدافعين هنا في WP Engine. شكرًا جزيلاً على الانضمام إلى حديثي اليوم حول إنشاء أول مشروع WordPress بدون رأس باستخدام ACF و WP GraphQL. قبل الانتقال إلى البناء ، أود دائمًا إعطاء بعض السياق حول ماهية WordPress بلا رأس. يبدو أن مصطلح مقطوعة الرأس أصبح أقل تخصصًا وأكثر شيوعًا ، لذلك سأحاول أن أبقي التفسير قصيرًا.

يدور WordPress بدون رأس في جوهره حول استخدام WordPress CMS من خلال واجهة برمجة التطبيقات لتشغيل نوع آخر من التطبيقات. إذا نظرنا إلى الرسم التخطيطي في هذه الشريحة ، فعندما يطلب المستخدم site.com/page ، بدلاً من أن يتعامل WordPress مع هذا الطلب ، يستجيب تطبيق JavaScript لهذا المسار. إنه ينظر إلى المسار ، ويحدد البيانات التي يحتاجها من WordPress أو من مصادر أخرى ، ويقوم بإجراء مكالمات APIs ، ويولد استجابة للمستخدم.

من المهم ملاحظة أن ما يوجد في فتحة وقت تشغيل Node.js قد يكون حقًا أي عدد من الأنواع المختلفة من التطبيقات أو العملاء. لقد رأينا أمثلة مختلفة لتطبيقات الهاتف المحمول أو مواقع الويب التي تم إنشاؤها باستخدام جميع الأطر الأكثر شيوعًا تستخدم هذا النمط بنجاح كبير. الآن بعد أن أصبحت لديك فكرة جيدة عن ماهية WordPress بلا رأس ، دعنا نتصفح المكدس التكنولوجي الذي سنستخدمه لمشروع اليوم.

في معظم طبقاتنا الخلفية ، سنستخدم WP GraphQL كواجهة برمجة تطبيقات لدينا. يحول WP GraphQL الواجهة الخلفية لـ WordPress إلى واجهة برمجة تطبيقات GraphQL قوية. إنه يفرض نفس عمليات التحقق من أمان الأدوار والقدرات التي يقوم بها WordPress الأصلي وواجهة برمجة تطبيقات REST الأساسية. يعد WP GraphQL خيارًا رائعًا لتطوير التطبيقات بدون رأس لأنه باستخدام لغة الاستعلام التعريفي الخاصة به ، يمكننا الاستعلام عن أنواع مختلفة من المحتوى في جميع أنحاء صناعة المحتوى هذه. لذا فإن الحصول على منشورات وصفحات بفئاتها كلها في نفس الطلب.

الآن ، دعنا نرى كيف يمكننا هيكلة ونمذجة بعض البيانات الأكثر تعقيدًا باستخدام WordPress CMS. يحتاج العديد من المطورين الذين يقتربون من مشاريع بلا رأس إلى تصميم بيانات مختلفة وتخزينها ، أليس كذلك؟ يتجاوز المنشورات أو الصفحات النموذجية لـ WordPress. تعد ACF أو الحقول المخصصة المتقدمة أداة رائعة لنمذجة تلك الحقول المخصصة. في الإصدار القادم ، سيصبح أكثر قوة من خلال السماح لك بتسجيل أنواع المنشورات والتصنيفات مباشرة في واجهة المستخدم في الإصدار المجاني من هذا المكون الإضافي.

إنها تجعل جميع البيانات متاحة عبر واجهة برمجة تطبيقات REST بسهولة ، ولكنها ستحتاج إلى تثبيت امتداد WP GraphQL لإضافة بعض البيانات الميدانية إلى مخطط GraphQL الخاص بنا. أنا شخصياً متحمس للغاية لرؤية هذا البرنامج المساعد يتطور حيث يصبح أكثر قوة للمطورين الذين لا رأس لهم.

الآن ، بعد أن أصبح بإمكاننا نمذجة البيانات المعقدة والاستعلام عنها من خلال WP GraphQL ، نحتاج إلى طريقة ما لإنشاء تجارب الويب الحديثة لمستخدمينا مع دعم محرري المحتوى الذين يعرفون بالفعل WordPress ويحبونه. وهنا يأتي دور Faust. Faust هو إطار عمل مكون من جزأين يتكون من مكون إضافي لبرنامج WordPress وإطار عمل JavaScript قائم على Next.js. إنهم يعملون معًا لجعل إنشاء مواقع WordPress بدون رأس أمرًا سهلاً وبديهيًا.

يضيف دعمًا لأشياء مثل معاينات المنشور والمصادقة خارج الصندوق ، ويمكنك الاعتماد على تجربة التسلسل الهرمي لقالب WP المعاد تخيلها في JavaScript الحديث. يهدف Faust.js إلى أن يكون نظامًا أساسيًا قابلًا للتوسعة ويتم شحنه مع نظام مكون إضافي وشريط إداري يمكنك استخدامه لتخصيص وإنشاء التجارب التي تدعم حالة الاستخدام الخاصة بك.

أخيرًا وليس آخرًا ، سنحتاج إلى بعض الطرق للعمل باستخدام هذه الأدوات محليًا وفي الإنتاج. باستخدام الترحيل المحلي و WP ، قمت بسحب جميع موارد WordPress التي ستحتاجها لهذا المشروع في ملف مضغوط واحد يمكنك سحبه وإفلاته محليًا للبدء. بمجرد الانتهاء من بناء موقعنا ، يمكننا دفع عملنا إلى منصة Atlas. حل استضافة Atlas WP Engine الكل في واحد بدون رأس والذي يجمع بين الواجهة الخلفية لـ WordPress وحاوية Node.js كلها مضبوطة للعمل معًا من خلال لوحة تحكم واحدة سلسة.

والآن بعد أن أصبح لديك فهم جيد لجميع الأدوات التي سنستخدمها في عرض اليوم ، دعنا ننتقل مباشرة ونبدأ في البناء. افتح عنوان URL في هذه الشريحة للوصول إلى الرمز التجريبي في المتصفح. لقد حاولت أن أجعل هذه التجربة سهلة بقدر ما يمكنني متابعتها ، لكننا سنغطي الكثير من الأرضية في الدقائق الـ 25 القادمة ، لذلك لا تتردد في المشاهدة الآن والرجوع مرة أخرى إلى مستودع GitHub هذا و تسجيل هذه الجلسة لاحقًا لمواصلة العمل بعد المؤتمر. إذا كان باقي فك الشفرة عبارة عن عرض سيارات ، فإن هذه الجلسة مخصصة لبناء المحركات. التورية المقصودة تماما.

الآن بعد أن فتح مستودع GitHub ، فلنبدأ. أول شيء أوصيك به هو عمل شوكة من هذا المستودع في حسابك الخاص. إذا نظرت إلى ما هو موجود في هذا المستودع ، فسترى مجموعة من نماذج التعليمات البرمجية بالإضافة إلى بعض الإرشادات خطوة بخطوة في الملف التمهيدي لكل ما سنفعله في هذا العرض التقديمي. في الواقع ، سنفعل الكثير من النسخ واللصق مباشرة من هذا المستودع في مشروعك. لاستنساخ هذا محليًا ، دعنا نمضي قدمًا ونشغل أمر Git clone داخل الجهاز الطرفي.

سيستغرق ذلك ثانيةً فقط للتنزيل ، وبعد ذلك بمجرد تنزيل المشروع ، دعنا نمضي قدمًا ونغير دليلنا إلى دليل المشروع هذا. من هناك ، سأقوم بتشغيل أمر لفتح هذا المشروع في VS Code ، ولكن لا تتردد في استخدام أي محرر كود تريده. نظرًا لأن VS Code به محطة طرفية متكاملة بالفعل ، يمكنني تنظيف هذا الأمر ثم المضي قدمًا وإغلاق iTerm. والآن ، يمكننا الانتقال إلى تحديد موقع موقع WordPress المحلي الخاص بنا. للقيام بذلك ، سنفتح هذا المشروع في Finder ثم نحدد موقع ملف WP demo zip بدون رأس والذي أعددته لك.

سنقوم بسحب وإسقاط ملف zip هذا مباشرة في بيئة التطوير المحلية ، وسيبدأ Local عملية تفريغ وتمهيد موقع WordPress التجريبي الخاص بك. يمكننا الالتزام بالإعدادات الافتراضية إلى حد كبير ، وبعد ذلك سيستغرق المحلي بضع دقائق فقط لإنشاء موقع WordPress جديد لك. الآن ، هذه ميزة رائعة لبرنامج WP migrate pro الذي يسمح لي بتصدير أي موقع على شكل ملف مضغوط وسحبه وإفلاته مباشرة إلى محلي حتى أتمكن من نقل موقع إنتاج إلى جهازي المحلي بسرعة كبيرة ، بغض النظر عن النظام الأساسي.

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

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

إذا ألقينا نظرة على المحتوى الموجود داخل كل منشور ، فسنرى أن لدينا مجموعة من محتوى الجسم ، وبعض الصور ، والصور المميزة ، وبعض مجموعات حقول ACF التي أنشأناها بالفعل وقمنا بتعبئتها مسبقًا. لذلك دعونا نلقي نظرة على المجموعات الميدانية بمزيد من التفصيل. إذا فتحنا قائمة ACF ، فسترى أن لدينا مجموعتين ميدانيتين تم إنشاؤهما - الموارد الغذائية وشريط مزيج الحلوى. دعونا نلقي نظرة على الموارد الغذائية أولاً.

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

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

الآن ، دعنا نلقي نظرة على WP GraphQL وما يعطينا ذلك من حيث الأدوات. إذا فتحنا قائمة GraphQL ، فسوف يتم إسقاطنا داخل IDE الرسومي. الآن ، هذه بيئة تطوير تفاعلية تتيح لك إنشاء استعلامات باستخدام WP GraphQL. يمكننا تحديد أننا نريد ، على سبيل المثال ، المشاركات العشر الأولى مع الفئات وتضمين حقول ACF الإضافية هنا أيضًا. عندما نضغط على الزر "تشغيل" ، نحصل على بيانات مباشرة من موقع WordPress الخاص بنا والتي تتطابق مع البيانات الموجودة في هذا الاستعلام.

إذا أردنا ، يمكننا فتح نافذة Query Composer وإنشاء جوانب من استعلامنا بشكل مرئي. لذلك فهذه أداة مفيدة حقًا إذا لم تكن متأكدًا من الحقول أو البيانات المعينة التي قد تكون موجودة على كائن WordPress معين. يمكنك استخدام Query Composer لاستكشاف وتشغيل هذه الاستعلامات في الوقت الفعلي. الآن ، دعنا ننتقل إلى تكوين Faust من خلال فتح قائمة إعدادات Faust. كما قلت في مقدمة الحديث ، فاوست هو في الحقيقة إطار عمل مكون من جزأين يتكون من مكون WordPress الإضافي وقاعدة كود الواجهة الأمامية.

لذلك إذا عدنا إلى قائمة إعدادات المكونات الإضافية لـ WordPress ، يمكننا أن نرى أننا قمنا بتعيين هذا الخيار لعنوان URL الخاص بموقع الواجهة الأمامية ، والذي سيشير إلى عنوان موقع الواجهة الأمامية الخاص بنا. أسفل ذلك مباشرةً في خيار المفتاح السري ، سنمضي قدمًا وننقر فوق "إعادة إنشاء" لإنشاء مفتاح فريد يمكنك استخدامه لمشروعك التجريبي. من هناك ، دعنا نعود بالفعل إلى قاعدة شفرة JavaScript ، وسنقوم بتشغيل هذا الأمر لنسخ ملف متغير بيئة نموذجي إلى ملف يمكننا استخدامه مع موقعنا.

بمجرد تشغيل ذلك ، قم بفتح ملف env.localfile ، وسنقوم ببعض التغييرات. أول شيء هو أنه سيحل محل خيار عنوان URL العام التالي لـ WordPress بموقع موقعك المحلي. لذلك ACF.WPEngine.local. وبعد ذلك سنأخذ أيضًا قيمة المفتاح السري هذه ونستخدمها لمفتاح Faust السري الخاص بنا. تأكد من أننا نريد إلغاء التعليق على ذلك أيضًا ، ومن ثم فإن متغير البيئة الأخير هذا مفيد حقًا للاختبار والتطوير المحلي حتى تتمكن من حل أي مشكلات قد تواجهك في SSL أثناء الاتصال ببيئة التطوير المحلية.

من هناك ، سنرغب في تشغيل NPM Install لتثبيت جميع تبعيات مشروعنا ، وبعد ذلك بمجرد الانتهاء من ذلك ، يمكننا بدء تشغيل NPM Run Dev لبدء مشروعنا. سيستغرق ذلك ثانية واحدة فقط ليتم تجميعه ، ولكن بمجرد حدوث ذلك ، يمكننا فتح localhost: 3000 في المتصفح ، ويجب أن نرى موقع Faust الخاص بنا قيد التنفيذ.

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

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

الآن ، دعنا نلقي نظرة أعمق على هيكل مشروع Faust JavaScript الخاص بنا. إذا كنت معتادًا على العمل في Next.js ، فمن المحتمل أنك استخدمت دليل الصفحة لإنشاء مكونات الصفحة التي تنفذ مساراتك. لا يزال بإمكانك القيام بذلك في Faust ، لكنه يبني على هذا المفهوم من خلال توفير مسار شامل يسمى عقدة WordPress التي تسمح لك بأخذ أي URI يديره WordPress ويحل ذلك إلى جزء معين من المحتوى.

نحصل بعد ذلك على بعض البيانات الإضافية حول عنصر المحتوى هذا ونقوم بتمريرها عبر مكوناتنا حتى نتمكن من حل جزء واحد من المحتوى الفردي إلى قالب معين في مجلد قوالب WP. هذا مشابه جدًا لمفهوم التسلسل الهرمي للقالب وسمات WordPress التقليدية ، والكثير من اصطلاحات التسمية. المطابقة ، على سبيل المثال ، frontpage.js هي الصفحة الأولى لموقعنا ، بينما page.js هي المسؤولة عن عرض أشياء من نوع محتوى الصفحة. و single.js موجود لتقديم مشاركات فردية.

الآن ، لنبدأ ونجعل صفحة frontpage.js أكثر ديناميكية قليلاً. نعم . لذلك للبدء ، سنمضي قدمًا ونفتح ملف page.js الأول لدينا ونمنح أنفسنا مساحة أكبر قليلاً للعمل. إذا نظرنا إلى محتويات هذا الملف ، يمكننا أن نرى أن هناك ثلاث قطع رئيسية. هناك المكون نفسه الذي نعرضه ، خاصية استعلام يتم إرفاقها بالمكون ، ويتم تشغيل هذا في كل مرة نعرض فيها المكون ، ثم بعض المتغيرات التي يمكننا تمريرها في الجزء السفلي.

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

ولذا إذا نقرنا هناك وقمنا بتشغيله ، فإننا نرى أن كل شيء يعمل بشكل رائع. ولذا فإننا نريد المضي قدمًا وإضافة ذلك إلى خاصية استعلام المكون الخاصة بنا. لذلك سنجد مكانًا جيدًا للقيام بذلك ونلصقه هناك ونقوم ببعض إعادة التنسيق. وما يفعله ذلك هو إضافة هذا الجزء الفردي من الاستعلام إلى هذا الاستعلام نفسه. لذلك ما زلنا بحاجة إلى إتاحة نتائج هذا الاستعلام لبقية المكون الخاص بنا ، لذلك سنمضي قدمًا ونضيف هذا السطر الإضافي الذي يستخرج فقط نتيجة المنشور هذه إلى متغير يمكننا العمل معه.

الآن ، الخطوة التالية لجعل هذه الصفحة الرئيسية ديناميكية هي في الواقع إنشاء مكون لعرض مقتطفات المنشور هذه. لذلك سنفعل ذلك وننشئ ملفين في مجلد المكونات ، وسأذكر هنا - سأقوم بإنشاء ملف postexcerpt.js داخل مجلد مقتطفات النشر ، وأنا ' m حقًا مجرد تكرار بنية المكونات الحالية التي تعد جزءًا من مشروع Faust.js Getting Started هذا. أنت حر حقًا في فعل ما تريد هنا ، وأنا أتبع إطار العمل فقط لأنه تم وضعه بالفعل كجزء من "الخطوات الأولى".

لذا بمجرد أن نحصل على هذه الملفات الثلاثة ، سنبدأ في إضافة بعض الأشياء إليها لتقديم تلك المنشورات. لذا فإن أول شيء سنفعله هو وضع بعض المحتوى في مكون مقتطفات التدوينة. ولذا سنقوم فقط بنسخ ذلك ولصقه من مستودعنا ، ويمكننا أن نرى أننا نستورد ملف module.css هذا. ولدينا وظيفة تسمى مقتطفات المنشور وهي مكوننا الذي يتذوق خاصية واحدة وهي المنشور ، ثم نعرض قسمًا ، يحتوي على رابط ينتقل مباشرةً إلى عنوان URI المنشور ، مما يؤدي إلى تقديم العنوان. ثم هناك في الأسفل ، لدينا مربعات الفئات التي نعرضها أيضًا ، ثم نستخدمها بشكل خطير في HTML لتعيين محتوى HTML لمقتطف المنشور.

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

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

ثم إذا مضينا قدمًا وقمنا بحفظ كل ذلك وعرضه في المتصفح وقمنا بالتحديث ، يجب أن نرى أن لدينا صفحة رئيسية ديناميكية رائعة. نعم ، يحتوي كل عنوان من هذه العناوين على ارتباط قابل للنقر عليه ، كما هو الحال مع مربعات الفئات الفردية. وإذا نقرنا على ذلك ، يمكننا أن نرى أنه من خلال الاستفادة من القوالب الموجودة بالفعل في فاوست ، يتم تقديم جميع عناصر المنشورات بالفعل ، على الرغم من أننا نفتقد بعض مجموعات الموارد التي أنشأناها باستخدام ACF. لذلك إذا نقرنا على منشور ثانٍ ، يمكننا أن نرى أنه يتم عرضه بشكل رائع وكذلك يفعل جميع روابط الفئات المعدة مسبقًا - نحن فقط نستخدم هذه الفئة URIs للتوجه إلى Faust في عرض قالب JS للفئة .

حسنًا ، بعد أن أصبح لدينا صفحة رئيسية ديناميكية ، دعنا ننتقل إلى عرض حقول ACF على نموذج single.js. لذا انطلق وقم بتنظيف محرر الكود الخاص بنا ، وبعد ذلك يمكننا فتح ملف single.js وإلقاء نظرة على ما بداخله. نعلم أنه في هذا المستوى الأعلى ، لدينا وظيفة المكون هذه التي نقوم بتصديرها والتي تأخذ في الواقع الخاصيات ، وخاصية استعلام المكون التي تحتوي على استعلام GraphQL الديناميكي الذي يقرأ بعض تلك المتغيرات التي نحصل عليها من الاستعلام الأولي.

وما نريد فعله في النهاية هو عرض بعض من موارد النشر المختلفة في أسفل محتوى المنشور. لذا عدت إلى المستودع وقمت بالتمرير لأسفل إلى الخطوة 3.1 ، حيث نقوم بتحديث استعلام المنشور الفردي ، وسنلقي نظرة على ذلك لأنه يبدأ في سحب كل من مجموعات حقول مزيج الحلو وموارد الطعام التي أنشأناها في الخطوة السابقة. إذا أخذت هذا الاستعلام وقمت بنسخه ولصقه في رسم بياني ، فسأقوم بترميز معرّف قاعدة البيانات لمنشور ما ، وأزيل فقط بعض الأشياء المختلفة التي لا نحتاجها مثل As Preview وهذا الجزء الآخر .

إذا قمت بإجراء ذلك ، فسنرى أنني سأحصل على بعض البيانات التي تحتوي حقًا على ما كنت أتوقعه. المحتوى ، أعود المؤلف ، والأهم من ذلك ، أعود إلى تلك المجموعات الميدانية وبياناتها. لذلك سوف أمضي قدمًا وأنسخ هذا الاستعلام وأعود إلى single.js. من هناك ، سأستبدل هذا الجزء من الاستعلام بما حصلت عليه من الحافظة الخاصة بي. يمكننا فقط المضي قدمًا وحفظ ذلك. يمكنك إعادة تنسيقه إذا كنت ترغب في ذلك ، ولكن هذا محايد للمسافات البيضاء ، لذلك أعتقد أنه بالنسبة للجزء الأكبر يبدو جيدًا.

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

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

الآن ، الخطوة التالية هي أننا نريد بالفعل ، كما في الخطوة السابقة ، إنشاء بعض المكونات الإضافية. لذلك سأستمر في إنشاء ملف المكونات الخاص بي وإنشاء مكون موارد غذائية. لذلك سأقوم بإنشاء مجلد ثم ملف resources.js بداخله ، وإلى جانب ذلك ، سأقوم بإنشاء ملف index.js بالإضافة إلى ملف وحدات CSS. والآن يعد ملف وحدات SCSS مفيدًا حقًا لأنه يسمح لنا بتوسيع نطاق أنماطنا لهذا المكون المحدد. لذلك يبدو الأمر وكأنه بناء جملة غير تقليدي للقيام بذلك ، ولكن في النهاية إنها نتيجة نظيفة حقًا لأنه لا يتعين علينا كتابة مجموعة من الفصول والأشياء.

لذلك سأبدأ في نسخ ولصق كود المكون من المستودع مباشرة في تلك الملفات. يمكننا أن نرى أن لدينا وظيفة موارد غذائية تأخذ اسمين لوصفة الدعائم ورابط وصفة ، ثم نجعلها أقل من عصرنا اللطيف باستخدام رمز تعبيري burrito. سنقوم أيضًا بنسخ ولصق بعض أنماط ملفات SCC في هذا المجلد المحدد ، ثم نتأكد من أننا نقوم بتصديرها من مجلدات المكون index.js. ومثلما في المثال السابق ، سنرغب في المضي قدمًا وتصدير هذا في index.js لمجلد المكونات لدينا أيضًا حتى نتمكن من الحصول على مجموعة رائعة حقًا لاستيرادها ، كما رأيت مباشرةً من تلك المكونات مجلد في مكان آخر في بعض هذه الملفات المختلفة.

لذلك بمجرد أن نضيف ذلك ، سنوجه انتباهنا إلى مكون موارد الموسيقى ، وسنفعل نفس الشيء. سنمضي قدمًا وننشئ نفس بنية الملف. إذن مجلد موارد الموسيقى وملف musicresources.js بداخله. ثم سنمضي قدمًا وننشئ ملف index.js لتصديره ثم أيضًا ملف musicresources.module.scss الخاص بنا أيضًا لأنماط النطاق هذه.

لذا بمجرد حصولنا على كل هذه الأشياء ، سنفعل نفس الشيء الذي فعلناه لمواردنا الغذائية ونقوم فقط بنسخ ولصق بعض هذه التعليمات البرمجية من المستودع. يمكننا أن نرى أن هذا المكون يبدو متطابقًا تقريبًا. لدينا موارد موسيقية. يحتوي هذا في الواقع على ثلاثة دعائم بدلاً من اثنين ، ولكن لدينا ثلاثة حقول في مجموعة الحقول هذه ، لكن اتفاقية style.component هي نفسها. ونقوم فقط ببعض التصيير المختلف قليلاً لأن لدينا محتوى مختلف.

لذا من هناك ، سنضيف أيضًا رمز SCSS الخاص بنا ونتأكد من تصديره من فهرس مجلدات المكونات ثم استيراده أيضًا إلى مجلدنا هنا ، وأعتقد أنني قمت بالفعل - دعنا نعيد تسمية هذا بسرعة و فقط تأكد من أن جميع الأسماء لدينا تبدو جيدة ، حتى يتمكن index.js والمكونات الخاصة بنا من العثور على مواردنا الموسيقية وكل هذه الأشياء رائعة. الآن ، سنمضي قدمًا ونغلق كل علامات التبويب الدخيلة هذه لأننا جاهزون لتنفيذ هذه المكونات فعليًا في ملف single.js.

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

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

وإذا عدنا إلى الخارج وقمنا بتحديث إحدى صفحات قوالبنا المنفردة ، فيمكننا أن نرى أن مواردنا الغذائية تقدم بالطريقة التي نتوقعها ، وسيعمل هذا الرابط بشكل مناسب إذا عدنا إلى WP Admin أو منزلنا صفحة. وإذا وجدنا واحدة وفئة الطعام أو الموسيقى ، يمكننا فتح Kinfolk Synth DIY ونرى كيف يبدو مكون موارد الموسيقى لدينا ، وكل ذلك يبدو رائعًا. وإذا وجدنا واحدًا موجودًا بالفعل في كلا الفئتين ، يمكننا أن نرى أنه في الواقع ، في الأسفل ، يعرض كلا المكونين بالطريقة التي نتوقعها.

نعم. والآن بعد أن حصلنا على موقعنا بالطريقة التي نريدها ، دعنا ننتقل إلى الحديث عن كيفية نشر هذا الموقع. الآن ، لدي قسم من مستودع GitHub تم إنشاؤه لنا ، وفي الواقع ، لقد قمت بإنشاء فرع منفصل تمامًا في فرع النهاية. لذا انتهى تشغيل Git check ، سنحصل على ذلك. ويمكنك أيضًا نشر هذا الفرع مباشرةً في Atlas ، وهو حل استضافة WordPress بدون رأس من WP Engine.

يمنحك هذا تثبيت WordPress وحاوية Node.js ، ويمكنك التسجيل للحصول على حساب Sandbox مجاني بمجرد النقر فوق هذا الزر في صفحة Atlas المقصودة. يأخذك إلى منتدى سريع حقًا ، وكما ترى ، السعر صفر. قد لا يزال يتعين عليك وضع بطاقة ائتمان نستخدمها فقط لأغراض منع الاحتيال ، ولكن يمكنك الحصول على حساب مجاني للتلاعب بأي من هذا لاختباره ، والتعلم بدون رأس لرغبة قلبك. لذلك سأقوم بفتح لوحة معلومات WP Engine للبدء في نشر هذا الموقع على Atlas.

أول شيء سأفعله في الواقع هو فتح قائمة المواقع الخاصة بي ، وسأفتح موقع الإنتاج الخاص بي على WordPress. في الواقع ، موقع ACF بدون رأس الذي تراه هنا ، حيث سأفتح WP Admin في نافذة جديدة ، هو الموقع الأصلي لملف zip الذي تستخدمه جميعًا محليًا. لذلك قمت بعمل ملف مضغوط لذلك باستخدام تصدير WP ، وهذا في الواقع ما سأستخدمه لنشر الإنتاج الخاص بي.

من هناك ، سأضغط على علامة التبويب أطلس ثم انقر فوق إنشاء التطبيق. وقد تم تقديم هذا الخيار لي. سأختار Pull From Repo ، ثم انقر فوق متابعة. وإذا لم أقم بالمصادقة مع GitHub ، فهذا هو المكان الذي تريده ، ولكن بما أنني موجود بالفعل ، يمكنني المضي قدمًا واختيار المستودع الخاص بي. لذلك سنمضي قدمًا ونحدد المستودع الذي نستخدمه لهذا المشروع ، انقر فوق متابعة ، ثم سأقوم بنشر تطبيقي في وسط الولايات المتحدة.

من هنا ، يسمح لي باختيار الفرع ، وكما قلت ، سأستخدم Finished. هناك أيضًا خيارات إذا كنت تستخدم monorepo ، وهو ما لسنا كذلك ، وسأترك I Have My WordPress Installation محددًا ، وابحث عن My ACF Headless Site. الآن ، هنا ، سأريد ، في الواقع ، بدلاً من استخدام ملف .env ، سأريد نسخ أكثر من متغيرين من متغيرات البيئة من مشروع ملفاتي.

إذن أول واحد هو عنوان URL العام التالي لـ WordPress. هذه هي نفس متغيرات البيئة التي حددناها في مشروعنا المحلي ، وسأقوم بنسخ الرابط الخاص بتثبيت WordPress الخاص بإنتاجي هناك. ثم سأضيف متغير بيئة آخر ، وهذا سيكون لمفتاحنا السري Faust. لذلك سوف أمضي قدمًا وأنسخ ذلك من قائمة إعدادات Faust ، وأظهر ذلك هناك وقم بتعيين المفتاح لذلك على Faust Secret Key.

وبمجرد الانتهاء من ذلك ، يمكنني المضي قدمًا والنقر فوق إنشاء تطبيق ، وسيبدأ Atlas عملية إنشاء التطبيق ونشره. أثناء عملية إنشاء Atlas ، سيتم تشغيل تثبيت NPM وأمر إنشاء NPM لأي إطار عمل تستخدمه. وبعد ذلك بمجرد إنشاء كل هذا الرمز ، سيتم نشر حاوية Node هذه لك على شبكتنا. وبمجرد أن يدور كل هذا لثانية واحدة فقط ، يجب أن نحصل على رسالة نجاح ، وبعد ذلك يمكننا النقر فوق عنوان URL الذي تم توفيره لنا وإلقاء نظرة على موقعنا مباشرة.

لذلك سنحصل على رسالة النجاح الخاصة بنا ، وبعد ذلك يمكننا المضي قدمًا وفتح عنوان URL هذا في علامة تبويب أخرى. وهناك يمكننا أن نرى أن موقعنا يبدو تمامًا كما هو الحال محليًا ، وهو يسحب جميع البيانات الصحيحة ، كل الصور الصحيحة ، بل إنه يمتص كل محتوى ACF الخاص بنا. عدد من منشوراتنا تبدو رائعة حقًا ، ولدينا أداء كبير على Atlas - أنا في الواقع أستخدم بعض الصور الكبيرة حقًا هنا ، لذلك إذا رأيت بعض البطء ، فهذا بالتأكيد يرجع إلى اختياراتي.

منصة Atlas مليئة بالميزات التي سيقدرها مطورو JavaScript الحديثون. للأسف ، لا يوجد وقت كافٍ في هذا العرض التقديمي لاستعراضها جميعًا بالتفصيل.

لكن Atlas يقوم بعمل جيد حقًا في الجمع بين التفاصيل المهمة من كل من أجزاء الواجهة الأمامية والخلفية للنظام البيئي بلا رأس في لوحة تحكم واحدة مريحة ، حيث يمكنك إلقاء نظرة على سجلات الإنشاء الفردية ومخرجات الإنشاء ، وفحص عمليات النشر ، ومتغيرات البيئة التي استخدمتها من أجل بناء معين ، بالإضافة إلى إمكانية الوصول إلى إعدادات أو ميزات إضافية يمكنك تمكينها ، مثل بيئات المعاينة ، حيث يمكنك إنشاء بيئة إضافية لكل العلاقات العامة التي يتم إنشاؤها على GitHub repo ، أو إنشاء خطافات ويب بيئة لإعادة إنشاء أجزاء معينة من تطبيقك أو CDN أثناء إجراء تغييرات على WordPress.

تصبح كل هذه الأشياء ممكنة مع نظام Atlas الأساسي ، وهي تقلل حقًا من العوائق التي تحول دون البدء في البناء باستخدام WordPress بدون رأس.

رائع. تهانينا كما قلت ، كان هناك الكثير لتغطيته في 25 دقيقة. لا تتردد في الاستمرار في التدرب بعد العرض التقديمي ، وتواصل معي إذا كان لديك أي أسئلة حول البدء في استخدام الموارد التجريبية. إذا كنت مهتمًا بمعرفة المزيد عن مقطوعة الرأس ولكنك بحاجة إلى مساحة للقيام بذلك ، فقم بالتسجيل للحصول على حساب Atlas Sandbox مجاني. بالإضافة إلى نشر مستودعات الأكواد الخاصة بك ، كما فعلنا اليوم ، يمكنك أيضًا البدء ببعض المخططات المعدة مسبقًا ، والتي يمكن أن تساعدك بنقرة واحدة على رؤية شكل مشروع بدون رأس عند الانتهاء.

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.