استفاده از Block Bindings API وردپرس برای تقویت بلوک ها

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

با عرضه Block Bindings API وردپرس ۶.۵، این مشکل به پایان رسیده است. توسط آن می توانید یک منبع داده را به مجموعه‌ای از بلوک‌های هسته وردپرس متصل کنید و به سرعت وب‌سایت‌های پویا بسازید. همچنین این API امکانات جدیدی را برای قالب‌های بلوکی به ارمغان آورده است.

در ادامه مقاله به معرفی Block Bindings API وردپرس پرداخته شده و بررسی می گردد که این API در آینده چه امکاناتی خواهد داشت.

تصویر(۱)

چرا Block Bindings API وردپرس یک ابزار تحول‌آفرین است؟

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

برای استفاده از فیلدهای سفارشی، ابتدا باید تابع ()register_meta را راه اندازی کنید یا یک افزونه نصب نمایید تا این فیلدها ثبت و پیکربندی شوند. نمایش داده‌ها روی وب‌سایت نیاز به کدنویسی یا نصب افزونه‌های اضافی داشت. این فرآیند هم برای توسعه‌دهندگان چالش‌برانگیز بود و هم یک بدهی فنی اضافی ایجاد می‌کرد.

با معرفی ویرایشگر و قالب‌های بلوکی، وضعیت بهتر نشد. داده‌های فیلدهای سفارشی نمی‌توانستند در بلوک‌های هسته‌ای نمایش داده شوند و همین محدودیت‌ها دلیل اصلی استفاده برخی توسعه‌دهندگان از ویرایشگر کلاسیک و قالب‌های سنتی باقی ماند.

Block Bindings API وردپرس این مشکل را حل کرده است. حالا شما می‌توانید یک منبع داده را به بلوک‌های خاصی مانند “Button”، “Heading”، “Image” و “Paragraph” متصل کنید و امکانات جدیدی برای سفارشی‌سازی قالب‌های بلوکی و ویرایشگر بلوک فراهم نمایید.

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

فعال کردن فیلدهای سفارشی در ویرایشگر بلوک

ابتدا باید فیلدهای سفارشی را که به صورت پیش‌فرض غیرفعال است، فعال کنید. این کار از طریق تنظیمات ویرایشگر بلوک امکان‌پذیر می باشد. در ادامه مراحل فعالسازی فیلدهای سفارشی توضیح داده شده است:

1. باز کردن ویرایشگر بلوک: ابتدا وارد بخش مدیریت وردپرس شوید و یکی از نوشته‌ها یا برگه‌های موجود را برای ویرایش باز کنید.

2. باز کردن منوی تنظیمات: درون ویرایشگر بلوک، روی آیکون سه نقطه (⋮) که در بالای صفحه قرار دارد کلیک نمایید. این گزینه منوی تنظیمات ویرایشگر را باز می‌کند.

3. دسترسی به بخش “Preferences”: در منوی باز شده، گزینه‌ای به نام “Preferences” (ترجیحات) را انتخاب کنید. این گزینه شما را به صفحه تنظیمات ویرایشگر هدایت می‌کند.

4. فعال کردن فیلدهای سفارشی: در صفحه “Preferences”، گزینه‌ای به نام “Custom Fields” (زمینه‌های دلخواه) وجود دارد. کافی است سوئیچ مربوط به این گزینه را فعال کنید.

5. ذخیره و بارگذاری مجدد صفحه: پس از فعال کردن گزینه “Custom Fields”، دکمه “Show & Reload Page” (نمایش و نوسازی برگه) را انتخاب نموده تا تغییرات اعمال شود و ویرایشگر مجدداً بارگذاری گردد.

6. دسترسی به فیلدهای سفارشی: پس از انجام این مراحل، پنل “Custom Fields” در پایین صفحه ویرایشگر بلوک ظاهر می‌شود. از طریق این پنل می‌توانید فیلدهای سفارشی جدیدی تعریف کرده یا مقادیر فیلدهای موجود را ویرایش کنید.

این مراحل کمک می‌کنند تا به راحتی از فیلدهای سفارشی در ویرایشگر بلوک استفاده نمایید و داده‌های پویا را در محتوای خود به نمایش بگذارید.

ثبت فیلدهای سفارشی

برای ثبت فیلدهای سفارشی، در فایل functions.php قالب، کد زیر را اضافه کنید:

function register_custom_meta_fields_for_pages() {
    // ثبت فیلد نقل‌قول
    register_meta('post', 'famous_quote', array(
        'type' => 'string',
        'single' => true,
        'sanitize_callback' => 'wp_strip_all_tags',
        'show_in_rest' => true,
    ));
    // ثبت فیلد عکس
    register_meta('post', 'photo_url', array(
        'type' => 'string',
        'single' => true,
        'sanitize_callback' => 'esc_url_raw',
        'show_in_rest' => true,
    ));
}
add_action('init', 'register_custom_meta_fields_for_pages');

اضافه کردن مقادیر فیلدهای سفارشی به صفحات

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

1. انتخاب صفحه برای ویرایش: به بخش “برگه ها” در پنل مدیریت وردپرس بروید و صفحه‌ای که می‌خواهید فیلدهای سفارشی به آن اضافه کنید را انتخاب نمایید.

