أساسيات الباني: استكشاف أنماط الكتلة

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

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

أساسيات

قبل أن نتعمق في أنماط الكتل ، فلنبدأ بالأساسيات ونضع بعض المصطلحات. لقد تغير WordPress قليلاً في السنوات القليلة الماضية. من الجيد التأكد من أننا جميعًا على نفس الصفحة.

منع

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

نمط

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

محرر

المحرر هو واجهة المستخدم التي نستخدمها لإنشاء صفحات ومنشورات خارج الكتل. منذ تقديمه في WordPress 5.0 في عام 2018 ، تم استدعاء المحرر بأسماء عديدة. ومن بين هؤلاء Gutenberg و Gutenberg Editor و Block Editor وغيرهم. لأغراض هذه المقالة ، سنستخدم ببساطة مصطلح "محرر".

الواضع

داخل المحرر ، يتم استخدام Inserter لإضافة كتل وأنماط إلى الصفحة. يمكنك الوصول إلى Inserter من خلال النقر فوق العلامة الزرقاء (+) في الزاوية اليسرى العلوية من المحرر.

توضح لقطة الشاشة أدناه شروطنا المحددة.

لماذا أنماط الكتلة؟

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

نصيحة سريعة: هل تعلم أنه يمكن أيضًا إدراج الكتل باستخدام الأمر slash؟ ابدأ فقرة جديدة بالمفتاح "/" وستظهر قائمة بالكتل المتاحة. ستؤدي كتابة أحرف إضافية إلى ضبط نتائج البحث. جربها!

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

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

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

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

هذا هو المكان الذي تأتي فيه أنماط الكتلة. جدول التسعير أعلاه هو في الواقع نمط مضمن في قالب Twenty-Two القادم ، والذي سيتم إصداره جنبًا إلى جنب مع WordPress 5.9!

نأمل أن يوضح هذا التمرين الصغير سبب حماسي الشديد بشأن إمكانات أنماط الكتلة ، ولكن كيف نستخدمها بالفعل؟

كيفية استخدام الأنماط

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

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

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

يفتح المستكشف نافذة مشروطة توفر تجربة تصفح محسّنة مع الأنماط المعروضة في الشبكة. يمكن أيضًا البحث عنها أو تصفيتها بسهولة حسب الفئة.

لقطة الشاشة أعلاه هي التكرار الأول لـ Pattern Explorer. من المتوقع أن تعمل إصدارات WordPress المستقبلية على توسيع وظائف المستكشف. تضيف التجارب الحالية معاينات للجوال / الجهاز اللوحي وخيار أنماط العرض التوضيحي بشكل فردي بدلاً من تخطيط الشبكة. بينما لم يتم تأكيد أي شيء ، ترقب التحسينات الإضافية في WordPress 6.0 في منتصف عام 2022.

مع كل هذا النقاش حول الأنماط ، قد تتساءل ، من أين أتت بالفعل؟

أين تجدهم

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

سمة

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

دليل الأنماط (WordPress)

بدءًا من إصدار WordPress 5.9 ، سيوفر WordPress أنماطه الخاصة من خلال دليل الأنماط.

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

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

الإضافات الطرف الثالث

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

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

مستقبل الأنماط

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

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

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

الأنماط هي مستقبل WordPress ، والمستقبل مشرق.

تغليف

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

إذن ما رأيك في الأنماط؟ هل تستخدمها على موقع الويب الخاص بك؟ هل لديك أي أسئلة لم يتم تناولها في هذا المقال؟ اسمحوا لنا أن نعرف في التعليقات.