استایل سفارشی بلاک ها در وردپرس – راهنمای کامل برای بازاریابان دیجیتال

در دنیای پوسته سازی و گوتنبرگ، توانایی افزودن استایل های سفارشی به بلاک های وردپرس یکی از کلیدهای اصلی برای ایجاد طرح های منحصربه فرد و متناسب با نیازهای دقیق شماست. اگر تا به حال به این فکر کرده اید که چرا برخی وب سایت ها می توانند ظاهر یکسانی برای یک بلوک داشته باشند، در حالی که شما می خواهید آن را به سلیقهٔ خود تغییر دهید، این مقاله دقیقاً برای شماست.

در این مطلب، به صورت گام به گام و با زبانی ساده و مستقیم، نحوهٔ تعریف، ثبت و استفاده از استایل های سفارشی برای بلاک های گوتنبرگ را بررسی می کنیم. از نوشتن کدهای CSS و PHP مورد نیاز گرفته تا افزودن گزینه های جدید به پنل ویرایشگر، تمام جزئیات فنی به صورت واضح و کاربردی توضیح داده می شود. با دنبال کردن این راهنما، می توانید به سرعت استایل های دلخواه خود را به هر بلاک اضافه کنید و تجربهٔ ویرایش محتوا را برای خود و کاربران تان بهبود ببخشید.

به طور خلاصه، در ادامه خواهید آموخت:

* چه موقعیت هایی برای استفاده از استایل های سفارشی مناسب است.
* چطور یک فایل functions.php یا افزونهٔ سفارشی بسازید.
* نحوهٔ تعریف استایل های جدید با استفاده از register_block_style.
* چگونگی اعمال CSS مخصوص به هر استایل و تست آن در محیط پیش نمایش.

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

فهرست مطالب

• اضافه کردن استایل های سفارشی به بلوک های وردپرس: مفاهیم پایه
• ایجاد فایل CSS مخصوص بلوک ها و ثبت آن در functions.php
• نحوه استفاده از فیلترهای وردپرس برای تعریف استایل های جدید
• بهینه سازی و تست استایل های سفارشی در محیط واقعی

اضافه کردن استایل های سفارشی به بلوک های وردپرس: مفاهیم پایه

در ابتدا باید بدانید که استایل های سفارشی در وردپرس به صورت یک پارچه با سیستم بلوک ها کار می کنند و با استفاده از تابع register_block_style() می توانید یک استایل جدید به هر بلوکی اضافه کنید. این کار را می توانید در فایل functions.php قالب یا در یک پلاگین مخصوص انجام دهید. به عنوان مثال، برای افزودن استایل به بلوک پاراگراف، کافیست یک آرایه شامل نام استایل، برچسب نمایشی و کلاس CSS مربوطه تعریف کنید، سپس این آرایه را به تابع ثبت ارسال کنید. پس از ثبت استایل، کافیست کلاس CSS را در فایل استایل نامه قالب (یا فایل CSS بلاک) تعریف کنید تا ظاهر دلخواه شما در ویرایشگر گوتنبرگ و در سایت نهایی نمایان شود.

• گام 1: باز کردن فایل functions.php یا ایجاد یک پلاگین ساده.
• گام 2: اضافه کردن کد زیر برای ثبت استایل:

function my_custom_block_styles() {
    register_block_style(
        'core/paragraph',
        array(
            'name'  => 'highlight',
            'label' => __( 'هایلایت', 'textdomain' ),
            'style' => 'my-highlight-style',
        )
    );
}
add_action( 'init', 'my_custom_block_styles' );

• گام 3: تعریف کلاس .my-highlight-style در style.css قالب:

.my-highlight-style {
    background-color: #fff9c4;
    padding: 0.5rem;
    border-left: 4px solid #ffd600;
}

پس از این مراحل، استایل «هایلایت» در پنل تنظیمات بلوک پاراگراف ظاهر می شود و می توانید آن را با یک کلیک به محتوای خود اعمال کنید. برای مشاهدهٔ نتایج در ویرایشگر گوتنبرگ، کافیست بلوک مورد نظر را انتخاب کنید و از منوی سمت راست، استایل جدید را فعال کنید. در ادامه، جدول زیر چند مثال رایج از کلاس های CSS سفارشی و توضیح مختصر هرکدام را ارائه می دهد:

