DE {CODE}: ميزات جديدة لتطبيق Atlas

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

شرائح الجلسة

نص كامل

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

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

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

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

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

هنا يمكنك أن ترى أن هذا التطبيق الجديد قد تم إنشاؤه على حساب GitHub الخاص بي. نحتاج الآن إلى ربط الريبو هذا بتطبيق Atlas. لذا بالعودة إلى بوابة المستخدم ، سنقوم بالتمرير لأسفل إلى قسم المستودع المحدد. إذا سمحت بالوصول إلى جميع المستودعات الخاصة بك ، فقد تراها في القائمة. إذا لم يكن كذلك ، يمكنك النقر فوق إدارة المستودعات.

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

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

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

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

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

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

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

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

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

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

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

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

إذن ، هذا هو الأساس الذي يسأل فيه Faust عن النهاية الخلفية لـ WordPress ، ما هي البيانات المتوفرة لديك في مخطط GraphQL لكي أستفسر عنها؟ لذا سنحتاج إلى تمكين الاستبطان حتى يعمل هذا. سنعود إلى مسؤول WordPress هنا وننتقل إلى GraphQL ثم الإعدادات في الشريط الجانبي.

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

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

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

لذلك سأعود إلى مدير WordPress هنا ، وسنذهب إلى Content Modeler. لقد ذهبنا إلى الشاشة مرة من قبل. ألقينا نظرة خاطفة على المشاريع والشهادات. يمكننا أن نرى أن هذه نماذج محتوى مخصصة تم إنشاؤها لنا كجزء من هذا المخطط. ويمكنني النقر للوصول إلى كل واحدة من هذه النماذج وأرى أن كل نموذج من هذه النماذج لديه مجموعته الخاصة من الحقول الفردية.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لذا داخل المصدر ، سأنتقل إلى الصفحات. وبعد ذلك سأجد Project. ذلك هو. وافتح ملف index.js بداخله. لذا قم بالتمرير لأسفل قليلاً ، وسنرى أنه يتم استخدام خطاف ترقيم الصفحات للعقدة هذا. وهذا هو خطاف React الذي يأتي من هذا المكان هنا ، داخل مجلد Hooks. وداخل ذلك ، نطلق على query.projects.

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

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

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

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

مزيد من الأسفل ، دعونا نرى. تمريرة الصورة المسبقة. أوه ، تم العبث بالاسم. هناك نذهب. حتى الآن يتطابقون مرة أخرى. حسنًا. بدلاً من query.projects ، تذكر أننا نريد query.photos لنوع المحتوى المخصص لدينا. لذا انطلق وقم بتحديثها لتكون صورًا ، هناك. انتقل لأسفل قليلا.

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

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

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

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

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

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

ودعنا نختبر ما إذا كان بإمكاننا الحصول على بعض البيانات هنا. لذلك تحت Hello H1 لدينا ، لنفعل هذا. سنفعل JSON.stringify ، ثم نمرر ذلك الشيء. لذلك سنقوم بعمل البيانات هنا ، ونرى ما إذا كان بإمكاننا إحضار البيانات إلى صفحتنا.

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

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

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

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

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

لذلك دعونا نعيد شيئًا سهلًا في البداية. سنعود - لنرى. سنصنع H2 ، ماذا عن ، لأن هذا سيكون مثل إحدى بطاقاتنا. وبعد ذلك سنقول photo.title هكذا. حسنًا. لذلك سنرسم خريطة على كل صورة من صورنا. ولكل من هؤلاء ، سنعود H2 بعنوان تلك الصورة. حسنًا.

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

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

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

لذا فإن React لديها أداة مساعدة للعمل مع HTML آمنة ولا تحتاج إلى الهروب من هذا القبيل. وهذا هو استخدام div ثم بشكل خطير SetInnerHTML من هذا القبيل. ويمكنك أن تمرر إليه كائنًا حيث تكون إحدى خصائصه عبارة عن شرطة سفلية مزدوجة HTML.

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

لذلك هذا شيء عظيم. ماذا عن تلك الصورة المميزة؟ ما يمكننا فعله هو كتابة هذا من الصفر. يمكننا الحصول على عنوان URL للصورة المميزة والحصول على علامة صورة وتمريرها كعنوان URL. ثم يعرض المتصفح صورة ويوجهها إلى هذا المصدر.

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

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

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

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

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

مجرد نوع من إنشاء الكود الخاص بنا من صفحة قائمة المحفظة ، تمكنا من إنشاء صفحة قائمة الصور الخاصة بنا هنا ثم تعيين كل صورة من الصور الفردية والوصول إلى الحقول المخصصة لـ Atlas Content Modeler - العنوان والوصف والصورة ، ثم حقولنا القابلة للتكرار للموضوع هنا. لذلك أود أن تشعر بالقوة من هذا في مشاريعك الخاصة.

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

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

مقدم العرض: هذا هو ملخص لـ DE {CODE} 2022. آمل أن تكون ملهمًا وتغادر مع المزيد من الخبرة في WordPress واتصالات المجتمع الجديدة. ابحث عن المحتوى المسجل على الموقع من يوم الجمعة لمتابعة أي شيء قد فاتك أو شاهد مقطع فيديو مرة أخرى.

أود أن أقول شكراً أخيرًا لشركائنا الراعين: Amsive Digital و Box UK و Candyspace و Drewl و Elementary Digital و Illustrate Digital و Kanopi Studios و Springbox و Studio Malt و StrategiQ و WebDevStudios و 10Up. شكراً جزيلاً لك على التبرع لحملة التبرعات DE {CODE}. نحن حقا نقدر كرمك.

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

هذا كل شيء مني. شكرًا جزيلاً على انضمامك إلينا ، واعتنِ بنفسك.