كيفية إنشاء قالب WordPress مخصص (طريقة سهلة)

هل تريد إنشاء كتلة Gutenberg مخصصة لموقع الويب الخاص بك على WordPress؟

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

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

لماذا إنشاء قالب WordPress مخصص؟

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

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

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

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

ملاحظة : هذه المقالة مخصصة للمستخدمين المتوسطين. ستحتاج إلى أن تكون على دراية بـ HTML و CSS لإنشاء كتل Gutenberg مخصصة.

الخطوة 1: ابدأ باستخدام أول كتلة مخصصة لك

أولاً ، تحتاج إلى تثبيت وتفعيل المكون الإضافي Genesis Custom Blocks. لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون WordPress الإضافي.

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

من أجل هذا البرنامج التعليمي ، سنقوم ببناء كتلة "الشهادات".

أولاً ، توجه إلى Custom Blocks »إضافة صفحة جديدة من الشريط الجانبي الأيسر من لوحة الإدارة.

سينقلك هذا إلى صفحة Block Editor.

من هنا ، تحتاج إلى تسمية الكتلة الخاصة بك.

على الجانب الأيمن من الصفحة ، ستجد خصائص الكتلة.

يمكنك هنا اختيار رمز لحجبتك وإضافة فئة وإضافة كلمات رئيسية.

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

الآن دعنا نضيف بعض الحقول إلى الكتلة الخاصة بنا.

يمكنك إضافة أنواع مختلفة من الحقول مثل النص والأرقام وعنوان البريد الإلكتروني وعنوان URL واللون والصورة ومربع الاختيار وأزرار الاختيار وغير ذلك الكثير.

سنضيف 3 حقول إلى قالب الشهادة المخصص لدينا: حقل صورة لصورة المراجع ، ومربع نصي لاسم المراجع ، وحقل منطقة نص لنص الشهادة.

انقر فوق الزر [+] إضافة حقل لإدراج الحقل الأول.

سيؤدي هذا إلى فتح بعض الخيارات للميدان. دعونا نلقي نظرة على كل منهم.

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

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

باتباع العملية المذكورة أعلاه ، دعنا نضيف حقلين آخرين لمجموعة الشهادات الخاصة بنا عن طريق النقر فوق الزر [+] إضافة حقل .

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

لتحرير حقل معين أو حذفه ، تحتاج إلى النقر فوق تسمية الحقل وتحرير الخيارات في العمود الأيمن.

بمجرد الانتهاء ، انقر فوق الزر " نشر " ، الموجود على الجانب الأيمن من الصفحة ، لحفظ كتلة Gutenberg المخصصة الخاصة بك.

الخطوة 2: إنشاء قالب كتلة مخصص

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

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

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

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

الطريقة الأولى: استخدام محرر القوالب المدمج

في شاشة تحرير الكتلة المخصصة ، ما عليك سوى التبديل إلى علامة التبويب محرر النماذج وإدخال HTML ضمن علامة تبويب التوصيف.

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

على سبيل المثال ، استخدمنا HTML التالي لعينة الكتلة التي أنشأناها أعلاه.

<div class="testimonial-item">
<img src="reviewer-image" class="reviewer-image">
<h4 class="reviewer-name">reviewer-name</h4>
<div class="testimonial-text">testimonial-text</div>
</div>

بعد ذلك ، قم بالتبديل إلى علامة تبويب CSS لتصميم ترميز ناتج الكتلة.

إليك نموذج CSS الذي استخدمناه للكتلة المخصصة الخاصة بنا.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

الطريقة الثانية: تحميل قوالب بلوك مخصصة يدويًا

يوصى بهذه الطريقة إذا كنت بحاجة إلى استخدام PHP للتفاعل مع حقول الحظر المخصصة الخاصة بك.

ستحتاج أساسًا إلى تحميل قالب المحرر مباشرة إلى المظهر الخاص بك.

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

بعد ذلك ، تحتاج إلى إنشاء ملف يسمى block.php باستخدام محرر نص عادي. هذا هو المكان الذي ستضع فيه جزء HTML / PHP من قالب الحظر الخاص بك.

إليك نموذج النموذج الذي استخدمناه في مثالنا.

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

لاحظ كيف استخدمنا وظيفة block_field() لجلب البيانات من حقل كتلة.

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

لا تنس حفظ الملف داخل المجلد الذي أنشأته مسبقًا.

بعد ذلك ، تحتاج إلى إنشاء ملف آخر باستخدام محرر النص العادي على جهاز الكمبيوتر الخاص بك وحفظه كملف block.css داخل المجلد الذي قمت بإنشائه.

سنستخدم هذا الملف لإضافة CSS اللازمة لتصميم عرض الكتل الخاص بنا. إليك نموذج CSS الذي استخدمناه في هذا المثال.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

لا تنس حفظ التغييرات الخاصة بك.

سيحتوي مجلد قالب الحظر الآن على ملفي قالب بداخله.

بعد ذلك ، تحتاج إلى تحميل مجلد الحظر الخاص بك إلى موقع الويب الخاص بك باستخدام عميل FTP أو تطبيق File Manager داخل لوحة تحكم حساب استضافة WordPress الخاص بك.

بمجرد الاتصال ، انتقل إلى المجلد /wp-content/themes/your-current-theme/ folder.

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

أدخل الآن مجلد الكتل وقم بتحميل المجلد الذي قمت بإنشائه على جهاز الكمبيوتر الخاص بك إلى مجلد الكتل.

هذا كل شئ! لقد نجحت في إنشاء ملفات قالب يدوية للكتلة المخصصة الخاصة بك.

الخطوة الثالثة. معاينة الكتلة المخصصة الخاصة بك

الآن ، قبل أن تتمكن من معاينة HTML / CSS ، تحتاج إلى تقديم بعض بيانات الاختبار التي يمكن استخدامها لعرض عينة الإخراج.

داخل منطقة إدارة WordPress ، قم بتحرير حظرك وانتقل إلى علامة التبويب معاينة المحرر. هنا ، تحتاج إلى إدخال بعض البيانات الوهمية.

لا تنس النقر فوق الزر "تحديث" لحفظ التغييرات قبل أن تتمكن من المعاينة.

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

إذا كان كل شيء يبدو جيدًا بالنسبة لك ، فيمكنك تحديث الكتلة الخاصة بك لحفظ أي تغييرات غير محفوظة.

الخطوة 4. استخدام قالب Custom الخاص بك في WordPress

يمكنك الآن استخدام حظرك المخصص في WordPress كما لو كنت تستخدم أي كتل أخرى.

ما عليك سوى تحرير أي منشور أو صفحة تريد استخدام هذه الكتلة فيها.

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

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

يمكنك ملء الحقول حسب الحاجة.

عندما تبتعد عن الكتلة إلى كتلة أخرى ، سيعرض المحرر تلقائيًا معاينة مباشرة لحجبتك.

يمكنك الآن حفظ منشورك وصفحتك ومعاينتهما لرؤية الحظر المخصص الخاص بك قيد التنفيذ على موقع الويب الخاص بك.

إليك كيف تبدو مجموعة الشهادات على موقع الاختبار الخاص بنا.

نأمل أن تساعدك هذه المقالة في تعلم كيفية إنشاء كتل Gutenberg المخصصة بسهولة لموقع الويب الخاص بك على WordPress.

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

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على YouTube لدروس فيديو WordPress. يمكنك أيضًا أن تجدنا على Twitter و Facebook.