ساخت بلوک دلخواه در گوتنبرگ وردپرس

اگر به فکر ساخت بلوک دلخواه گوتنبرگ هستید و میخواهید برای ویرایشگر خود یک بلوک جدید ایجاد کنید . ما در این آموزش به شما یاد داده ایم که چطور به سادگی یک بلوک دلخواه ایجاد کنید

ساخت بلوک دلخواه در گوتنبرگ وردپرس

برای ساخت اولین بلوک باید افزونه Block Lab که مخصوص همین کار است را نصب کنیم . برای نصب افزونه میتوانید از آموزش نصب افزونه وردپرس استفاده کنید . بعد از نصب یک منو جدید به نام block lab به منو پیشخوان وردپرس شما اضافه خواهد شد . بر روی آن کلیک و سپس وارد زیر منو add new شوید

در این صفحه اولین فیلد مربوط به عنوان بلوک میشود که enter block name here نام دارد . در این فیلد نام بلوک دلخواه خود را وارد کنید . بعد از وارد کردن نام باید به سراغ افزودن فیلد های مورد نیازمان برویم . ما در اینجا قصد داریم یک بلوک برای اطلاعات کارمندان سایتمان ایجاد کنیم

برای اینکار بر روی دکمه add field کلیک کرده و دو فیلد را با استفاده از راهنمای زیر بسازید

• Field Label : نام فیلدی که قصد ساخت ان را دارید
• Field Name : یک نام که در ادامه برای کد نویسی از ان استفاده خواهیم کرد
• Field Type : نوع فیلد که میتواند شامل نوشته ، تصویر و … باشد
• Field Location : محل این فیلد را مشخص کنید
• Help Text : یک متن راهنما برای فیلد ساخته شده

ما در اینجا دو فیلد با نام های “نام کارمند” و “تصویر کاربر ساختیم” . شما میتوانید هر تعداد فیلد که نیاز دارید را به همراه هر اسمی که میخواهید بسازید . بعد از ساخت فیلد ها آنها را ذخیره کنید

بعد از ذخیره فیلد ها و بلوک یک کادر به شکل زیر برای شما باز خواهد شد

ایجاد فایل قالب بلوک دلخواه

حالا که فیلد ها ساخته و بلوک نیز ساخته شده است نوبت ان است که فایل اختصاصی بلوک دلخواه گوتنبرگ را نیز بسازید . برا اینکار از تصویر بالا استفاده و یک فایل به نام block-block-37.php در مسیر زیر میسازیم

/wp-content/themes/shokooh/blocks/ block-block-37.php

البته توجه داشته باشید نام این فایل برای شما متفاوت خواهد بود و هر بلوک نام مخصوص خود را دارد

بعد از ایجاد فایل . باید با کد نویسی فیلد ها آشنا شوید . شما برای استفاده از هر فیلد میتوانید یک کد به شکل زیر بسازید

<?php block_field( 'karmand' ); ?>

کلمه karmand در کد بالا در واقع همان شناسه فیلد شماست . پس حالا یاد گرفته ایم که چطور میتوانید فیلد ها را نشان دهیم . برای همین باید با مخلوط این کد ها با مقداری html آن را به شکل زیر در آوریم

<div class="testimonial-block clearfix">
    <div class="testimonial-image">
        <img src ="<?php block_field( 'tasvir' ); ?>">
    </div>
    <div class="testimonial-box">
        <h4><?php block_field( 'karmand' ); ?></h4>

    </div>
</div>

این کد را درون فایلی که ساختید گذاشته و سپس فایل را ذخیره کنید تا بلوک بصورت کامل ساخته شود

استایل دهی css به بلوک

حالا بلوک شما به درستی ساخته شده است اما ظاهر زیبایی ندارد . به همین دلیل نیاز هتس تا کد های css زیر را به آن اضافه کنید . برای اینکار وارد پوشه قالب خود شده و فایل style.css را باز کنید

.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;
}

بعد از گذاشتن کد ها حتما فایل را ذخیره و از بلوک دلخواه گوتنبرگ خود لذت ببرید