قم بإنشاء قوالب جوتنبرج بلوك لتجربة أفضل

WordPress 5.x هو أحدث إصدار من أشهر أنظمة إدارة المحتوى في العالم. من الميزات المثيرة للاهتمام في الإصدار الجديد محرر Gutenberg الذي يستعد لإحداث ثورة في طريقة إنشاء WordPressers للمحتوى على النظام الأساسي. على الأقل هذه هي الرواية الرسمية!

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

تخصيص كتل جوتنبرج

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

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

هناك طريقتان لإنشاء قوالب كتلة مخصصة لـ Gutenberg. لاحظ أن كلتا الطريقتين تتطلب بعض المعرفة بتطوير WordPress.

سجل كتل جوتنبرج

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

 add_action ('init'، function () {
    $ args = مجموعة (
        'public' => صحيح ،
        "label" => "أخبار" ،
        'show_in_rest' => صحيح ،
        'template_lock' => 'all'،
        'template' => مجموعة (
            مجموعة ("أساسية / فقرة" ، صفيف (
                'placeholder' => "أخبار عاجلة" ،
            )) ،
            المصفوفة ("الأساسية / الصورة" ، المصفوفة (
                "محاذاة" => "الحق" ،
            )) ،
        ) ،
    ) ؛

    register_post_type ('news'، $ args) ؛
}) ؛

إليك كيف سيبدو هذا النموذج المخصص لكتلة Gutenberg أثناء العمل:

في مقتطف الشفرة أعلاه ، تكون معلمة المصفوفة "core / paragraph" مسؤولة عن محتوى الكتلة. وبالمثل ، تتيح لك معلمة المصفوفة "core / image" تحميل الصور بثلاث طرق: التحميل المباشر والاختيار من مكتبة الوسائط والدمج باستخدام عنوان URL.

تشير المعلمة "show_in_rest" إلى نواة WordPress إلى أن هذه الكتلة المخصصة يجب أن يتم جلبها من خلال واجهة برمجة تطبيقات WordPress REST.

عند ضبط الوسيطة "template_lock" على "الكل" ، تمنع إضافة (أو إزالة) الكتل المخصصة إلى القالب.

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

 'template' => مجموعة (
            المصفوفة ("الأساسية / العنوان" ، المصفوفة ("المستوى" => "4" ، "المحتوى" => "العنوان")) ،
            مجموعة ("أساسية / فقرة") ،
        )

قم بإنشاء ملحق جوتنبرج

عند العمل باستخدام قالب مخصص وقوالب Gutenberg ، فإن أفضل الممارسات هي إنشاء مكون إضافي مخصص لمكوِّن إضافي مخصص Gutenberg Editor.

مثل جميع المكونات الإضافية ، سيكون هذا المكون الإضافي موجودًا في دليل wp-content / plugins الذي يحتوي على مجلدات منفصلة لجميع المكونات الإضافية المثبتة على موقع الويب.

لإنشاء البرنامج المساعد ، انتقل إلى دليل wp-content / plugins وأنشئ مجلدًا جديدًا. يجب أن يكون اسم المجلد هو اسم المكون الإضافي المخصص لقالب Gutenberg. لغرض هذا البرنامج التعليمي ، قمت بتسمية المكون الإضافي الخاص بي "Gutenberg Blocks". وبالتالي ، سيكون اسم المجلد هو " Gutenberg-Blocks ".

في هذا المجلد ، أنشئ ملفًا باسم Gutenberg-blocks.php وقم بإنشاء الكود التالي له:

 / **
 * اسم البرنامج المساعد: كتل جوتنبرج
 * المؤلف: محمد عويس علم
 * الوصف: يتيح هذا المكون الإضافي للمستخدمين إضافة قالب مخصص لـ WordPress Gutenberg لمحرر Gutenberg
 * الإصدار: 1.0.0
 * /

add_action ('init'، function () {
    $ args = مجموعة (
        'public' => صحيح ،
        "label" => "أخبار" ،
        'show_in_rest' => صحيح ،
        'template_lock' => 'all'،
        'template' => مجموعة (
            مجموعة ("أساسية / فقرة" ، صفيف (
                'placeholder' => "أخبار عاجلة" ،
            )) ،
            المصفوفة ("الأساسية / الصورة" ، المصفوفة (
                "محاذاة" => "الحق" ،
            )) ،
        ) ،


    ) ؛

    register_post_type ('news'، $ args) ؛
}) ؛

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

مثال على موضوع جوتنبرج وورد - جوتنبيري

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

يعد Gutenberry حاليًا أحد أفضل السمات الجاهزة لـ Gutenberg بنسبة 100٪. تم إنشاء هذا المظهر النظيف والبسيط في Gutenberg ، مما يوفر لك سهولة غير مسبوقة في التحرير وسرعة مثالية. على سبيل المثال ، تقوم Google Speed ​​بتقييم Gutenberry A 97.

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

فيما يلي الميزات البارزة لموضوع Gutenberg:

• نموذج مثبت البيانات
• دعم مدى الحياة على مدار الساعة طوال أيام الأسبوع
• كود المصدر الأمثل
• جاهز لخدمة MailChimp
• استجابة تامة
• تخطيطات الوحدة البديلة
• 3 تخطيطات مدونة ديناميكية

تغليف!

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