×
خانه » آموزش رایگان وردپرس » ساخت بلوک دلخواه در گوتنبرگ وردپرس
دیدگاه ها

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

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

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

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

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

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

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

 

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

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

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

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

حالا که فیلد ها ساخته و بلوک نیز ساخته شده است نوبت ان است که فایل اختصاصی بلوک دلخواه گوتنبرگ را نیز بسازید . برا اینکار از تصویر بالا استفاده و یک فایل به نام 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;
}

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

دوره آموزشی رایگان کار کردن با وردپرس

از ۰ تا ۱۰۰ وردپرس را بصورت کاملا رایگان یاد بگیرید

مشاهده این دوره

دیدگاه ها

نشانی ایمیل شما منتشر نخواهد شد.

محمد بنادری
۲۴ اردیبهشت ۱۳۹۸ آموزش رایگان وردپرس
مشاوره رایگان
مطالب مرتبط
بهترین قالب آموزش آنلاین سال 98
۲۰ خرداد ۱۳۹۹ محمد بنادری
چگونه بهترین قالب وردپرس را پیدا کنیم؟
۲۸ فروردین ۱۳۹۹ محمد بنادری
آموزش تصویری تغییر نسخه php هاست
۲۲ فروردین ۱۳۹۹ محمد بنادری
آخرین محصولات
قالب ایران کالا فرنام - قالب فروشگاهی ووکامرس
محمد بنادری
189 هزار تومان
قالب فروش فایل ونداد
محمد بنادری
۸۹ هزار تومان
محمد بنادری
1۸۹ هزار تومان
قالب فروشگاهی کاج
محمد بنادری
۶۰ هزار تومان
تمامی حقوق برای حل شو محفوظ است
  • حل شو