آموزش پیشرفته استایل‌ بلوک وردپرس؛ جاوااسکریپت و وردپرس استودیو (بخش اول)

چرا باید از Block Style Variations استایل‌ استفاده کنیم؟

قابلیت تغییر استایل بلوک‌ها (Block Styles) به توسعه‌دهندگان اجازه می‌دهد تا گزینه‌های طراحی پیش‌فرض و آماده‌سازی را در اختیار تولیدکنندگان قرار دهند. این کار نه تنها برند را تضمین می‌کند، بلکه سرعت تولید محتوا نیز به شدت افزایش می‌یابد. از استایل‌ های آماده، نیاز به ساخت بلوک‌های سفارشی (بلاک‌های سفارشی) برای حمل و نگهداری کدها را آسان‌تر می‌کند.

بنابراین، چه در حال حاضر یک پوسته باشد و چه یک افزونه، روش‌های مختلف افزودنی به بلوک‌ها را توسعه دهد. برای تست و اجرای کدهای این آموزش، پیشنهاد می‌کنیم از وردپرس استودیو (WordPress Studio) استفاده کنید. ابزارهای رایگان و متن‌باز که محیط زیست محلی بی‌نظیری را برای ویندوز و مک فراهم می‌کند.

استایل سفارشی بلوک چیست؟

استایل‌های سفارشی به شما اجازه می‌دهند درمان‌های بصری متفاوتی را برای بلوک‌های موجود تعریف کنید. مثلاً افزودن حاشیه، تغییر پس‌زمینه یا اصلاح تایپوگرافی. وقتی بلوکی انتخاب می‌شود، این استایل‌ها در پنل Styles در نوار کناری ویرایشگر ظاهر می‌شوند.

در واقع، شما می توانید به تعداد دلخواه استایل بسازید. برای مثال، بلوک تصویر می‌تواند استایل‌های «پیش‌فرض»، «گردیده»، «حاشیه بنفش» و «حاشیه قرمز» داشته باشد. این قابلیت پذیری در طراحی، درست مانند پردازش درهوش مصنوعی گوگل جمنای ۳ فلش، تجربه کاربری را بهبود می بخشد.

روش اول: افزودن استایل بلوک از طریق فایل JSON (سبک های پوشه)

مناسب برای: توسعه دهندگان پوسته (Theme) نسخه مورد نیاز: وردپرس ۶.۶ یا بالاتر با theme.jsonنسخه ۳

این روش ساده‌ترین راه برای توسعه دهندگان پوسته است. کافی است یک فایل جدید در پوشه /stylesقالب خود ایجاد کنید. با ارتقای نسخه theme.jsonبه ۳، متادیتای استایل‌ به صورت خودکار ثبت می‌شود.

به عنوان مثال، برای ایجاد یک حاشیه آبی، فایلی با نام image-blue-border.jsonمی‌سازیم:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": ۳,
    "title": "Blue Border",
    "slug": "blue-border",
    "blockTypes": [ "core/image" ],
    "styles": {
            "border": {
                    "color": "#۰۰f9ff",
                    "style": "solid",
                    "width": "۴px",
                    "radius": "۱۵px"
                },
            "shadow": "var(--wp--preset--shadow--natural)"
        }
}

استفاده از تغییرات presetباعث می شود طراحی شما با تغییرات استایل سراسری (Global Styles) هماهنگ باشد. این یکپارچگی سیستمی، ترکیبی هماهنگ درتراشه ۲ نانومتری آکسینوس ۲۶۰۰ سامسونگاست.

روش دوم: ثبت استایل در PHP و استایل دهی در theme.json

این روش برای افراد مناسب است که می‌خواهند از طریق فایل‌هایی که وجود داشته باشند، روی آنها بیشتر functions.phpباشد.

مرحله ۱: ثبت استایل در PHP

ابتدا با استفاده از تابع register_block_style()استایل را معرفی می کنیم:

function my_style_red(){
   register_block_style(
       'core/image',
       array(
           'name'  => 'red-border',
           'label' => __( 'Red Border', 'my-theme' )
       )
   );
}
add_action( 'init', 'my_style_red' );

مرحله ۲: افزودن استایل‌ به theme.json

سپس کدهای CSS مربوطه را در بخش variationsفایل theme.jsonقرار می‌دهیم. این جداسازی منطق از طراحی، به پایداری سایت کمک می‌کند استایل‌؛ موضوعی که درکالبدشکافی محصولات جدید تکنولوژیهمیشه مورد توجه قرار می‌گیرند. (لینک داخلی:نتایج نظرسنجی بهترین رابط برای مدیریت بلوک‌ها)

روش سوم: استفاده مستقیم از تابع register_block_style() در PHP

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

۳-الف: استفاده از خط مشی_داده

این پروژه که در وردپرس ۶.۶ اضافه شد، به شما اجازه می‌دهد یک آرایه ساختار مشابه JSON را مستقیماً در PHP تعریف کنید. مزیت بزرگ این روش این است که کاربر می‌تواند این استایل‌ها را از طریق بخش Global Styles در ویرایشگر سایت تغییر می‌دهد.

'style_data' => array(
    'border' => array(
        'color' => '#f5bc42',
        'style' => 'solid',
        'width' => '۴px',
        'radius' => '۱۵px'
    )
)