كيفية إنشاء ملحق جوتنبرج بلوك بسيط

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

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

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

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

بدون مزيد من اللغط ، دعونا نبدأ لأن هناك الكثير لنتعلمه.

ما هي الكتل ، على أي حال؟

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

ومع ذلك ، فإن محرر قوالب WordPress موجود ليبقى سواء أحببنا ذلك أم لا. لهذا السبب بالتحديد يجب أن تتعلم قدر المستطاع عن Gutenberg (وكل ما يأتي معه) لتحقيق أقصى استفادة منه.

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

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

يظهر محرر جوتنبرج بعض الكتل

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

تمامًا مثل أداة إنشاء الصفحات المضمنة مباشرةً في WordPress.

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

بعد هذا بعيدًا ، دعنا نصل إلى أفضل جزء من منشور اليوم. دعونا نتعلم كيفية إنشاء كتلة بسيطة. يمكنك القيام بذلك يدويًا أو باستخدام المكونات الإضافية مثل Genesis Custom Blocks (المعروف سابقًا باسم BlockLab) أو Lazy Blocks أو ACF. يعد إنشاء كتل مخصصة أمرًا تقنيًا بعض الشيء ، لذلك لأغراض منشور اليوم ، سنستخدم مكونًا إضافيًا.

كيفية إنشاء قالب مخصص (باستخدام قوالب تكوين مخصصة)

يعد الانتقال إلى مسار البرنامج المساعد أسهل نظرًا لأن إنشاء كتل Gutenberg المخصصة من البداية يحتاج إلى فهم جيد لـ HTML و CSS و PHP والأهم من ذلك ، JavaScript. ستحتاج أيضًا إلى فهم React ، والتي تلقي بالمبتدئين في كرة منحنى.

بالنسبة للقسم التالي ، سنستخدم Genesis Custom Blocks ، والتي يتم تقديمها لك بواسطة StudioPress و WPEngine ، من بين مطورين آخرين. يتوفر الإصدار المجاني من Genesis Custom Blocks في مستودع WordPress الرسمي ، مما يعني أنه يمكننا تثبيته داخل لوحة تحكم مسؤول WordPress.

قم بتثبيت Genesis Custom Blocks

سجّل الدخول إلى لوحة تحكم مسؤول WordPress ، وانتقل إلى الإضافات> إضافة جديد ، كما هو موضح أدناه.

بعد ذلك ، أدخل "Genesis Custom Blocks" في مربع البحث عن الكلمات الرئيسية ، واضغط على زر التثبيت الآن :

بعد ذلك ، قم بتنشيط المكون الإضافي لبدء الحفلة.

أنت تبلي بلاءً حسنًا

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

من قائمة مسؤول WordPress الخاصة بك ، انتقل إلى Custom Blocks> Add New ، كما نبرز أدناه.

سيؤدي القيام بذلك إلى الصفحة التالية حيث تجد جميع الخيارات لإنشاء الكتلة المخصصة الخاصة بنا (في حالتنا ، CTA):

إليك بضع كلمات لشرح ما تراه في لقطة الشاشة أعلاه. بدءاً من القمة ، لديك.

منطقة التحرير الرئيسية:

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

خيارات الشريط الجانبي

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

إنشاء قالب مخصص

الآن بعد أن أصبح لديك فهم أفضل لواجهة المستخدم ، وما يفعله كل جزء ، دعنا نشمر عن الأكمام لبدء العمل.

في المنشئ ، امنح الكتلة المخصصة الخاصة بك عنوانًا مناسبًا. سأذهب مع CTA لهذا واحد ، كما هو موضح أدناه.

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

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

إضافة حقول بلوك

في قسم حقول المحرر ، انقر فوق رمز الإضافة (+) لإضافة الحقل الأول ، كما هو موضح أدناه.

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

بعد ذلك ، أضف حقلي النص والملف بطريقة مماثلة.

لا تحتفل بعد ، هناك خطوة واحدة يجب أن نقطعها. قم بالتبديل إلى محرر النماذج> التوصيف:

لدي بعض الرموز بالفعل ولكن الرمز الخاص بك سيكون فارغًا

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

لا تقلق ، إنه سهل.

داخل محرر القوالب ، ضمن علامة التبويب التوصيف (انظر الصورة أعلاه) ، أضف الجزء التالي من ترميز HTML (رمز):

 <div class = "cta-block">
<div class = "cta-image">
<img src = "{{image-field}}">
</div>
<div class = "text-upload">
<h2> {{text-field}} </h2>
<a href="{{file-field}}">
<button type = "button" class = "dwnld"> تنزيل </ زر> </a>
</div>
</div>

أثناء كتابة ترميز HTML ، ستلاحظ أن محرر النماذج يكمل تلقائيًا الحقول الثابتة (مثل {{image-field}}) نيابةً عنك

بعد ذلك ، انتقل إلى قسم CSS لإضافة بعض الأنماط البسيطة.

يمكنك إضافة الأنماط التي تريدها ولكن هذا ما أعمل به:

 .cta-block {
محاذاة النص: مركز ؛
لون الخلفية: برتقالي ؛
العرض: 100٪؛
الارتفاع: تلقائي ؛
الحدود: 2 بكسل برتقالي صلب ؛
}

.dwnld {
لون الخلفية: أسود ؛
الحدود: 2 بكسل أسود صلب ؛
الون الاخضر؛
الحشو: 5 بكسل 10 بكسل ؛
محاذاة النص: مركز ؛
عرض: مضمنة كتلة ؛
حجم الخط: 20 بكسل ؛
الهامش: 10 بكسل 30 بكسل ؛
المؤشر: المؤشر.
نصف قطر الحدود: 2 بكسل ؛

}

وأنت على أتم استعداد! انقر فوق نشر :

لرؤية الحظر المخصص الجديد قيد التنفيذ ، ارجع إلى لوحة تحكم مسؤول WordPress وانتقل إلى المنشورات > إضافة جديد (يعمل مع الصفحات أيضًا):

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

بعد ذلك ، املأ الكتلة المخصصة الخاصة بك حسب الرغبة وانشر المنشور الخاص بك:

الآن ، إذا قمت بفحص قالب CTA المخصص الجديد الخاص بي في الواجهة الأمامية ، أرى هذا:

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

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

أي أفكار أو أسئلة؟ واسمحوا لنا أن نعرف في التعليقات أدناه.