2. پیدا کردن پنل فیلدهای سفارشی: در پایین ویرایشگر بلوک، پنلی با نام “Custom Fields” یا “زمینه‌های دلخواه” وجود دارد. اگر این بخش موجود نیست، اطمینان حاصل کنید که تنظیمات مربوطه در بخش Preferences فعال شده باشد.

3. اضافه کردن فیلد جدید: روی دکمه “افزودن زمینه‌ٔ دل‌خواه” کلیک کنید. این گزینه به شما اجازه می‌دهد یک فیلد جدید تعریف نمایید.

4. تعریف نام فیلد: در کادر سمت راست، نام فیلد مورد نظر خود را وارد کنید. به عنوان مثال، اگر فیلدی برای یک نقل قول دارید، می‌توانید نام آن را “quote_field” بگذارید.

5. وارد کردن مقدار فیلد: در کادر سمت چپ، مقدار مربوط به فیلد سفارشی را وارد کنید. برای مثال، اگر نقل قول شما “آینده به کسانی تعلق دارد که رویاهای خود را باور دارند” است، این متن را در بخش مربوطه وارد کنید.

6. ذخیره تغییرات صفحه: پس از اتمام کار، روی دکمه “بروزرسانی” یا “ذخیره” کلیک کنید تا تغییرات شما در صفحه اعمال شوند.

7. نمایش فیلدها در قالب: برای نمایش مقادیر فیلدهای سفارشی در صفحه، باید از ویرایشگر قالب یا Site Editor استفاده کنید. در این بخش می‌توانید بلوک‌های مربوطه را اضافه کرده و فیلدهای سفارشی را به آنها متصل نمایید.

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

تصویر(۲)

اتصال داده‌های فیلد سفارشی به بلوک‌ها

اتصال داده‌های فیلدهای سفارشی به بلوک‌ها در وردپرس یکی از ویژگی‌های قدرتمند Block Bindings API وردپرس است که امکان نمایش این داده‌ها را به صورت پویا فراهم می‌کند. در ادامه، مراحل کامل این فرآیند توضیح داده شده است:

1. انتخاب قالب مناسب: ابتدا باید مشخص کنید که داده‌های سفارشی شما در کدام بخش از صفحه یا نوشته قرار خواهند گرفت. به عنوان مثال، می‌توانید این داده‌ها را در الگوی صفحات (Page Template) یا بخش خاصی از پست‌ها نمایش دهید.

2. ویرایش قالب در Site Editor: به مسیر “نمایش > ویرایشگر” (Appearance > Editor) بروید و قالب مربوط به صفحه یا نوشته موردنظر خود را انتخاب کنید. برای مثال، اگر قصد نمایش داده‌ها در برگه ها را دارید، قالب Pages را باز نمایید.

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

4. ذخیره تغییرات: پس از انجام تغییرات لازم، تغییرات را ذخیره کرده و از حالت ویرایش خارج شوید.

5. بررسی اتصال بلوک‌ها: با کلیک روی هر بلوک، وردپرس خطوط بنفش رنگی را برای نشان‌دادن اتصال بلوک به منبع داده نمایش می‌دهد. همچنین در پنل سمت راست، جزئیات این اتصال درون بخش Attributes نشان داده می‌شود.

6. مشاهده نتیجه در فرانت‌اند: پس از اتمام مراحل بالا، صفحه یا نوشته خود را بررسی کنید. داده‌های سفارشی باید به صورت پویا در بلوک‌های مربوطه نمایش داده شوند.

با این روش، شما می‌توانید داده‌های ذخیره‌شده در فیلدهای سفارشی را  مستقیما به بلوک‌های مختلف متصل کنید و سایت خود را پویاتر نمایید.

امکانات پیشرفته

Block Bindings API وردپرس قابلیت‌های بیشتری نیز دارد، از جمله:

• افزودن ویژگی ALT به تصاویر: می‌توانید فیلد دیگری برای ALT ثبت کنید.

• استفاده از منابع داده سفارشی: داده‌ها می‌توانند از منابع دیگری مانند API یا جداول دیتابیس سفارشی فراخوانی شوند.

آینده Block Bindings API وردپرس

این API همچنان در حال تکامل است. در نسخه‌های آینده وردپرس، امکانات زیر اضافه خواهند شد:

• رابط کاربری پیش‌فرض جهت اتصال بلوک‌ها.

• برچسب‌های متا برای شناسایی آسان.

• سازگاری با قالب‌های سفارشی post-type.

• دسترسی های پیش‌فرض برای مدیریت اتصال بلوک‌ها.

برای دسترسی زودهنگام به این قابلیت ها، می‌توانید افزونه گوتنبرگ را نصب کنید و ویژگی‌ها را روی یک محیط آزمایشی تست نمایید.

نتیجه‌گیری

Block Bindings API وردپرس تغییر بزرگی در نحوه استفاده از داده‌های سفارشی ایجاد کرده است. این ابزار در بسیاری از موارد نیاز به افزونه‌ها یا کدنویسی‌های پیچیده را حذف کرده و انعطاف‌پذیری بیشتری به قالب‌ها و بلوک‌ها می‌بخشد. افزودن این API به روند کاری شما می‌تواند زمان توسعه را کاهش دهد و عملکرد سایت را بهبود بخشد.