كيفية إنشاء قالب Gutenberg مخصص في WordPress (طريقة سهلة)
الخطوة 1: ابدأ
أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Block Lab .
إنه مكون إضافي لبرنامج WordPress يسمح لك بإنشاء كتل مخصصة من لوحة الإدارة الخاصة بك دون الكثير من المتاعب.
لتثبيت المكون الإضافي ، يمكنك اتباع دليل المبتدئين الخاص بنا حول كيفية تثبيت مكون WordPress الإضافي .
بمجرد تنشيط المكون الإضافي ، يمكنك المتابعة إلى الخطوة التالية لإنشاء أول كتلة مخصصة لك.
الخطوة 2: إنشاء كتلة جديدة
من أجل هذا البرنامج التعليمي ، سنقوم ببناء كتلة “الشهادات”.
أولاً ، توجه إلى Block Lab »إضافة جديد من الشريط الجانبي الأيسر من لوحة الإدارة.
في هذه الصفحة ، تحتاج إلى إعطاء اسم لحجبتك. يمكنك كتابة أي اسم من اختيارك في مربع النص “أدخل اسم الكتلة هنا”.
سنقوم بتسمية الكتلة المخصصة لدينا: الشهادات.
على الجانب الأيمن من الصفحة ، ستجد خصائص الكتلة. هنا يمكنك اختيار رمز للحظر الخاص بك وتحديد فئة كتلة من مربع القائمة المنسدلة الفئة.
سيتم ملء الرابط الثابت تلقائيًا بناءً على اسم الكتلة الخاصة بك ، لذلك لن تضطر إلى تغييره. ومع ذلك ، يمكنك كتابة ما يصل إلى 3 كلمات رئيسية في حقل نص الكلمات الرئيسية ، بحيث يمكن العثور على حظرك بسهولة.
الآن دعنا نضيف بعض الحقول إلى الكتلة الخاصة بنا. يمكنك إضافة أنواع مختلفة من الحقول مثل النص والأرقام والبريد الإلكتروني وعنوان URL واللون والصورة ومربع الاختيار وأزرار الاختيار وغير ذلك الكثير.
سنضيف 3 حقول إلى قالب الشهادة المخصص لدينا: حقل صورة لصورة المراجع ، ومربع نصي لاسم المراجع ، وحقل نصي لنص الشهادة.
انقر فوق الزر + إضافة حقل لإدراج الحقل الأول.
سيؤدي هذا إلى فتح بعض الخيارات للمجال. دعونا نلقي نظرة على كل منهم.
- تسمية الحقل : يمكنك استخدام أي اسم من اختيارك لتسمية الحقل. دعنا نسمي حقلنا الأول باسم صورة المراجع.
- اسم الحقل : سيتم إنشاء اسم الحقل تلقائيًا بناءً على تسمية الحقل. سنستخدم اسم الحقل هذا في الخطوة التالية ، لذا تأكد من أنه فريد لكل حقل.
- نوع الحقل : هنا يمكنك تحديد نوع الحقل. نريد أن يكون حقلنا الأول عبارة عن صورة ، لذلك سنختار صورة من القائمة المنسدلة.
- موقع الحقل : يمكنك تحديد ما إذا كنت تريد إضافة الحقل إلى المحرر أو المفتش.
- نص المساعدة : يمكنك إضافة بعض النص لوصف الحقل. هذا غير مطلوب إذا كنت تقوم بإنشاء هذا الحظر لاستخدامك الشخصي.
قد تحصل أيضًا على بعض الخيارات الإضافية بناءً على نوع الحقل الذي تختاره. على سبيل المثال ، إذا حددت حقلاً نصيًا ، فستحصل على خيارات إضافية مثل نص العنصر النائب وعدد الأحرف المسموح به.
يمكنك النقر فوق الزر إغلاق الحقل بمجرد الانتهاء من حقل الصورة.
باتباع العملية المذكورة أعلاه ، دعنا نضيف حقلين آخرين لمجموعة الشهادات الخاصة بنا عن طريق النقر فوق الزر + إضافة حقل .
إذا كنت ترغب في إعادة ترتيب الحقول ، فيمكنك القيام بذلك عن طريق سحبها باستخدام رمز الهامبرغر على الجانب الأيسر من كل تسمية حقل.
لتحرير حقل معين أو حذفه ، تحتاج إلى تحريك مؤشر الماوس فوق تسمية الحقل للحصول على خيارات التعديل والحذف.
بمجرد الانتهاء ، انقر فوق الزر نشر ، الموجود على الجانب الأيمن من الصفحة ، لحفظ كتلة Gutenberg المخصصة الخاصة بك.
الخطوة 3: إنشاء قالب بلوك
على الرغم من أنك قمت بإنشاء كتلة WordPress المخصصة في الخطوة الأخيرة ، فإنها لن تعمل حتى تقوم بإنشاء قالب كتلة باسم block-testimonials.php وتحميله إلى مجلد القالب الحالي.
سيخبر ملف قالب الحظر البرنامج المساعد بكيفية عرض حقول الحظر داخل المحرر. سيبحث المكون الإضافي عن ملف القالب ثم يستخدمه لعرض محتوى الكتلة.
إذا لم يكن لديك هذا الملف ، فسيتم عرض خطأ مفاده “لم يتم العثور على كتل ملف القالب / block-testimonials.php”.
لنقم بإنشاء ملف القالب الخاص بنا.
أولاً ، قم بإنشاء مجلد على سطح المكتب الخاص بك وقم بتسميته كتل . ستقوم بإنشاء ملف قالب الحظر الخاص بك داخل هذا المجلد ثم تحميله إلى دليل سمة WordPress الحالي الخاص بك.
لإنشاء ملف القالب ، يمكنك استخدام محرر نص عادي مثل Notepad.
في كل مرة تقوم فيها بإضافة حقل جديد إلى الكتلة المخصصة الخاصة بك ، تحتاج إلى إضافة رمز PHP التالي إلى ملف قالب الحظر الخاص بك:
|
1
|
<?php block_field( 'add-your-field-name-here' ); ?> |
فقط تذكر استبدال add-your-field-name-هنا باسم الحقل.
على سبيل المثال ، اسم حقلنا الأول هو صورة المراجع ، لذلك سنضيف السطر التالي إلى ملف النموذج:
|
1
|
<?php block_field( 'reviewer-image' ); ?> |
بسيط ، أليس كذلك؟ لنفعل الشيء نفسه بالنسبة لبقية مجالاتنا:
|
1
2
3
|
<?php block_field( 'reviewer-image' ); ?><?php block_field( 'reviewer-name' ); ?><?php block_field( 'testimonial-text' ); ?> |
بعد ذلك ، سنضيف بعض علامات HTML إلى الكود أعلاه لأغراض التصميم.
على سبيل المثال ، يمكنك التفاف صورة المراجع داخل علامة img لعرض الصورة. خلاف ذلك ، سيعرض WordPress عنوان URL للصورة وهو ليس ما تريده ، أليس كذلك؟
يمكنك أيضًا إضافة أسماء فئات إلى علامات HTML الخاصة بك والتفاف شفرتك داخل حاوية div لتصميم محتوى الكتلة (وهو ما سنفعله في هذه الخطوة التالية).
إذن ، هذا هو الكود النهائي الخاص بنا لقالب الكتلة الخاص بنا:
|
1
2
3
4
5
6
7
8
9
|
<div class="testimonial-block clearfix"> <div class="testimonial-image"> <img src ="<?php block_field( 'reviewer-image' ); ?>"> </div> <div class="testimonial-box"> <h4><?php block_field( 'reviewer-name' ); ?></h4> <p><?php block_field( 'testimonial-text' ); ?></p> </div></div> |
وأخيرا، اسم الملف كملف كتلة testimonials.php وحفظه داخل كتل المجلد.
الخطوة 4: صمم بلوك المخصص
هل تريد تصميم كتلك المخصص؟ يمكنك القيام بذلك بمساعدة CSS.
افتح محرر نص عادي مثل Notepad وأضف الكود التالي:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.testimonial-block { width: 100%; margin-bottom: 25px;}.testimonial-image { float: left; width: 25%; padding-right: 15px;}.testimonial-box { float: left; width: 75%;}.clearfix::after { content: ""; clear: both; display: table;} |
بمجرد الانتهاء من ذلك ، قم بتسمية الملف باسم block-testimonials.css واحفظه داخل مجلد الكتل .
الخطوة 5: تحميل ملف قالب بلوك إلى مجلد السمة
لنقم الآن بتحميل مجلد الكتل الذي يحتوي على ملف قالب الكتلة المخصص لدينا إلى مجلد سمة WordPress الخاص بنا.
للقيام بذلك ، تحتاج إلى الاتصال بموقع WordPress الخاص بك باستخدام عميل FTP. للحصول على المساعدة ، يمكنك مراجعة دليلنا حول كيفية تحميل الملفات إلى موقع WordPress الخاص بك باستخدام FTP .
بمجرد الاتصال ، انتقل إلى / wp-content / theme / folder. من هنا تحتاج إلى فتح مجلد السمات الحالي الخاص بك.
الآن قم بتحميل مجلد الكتل ، الذي يحتوي على ملف قالب الحظر وملف CSS ، إلى دليل القالب الخاص بك.
بمجرد الانتهاء من ذلك ، يمكنك المتابعة إلى الخطوة الأخيرة لاختبار حظرك المخصص.
ملاحظة : يسمح لك المكون الإضافي Block Lab بإنشاء كتل خاصة بالموضوع. إذا قمت بتغيير قالب WordPress الخاص بك ، فأنت بحاجة إلى نسخ مجلد الكتل إلى دليل السمات الجديد.
الخطوة 6: اختبر الكتلة الجديدة
حان الوقت لاختبار مجموعة الشهادات المخصصة لدينا. يمكنك القيام بذلك من خلال التوجه إلى الصفحات » إضافة جديد لإنشاء صفحة جديدة.
بعد ذلك ، انقر فوق رمز إضافة كتلة (+) وابحث عن كتلة الشهادات. بمجرد العثور عليه ، انقر فوقه لإضافة الكتلة المخصصة إلى محرر صفحتك.
يمكنك الآن إضافة شهادة لهذه الصفحة باستخدام الكتلة المخصصة الخاصة بك. لإضافة المزيد من الشهادات ، يمكنك دائمًا إدراج قوالب شهادات جديدة.
بمجرد الانتهاء ، يمكنك معاينة الصفحة أو نشرها للتحقق مما إذا كانت تعمل بشكل صحيح أم لا.
هذا كل شئ! لقد نجحت في إنشاء أول قالب WordPress مخصص لموقعك.
هل تعلم أنه يمكنك توفير الوقت باستخدام الكتل القابلة لإعادة الاستخدام في المحرر الخاص بك؟ راجع دليلنا حول كيفية إنشاء كتل قابلة لإعادة الاستخدام بسهولة في محرر قوالب WordPress واستخدامها على مواقع الويب الأخرى.
