آموزش ساخت بلاک سفارشی گوتنبرگ

با سلام خدمت شما کاربران گرامی . امروز آموزش ساخت بلاک سفارشی گوتنبرگ را برای شما آماده کردیم . آموزشی که احتمالا بسیار کاربردی برای شما باشد و بتوانید با آن بلاک های سفارشی بسازید . گوتنبرگ را که خیلی درباره اش صحبت کرده ایم احتمالا میشناسید ! ویرایشگر جدید وردپرس که جایگزین ویرایشگر کلاسیک در نسخه 5 وردپرس به بعد شده است . یکی از ویژگی های این ویرایشگر Block Base بودن آن است و هر بخش نوشته شما به عنوان یک بلاک شناخته میشود . اگر شما هم میخواهید یک بلاک سفارشی در این ویرایشگر پر سر و صدا بسازید پیشنهاد میکنیم تا انتها با ما همراه باشید .

آموزش ساخت بلاک سفارشی گوتنبرگ

قبل از همه چیز باید بگوییم که برای انجام این آموزش شما نیاز دارید تا آشنایی اولیه با Html , css داشته باشید ، زیرا برای به اتمام رساندن آموزش و ساخت یک بلاک سفارشی موفق نیازمند نوشتن کمی کد Html و CSS خواهید داشت .

در ابتدای کار باید افزونه  Block Lab را از مخزن افزونه های وردپرس دانلود و نصب کنید . افزونه بالای 1000 نصب فعال در وردپرس داشته و نمره آن 5 از 5 بر اساس امتیاز داده شده توسط کاربران میباشد . افزونه به شما این امکان را میدهد تا از طریق پنل مدیریت وردپرس خود بدون دردسر زیاد بتوانید یک بلاک سفارشی ایجاد کنید .

گام بعدی ایجاد یک بلاک است . ما میخواهیم یک بلاک سفارشی به نام testimonials ایجاد کنیم . برای این کار پس از نصب افزونه از منو Block Lab گزینه Add New را انتخاب میکنیم . همانگونه که در تصویر زیر مشخص است در کادر متنی که Enter block name here میباشد ، باید نام بلاک خود را بنویسیم .

در کنار همین کادر شما میتوانید تنظیمات اضافی تری برای بلاک خود انجام دهید . مثلا آیکونی برای آن انتخاب کنید . یا اینکه دسته بندی بلاک را انتخاب کنید . پس از اینکه ما تنظیمات و خصوصیات بلاک سفارشی خود را انجام دادیم میتوانیم اقدام به افزودن فیلد کنیم . افزودن فیلد نیز با استفاده از دکمه + Add Field امکان پذیر میباشد .

خب ما تصمیم داریم تا 3 فیلد را اضافه کنیم . اولین فیلد تصویر کسی است که نظردهنده میباشد . فیلد دوم برای تنظیم نام شخص نظردهنده و فیلد سوم برای متن نظری است که ثبت شده است . اقدام به افزودن اولین فیلد خود میکنیم :

همان گونه که در تصویر مشخص است چند گزینه وجود دارد که ما باید آنها را تنظیم ، انتخاب و یا وارد کنیم . در اینجا به توضیح درباره این گزینه ها خواهیم پرداخت :

• Field Label : برچسب فیلد شما است که به کاربر نمایش داده خواهد شد و البته برای کسی که قرار است از این بلاک استفاده کند کاربرد دارد .
• Field Name : این فیلد بر اساس برچسب وارد شده توسط شما به صورت خودکار ایجاد خواهد شد . ما با این فیلد در مرحله بعدی کار داریم ، پس مطمئن شوید که این فیلد یکتا خواهد بود .
• Field Type: نوع فیلد مد نظر ما میباشد که میتواند تصویر ، متنی ، لینک و … باشد .
• Field Location: شما میتوانید تنظیم کنید که میخواهید این فیلد در ویرایشگر باشد یا بخش دیگری از تنظیمات
• Help Text:متن راهنمایی که قرار است شخص وارد کننده اطلاعات آن را مشاهده کند . این فیلد اختیاری است و صرفا جهت راهنمایی برای خودتان میباشد .

