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

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

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

تصميم نمط

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

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

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

يمكنك رؤية 33 من الكتل التي تشكل هذا التصميم في لقطة الشاشة أعلاه!

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

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

تقاسم التصميم

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

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

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

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

تسجيل نمط

قد يكون نسخ ولصق ترميز الكتلة أمرًا سهلاً ، لكننا غالبًا ما نريد إصدارًا أكثر ديمومة من تصميمات الأنماط الخاصة بنا. للقيام بذلك ، سوف نستخدم Patterns API لـ "تسجيل" نمط كتلة مخصص. هذا يجعل تصميمنا متاحًا في كل من Inserter و Pattern Explorer داخل WordPress.

لتسجيل نمط ، نستخدم وظيفة PHP register_block_pattern (). تقبل هذه الوظيفة معلمتين ، عنوان ومجموعة من الخصائص. قبل استعراض كل منها ، دعنا نلقي نظرة على مثال.

register_block_pattern (

"مثال / ميزة-شبكة-ضوء" ،

مجموعة مصفوفة(

'title' => __ ('Feature Grid - Light'، 'textdomain')،

'description' => __ ('اعرض ستة عناصر مميزة في شبكة بخلفية فاتحة.'، 'textdomain')،

"الفئات" => مجموعة ("مميزة" ، "أعمدة") ،

"الكلمات الرئيسية" => مجموعة ("ميزة" ، "شبكة") ،

"viewportWidth" => 1400 ،

'blockTypes' => مجموعة ('أساسية / أعمدة') ،

'content' => 'PATTERN CONTENT'

)

) ؛

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

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

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

function my_pattern_library_register_block_patterns () {

register_block_pattern (

"مثال / ميزة-شبكة-ضوء" ،

مجموعة مصفوفة( … )

) ؛

register_block_pattern (

"مثال / ميزة شبكة غامقة ،

مجموعة مصفوفة( … )

) ؛

}

add_action ('init'، 'example_register_block_patterns')؛

الكود الكامل متاح في Gist on GitHub.

بمجرد إضافة الرمز ، سيتم الآن عرض الأنماط المسجلة حديثًا في Inserter و Pattern Explorer.

تسجيل فئة النمط

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

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

الوظيفة example_register_block_pattern_categories () {

register_block_pattern_category (

'مخصص'،

المصفوفة ('label' => __ ('Custom'، 'textdomain'))

) ؛

}

add_action ('init'، 'example_register_block_pattern_categories')؛

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

قم بإنشاء ملحق مكتبة الأنماط

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

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

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

نصيحة سريعة: إذا كنت ترغب في تخطي الخطوات التالية ، فقد أعددت مكونًا إضافيًا كاملًا لـ "My Pattern Library" والذي يجب أن يوفر نقطة بداية رائعة لمكتبتك الخاصة. الكود متاح باعتباره Gist على GitHub.

الخطوة 1: الحصول على الإعداد

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

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

الخطوة 2: إنشاء البرنامج المساعد

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

انتقل إلى دليل wp-content → plugins في تثبيت WordPress المحلي الخاص بك وقم بإنشاء دليل جديد بعنوان my-pattern-library. يمكنك تسمية الدليل بأي شيء تريده. ما عليك سوى استبدال "my-pattern-library" باسمك المخصص في جميع الخطوات اللاحقة.

داخل ملف wp-content → plugins الجديد → my-pattern-library ، قم بإنشاء ملف PHP بعنوان my-pattern-library.php. افتح الملف في محرر النصوص الخاص بك وأضف تعليق رأس المكون الإضافي التالي إلى أعلى الملف. لا تنس البادئة <؟ php. لاحظ أنني قمت بتبسيط رأس هذا البرنامج التعليمي.

<؟ php

/ **

* اسم البرنامج المساعد: My Pattern Library

* الوصف: مكتبة بسيطة لأنماط الكتلة.

* الإصدار: 0.1.0

* يتطلب على الأقل: 5.8

* يتطلب PHP: 7.0

* المؤلف: اسمك

* الترخيص: GPL v2 أو أحدث

* مجال النص: مكتبة النمط الخاص بي

* /

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

بينما لديك الآن مكونًا إضافيًا عاملاً ، إلا أنه لا يفعل شيئًا في الواقع. دعونا نغير ذلك.

الخطوة 3: تسجيل الأنماط والفئات

في هذه الخطوة الأخيرة ، كل ما عليك فعله هو نسخ رمز تسجيل فئة النمط والنمط من سابقًا في هذه المقالة إلى المكون الإضافي الجديد. لقد وضعنا هذا الرمز مسبقًا في ملف jobs.php الخاص بالقالب. الآن ، فقط الصقه أسفل تعليق الرأس في ملف my-pattern-library.php الخاص بك.

احفظ الملف ثم انتقل إلى المحرر في WordPress. افتح Inserter ، وانقر فوق علامة التبويب Patterns واختر فئة Custom. يجب أن ترى نمطين مسجَّلين بواسطة البرنامج المساعد.

مكتبة الأنماط الخاصة بك تعمل الآن! عندما تكون هناك حاجة لأنماط أو فئات مخصصة جديدة ، ما عليك سوى إضافتها إلى المكون الإضافي. يتوفر مثال كود كامل على شكل Gist on GitHub.

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

تغليف

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