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

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

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

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

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

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

دیدگاه ها

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

محمد بنادری
۲۴ اردیبهشت ۱۳۹۸ آموزش رایگان وردپرس
مشاوره رایگان

مطالب مرتبط

بهترین افزونه های همکاری در فروش وردپرس
۲۴ مرداد ۱۳۹۸ محمد بنادری
۱۳ مرداد ۱۳۹۸ محمد بنادری
آموزش طراحی سایت خبری بدون کد نویسی
۰۶ مرداد ۱۳۹۸ محمد بنادری
بالا بردن امنیت وردپرس
۱۰ تیر ۱۳۹۸ محمد بنادری

آخرین محصولات

آموزش تصویری edd | ساخت سایت فروش فایل با edd
محمد بنادری
28 هزار تومان
قالب مجله خبری پاییز | قالب paiiz
محمد بنادری
20 هزار تومان
قالب فروش آموزش یادگیری - قالب مشابه همیار آکادمی - قالب ووکامرس
محمد بنادری
90 هزار تومان
قالب نیازمندی کرنا مشابه دیوار
محمد بنادری
60 هزار تومان
تمامی حقوق برای حل شو محفوظ است