همچنین شما میتوانید یکسری آپشن های اضافه تری برای فیلدهای خود در نظر بگیرید . ولی به صورت کلی وضعیت کار به همین صورت بود که خدمت شما عرض کردیم . خب ما در اینجا سه فیلد مورد نظر خود را اضافه کردیم . البته در تصویر زیر نیز این فیلد ها مشخص هستند . حال باید به سراغ مرحله بعد برویم .

پس از اینکه کار ویرایش و افزودن فیلدها به بلاک به اتمام رسید با کلیک بر روی گزینه Publish اقدام به ایجاد بلاک میکنیم . حال باید یک قالب مخصوص به بلاک سفارشی خودمان بدهیم . برای انجام این کار یک فایل به نام block-testimonials.php ایجاد میکنیم و آن را در پوشه blocks در زیرمجموعه قالب خود قرار میدهیم . این کار به دلیل این است که اگر فایل ایجاد نشود عملا بلاک قابل استفاده نخواهد بود . توجه کنید که شما در نام فایل بالا به جای testimonials باید از نام بلاک خود استفاده کنید .

فایل قالب بلاک به افزونه میگوید که چگونه فیلدها را درون ویرایشگر نمایش دهد . افزونه به دنبال فایل قالب بلاک میگردد و سپس از آن استفاده میکند و آن را درون ویرایشگر شما نمایش خواهد داد . اگر این فایل وجود نداشته باشد خطایی مشابه متن Template file blocks/block-testimonials.php not found به شما نمایش خواهد داد . خب به سراغ ایجاد فایل میرویم . هر زمان که فیلد جدیدی به بلاک خود اضافه میکنید باید کد زیر را به فایل قالب خود اضافه کنید .

<?php block_field( 'add-your-field-name-here' ); ?>

نام فیلد باید به جای add-your-field-name-here قرار داده شود . برای مثال ما برای سه قیلد ایجاد شده در بلاک خود کد زیر را درون فایل قالب بلاک قرار میدهیم :

<?php block_field( 'reviewer-image' ); ?>
<?php block_field( 'reviewer-name' ); ?>
<?php block_field( 'testimonial-text' ); ?>

حال زمان قرار دادن چند تگ اچ تی ام ال برای استایل دهی به نمایش فیلدها در سایت میباشد ، به عنوان مثال وردپرس لینک تصویر را نمایش میدهد ولی احتمالا شما میخواهید تصویر را نشان دهید ، مگه نه ؟! :

<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>

در نهایت فایل رو با نامی که در ابتدا گفتیم ذخیره میکنیم . پس از آن لازم است که چند کلاس سی اس اس برای فیلدهای اضافه شده قرار دهیم .

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

توجه کنید که این کدها نمونه است و شما میتوانید کدهای مورد نظر خود مطابق با قالب خود را ایجاد کرده و در فایل css قالب خود قرار دهید . پس از اضافه کردن آن ، فایل را با نام block-testimonials.css (البته همانطور که گفته شد در صورتی که نام بلاکتان چیز دیگری است باید نام فایل را تغییر دهید)  ذخیره و درون پوشه blocks در مسیر قالب اصلی سایتتان قرار دهید .

پس از انجام تغییرات مورد نظر شما میتوانید به صفحه افزودن نوشته یا برگه خود رفته و بلاک جدیدی ایجاد کنید .

با وارد کردن اطلاعات و ذخیره نوشته خود و انتشار آن ، میتوانید نتیجه را در وبسایت خود مشاهده کنید . امیدوارم که از این آموزش استفاده کافی برده باشید . خوشحال میشویم نظرات خود را با ما در میان بگذارید .