ایجاد فایل CSS مخصوص بلوک ها و ثبت آن در functions.php

برای شروع، یک فایل CSS جدید به مسیر wp-content/themes/your-theme/ اضافه کنید؛ به عنوان مثال نامش را custom‑blocks.css بگذارید. داخل این فایل می توانید استایل های خاص برای هر بلوک را با استفاده از کلاس های پیش فرض Gutenberg یا کلاس های سفارشی خود تعریف کنید. به عنوان نمونه، اگر می خواهید تمام بلوک های quote یک حاشیهٔ رنگی داشته باشند، می توانید چنین کدی بنویسید:

.wp-block-quote.custom-border {
    border-left: 4px solid #ff5722;
    padding-left: 1rem;
    background:#fafafa;
}

پس از تکمیل استایل ها، نوبت به ثبت این فایل در functions.php می رسد. کافی است از تابع wp_enqueue_style استفاده کنید و مسیر فایل را به صورت صحیح تعریف کنید. برای جلوگیری از بارگذاری چندباره، بهتر است یک هوک مناسب (مانند enqueue_block_editor_assets) انتخاب کنید تا استایل ها فقط در محیط ویرایشگر بلوک ها فعال شوند.

• گام 1: باز کردن functions.php و افزودن یک تابع سفارشی.
• گام 2: استفاده از wp_enqueue_style( 'custom-blocks', get_template_directory_uri() . '/custom-blocks.css', array(), '1.0' );.
• گام 3: اتصال تابع به هوک enqueue_block_editor_assets یا wp_enqueue_scripts بسته به نیاز.

نحوه استفاده از فیلترهای وردپرس برای تعریف استایل های جدید

برای ایجاد استایل های سفارشی در بلاک های وردپرس، می توانید از فیلتر «register_block_type_args» یا «block_type_metadata» استفاده کنید. ابتدا در فایل functions.php یا یک افزونه سفارشی، یک تابع بازگردانی (Callback) تعریف کنید که آرایهٔ پارامترهای بلاک را دریافت و به آن یک کلید styles جدید اضافه می کند. سپس این تابع را به صورت زیر به فیلتر مربوطه متصل کنید:

• add_filter( 'register_block_type_args', 'my_custom_block_styles', 10, 2 );
• در داخل my_custom_block_styles، بررسی کنید که $block_name با نام بلاکی که می خواهید استایل اضافه کنید مطابقت داشته باشد.
• یک آرایهٔ styles شامل name، label و style (یا inline_style) تعریف کنید.
• آرایهٔ اصلاح شده را برگردانید تا وردپرس آن را ذخیره کند.

در ادامه، برای نمونه گیری سریع، جدول زیر نمونه های رایج فیلترهای استفاده شده و استایل های پیشنهادی را نشان می دهد. به راحتی می توانید مقادیر name و label را به دلخواه خود تغییر داده و استایل های CSS مربوطه را در فایل style.css یا به صورت inline اضافه کنید.

در پایان، امیدواریم که این راهنمای گام به‑گام به شما کمک کرده باشد تا به سادگی استایل های سفارشی برای بلاک های وردپرس خود ایجاد کنید. با پیروی از مراحل ذکر شده – افزودن کدهای CSS به فایل style.css یا استفاده از افزونه های مناسب، ثبت استایل ها در functions.php، و سپس انتخاب آن ها در ویرایشگر بلوک – می توانید ظاهر سایت تان را دقیقاً همان طور که می خواهید تنظیم کنید.

اگر در طول کار با مشکلی مواجه شدید یا سؤال خاصی دارید، خوشحال می شویم که در قسمت نظرات یا از طریق ایمیل با ما در میان بگذارید؛ تیم ما آماده پاسخ گویی و ارائه راهنمایی های بیشتر است.

به یاد داشته باشید که تجربه و آزمون‑و‑خطا، بهترین معلم است؛ پس از خلاقیت خود بهره برداری کنید و استایل های جدید را به پروژه های خود اضافه کنید. موفق باشید و از سفارشی سازی وردپرس لذت ببرید!