دليل لاستخدام كتل Gutenberg لمتجر WooCommerce الخاص بك

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

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

يمكن الوصول إلى كتل Gutenberg عبر أي صفحة WordPress. عند إضافة صفحة جديدة أو تعديل صفحة موجودة داخل WordPress ، يمكنك رؤية رمز "+" وأنت تحوم فوق منطقة المحتوى العلوية اليسرى على الشاشة.

هناك أنواع مختلفة من الكتل التي يوفرها Gutenberg لاستخدامات مختلفة:

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

تحتوي كتل WooCommerce على ميزات أو "كتل" مختلفة تتعلق بشكل أساسي بعرض المنتجات على صفحتك ، والتي يمكنك استخدامها لبناء متجرك. فيما يلي قائمة الكتل المتاحة ضمن كتل WooCommerce:

• المنتجات حسب الفئة
• أحدث المنتجات
• المنتج المميز
• أفضل المنتجات مبيعا
• على بيع المنتجات
• منتجات منتقاة بعناية
• المنتجات الأعلى تقييماً
• المنتجات حسب السمة

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

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

تعد Overlay Color ميزة مثيرة للاهتمام تتيح لك تعيين لون وشفافية صورة المنتج التي اخترتها لتكون المنتج المميز في هذه الحالة:

يمكنك أيضًا إضافة فئة CSS إلى هذه الصورة. وبالمثل ، يمكن أيضًا تعديل زر التسوق الآن:

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

لهذا ، سنضيف أولاً كتلة تُعرف باسم العنوان الموجود ضمن الكتل المشتركة:

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

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

بهذه الطريقة ، أضفنا صفًا آخر بعد صف المنتج المميز للوافدين الجدد:

بعد ذلك ، دعنا نضيف أفضل المنتجات مبيعًا بطريقة مماثلة (بعد إضافة كتلة العنوان لها):

الآن بعد أن أنشأنا هذه الصفوف للزوار الجدد والمتكررين ، دعنا نضيف أيضًا صفًا يعرض المنتجات المعروضة للبيع لجذب المزيد من المبيعات. سنفعل ذلك باستخدام كتلة On Sale ضمن WooCommerce Blocks مرة أخرى (بعد استخدام كتلة العنوان لإضافة عنوان):

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

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

في صفحتنا المتجر / الصفحة الرئيسية ، يمكننا إضافة زر يشير إلى تصفح المتجر ، والذي سيرتبط بصفحة المتجر.

لإضافة زر ، يتعين علينا الاختيار من بين كتلة عناصر التخطيط.

سنقوم بربط هذا الزر بصفحة المتجر.

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

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

هكذا تبدو صفحتنا في النهاية:

الآن ، ما عليك سوى النقر فوق تخصيص (في الواجهة الأمامية ، عند معاينة صفحتك) لجعلها صفحتك الأولى وأنت على ما يرام! هذا هو مدى سهولة إنشاء صفحات أمامية جذابة لمتجر WooCommerce باستخدام Gutenberg. استكشف واختبر الكتل المختلفة التي يقدمها Gutenberg للاستفادة من ميزاته إلى أقصى حد!