كيفية إنشاء إضافة بسيطة جوتنبرج بلوك وورد

هل ترغب في إنشاء ملف وورد البرنامج المساعد كتلة جوتنبرج بسيطة؟

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

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

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

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

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

ولكن من قبل ، إذا لم تقم بتثبيت WordPress ، فاكتشف كيفية تثبيت وورد بلوق الخطوات 7 et كيفية العثور عليها، وتثبيت وتفعيل موضوع ورد على بلوق

ثم عد إلى سبب وجودنا هنا. 

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

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

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

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

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

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

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

كيفية إنشاء كتلة مخصصة (باستخدام Genesis Custom Blocks)

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

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

قم بتثبيت Genesis Custom Blocks

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

ثم أدخل " كتل Genesis المخصصة في مربع البحث عن الكلمات الرئيسية و انقر على الزر تثبيت الآن

بعد هذا، نشط البرنامج المساعد لتبدأ

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

في قائمة مسؤول WordPress الخاصة بك ، انتقل إلى كتل مخصصة> إضافة جديد، كما نبرز أدناه.

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

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

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

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

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

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

إنشاء كتلة مخصصة

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

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

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

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

اقرأ أيضا: 5 WooCommerce الإضافات لتحرير المنتجات بكميات كبيرة

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

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

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

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

التبديل إلى محرر القالب > الترميز.

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

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

في محرر النموذج، تحت علامة تبويب الترميز، أضف الكود التالي:

<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">Telecharger</button></a>
</div>
</div>

أثناء كتابة التعليمات البرمجية الخاصة بك ، ستلاحظ ذلك محرر النموذج الارتباطات الحقلية ذات الإكمال التلقائي (على سبيل المثال {{image-field}}) نيابةً عنك.

ثم اذهب إلى القسم CSS لإضافة أنماط بسيطة بالكود التالي:

.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}

.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;

}

يمكنك تخصيص هذه الأنماط كما تريد ،

انقر نشر :

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

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

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

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

الموارد الأخرى الموصى بها

كما ندعوكم للتشاور مع RESSOURCES أدناه للحصول على مزيد من الملكية والتحكم في موقع الويب والمدونة الخاصة بك.

• 10 ملحقات WordPress التابعة لإنشاء برنامج
• كيفية إضافة أعمدة متعددة في WordPress
• كيفية إضافة أعمدة متعددة في WordPress
• باستخدام مختلف الخلفيات وورد
• Elementor: كيفية إنشاء رسم متحرك عند التمرير

وفي الختام

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

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

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

في هذه الأثناء، شارك هذا المقال على الشبكات الاجتماعية المختلفة.   

...