برای تقویت بلوک های خود از WordPress Block Bindings API استفاده کنید
انتشار: آذر 27، 1403
بروزرسانی:
31 خرداد 1404
برای تقویت بلوک های خود از WordPress Block Bindings API استفاده کنید
نمایش داده های سفارشی در ویرایشگر بلاک وردپرس همیشه فرآیند آسانی نبوده است. نیاز به ساخت یک بلوک سفارشی برای واکشی داده ها از فیلدهای سفارشی یا منابع دیگر داشت.
این کار بسیار زیادی است و اغلب خارج از دسترس برخی از توسعه دهندگان است. در برخی موارد به معنای ایجاد قابلیت تکراری نیز می باشد. به عنوان مثال، نمایش داده های فیلد سفارشی در عنوان متن را در نظر بگیرید. آیا این نباید بدون ساخت یک بلوک کاملا جدید امکان پذیر باشد؟
در نهایت، این امکان پذیر است. ورود Block Bindings API در وردپرس 6.5 یک راه حل بومی ارائه می دهد. این به شما امکان می دهد یک منبع داده را به مجموعه ای از بلوک های اصلی وردپرس متصل کنید و به شما امکان می دهد وب سایت های وردپرس پویا را در زمان کمتری بسازید. همچنین سطح جدیدی از عملکرد را برای مسدود کردن تم ها به ارمغان می آورد.
این مقاله شما را با Block Bindings API آشنا می کند، به شما نشان می دهد که چگونه با یک نسخه نمایشی ساده کار می کند و به بررسی آینده ای که با تکامل API در انتظار شما خواهد بود، می پردازد.
چرا Block Bindings API یک ابزار تغییر دهنده بازی است
فیلدهای سفارشی سالهاست که بخشی از هسته وردپرس هستند. آنها داده های پویا را به پست های ثابت می آورند و گزینه های سفارشی سازی بیشتری را به توسعه دهندگان می دهند. با این حال، فرآیند استفاده از آنها دست و پا گیر است.
باید از register_meta() برای ثبت و پیکربندی فیلدهای جدید، افزونه ای را نصب یا اجرا کنید. این فقط اولین قدم است. نمایش این داده ها در سایت شما چالش دیگری است.
تمام داده های فیلد سفارشی برای یک پست به عنوان متای پست ذخیره می شود. با این حال، هیچ راه مستقیمی برای نمایش نتایج وجود نداشت. برای انجام این کار نیاز به یک افزونه و/یا افزودن کد به موضوع شما بود. این نه تنها برای توسعه دهندگان دشوارتر است، بلکه بخش دیگری از بدهی فنی برای مدیریت است.
معرفی Block Editor و تم های بلوک کمکی به این موضوع نکرد. داده های فیلد سفارشی را نمی توان در هیچ یک از بلوک های اصلی موجود در وردپرس نمایش داد، و همان محدودیت ها برای مضامین مسدود کردن اعمال می شود. این ممکن است دلیل بزرگی باشد که چرا برخی از توسعه دهندگان به ویرایشگر کلاسیک و/یا تم های کلاسیک پایبند هستند.
Block Bindings API این قابلیت را به وردپرس می آورد. در نهایت، شما نیازی به پلاگینی ندارید که به شما در نمایش داده ها کمک کند. این یک منبع داده را به بلوک های خاصی مانند دکمه، عنوان، تصویر و پاراگراف متصل می کند - دنیای جدیدی از گزینه های سفارشی سازی را برای مضامین بلوک و ویرایشگر بلوک باز می کند.
قابلیت های نوشتن PHP یا استفاده از افزونه فیلد سفارشی را به طور کامل تکرار نمی کند. با این حال، این یک گام در مسیر درست است. و ممکن است در برخی سناریوها تمام چیزی باشد که به آن نیاز دارید.
یک مورد استفاده ساده برای Block Bindings API
Block Bindings API در دنیای واقعی چگونه کار می کند؟ ما یک مثال ساده از اینکه چگونه می تواند مفید باشد را گرد هم آورده ایم.
قبل از اینکه به بررسی بپردازیم، در اینجا یک طرح کلی از پروژه ما آمده است:
آخرین نسخه وردپرس را نصب کنید و از تم پیش فرض بیست و بیست و چهار استفاده کنید.
ثبت چند فیلد سفارشی:
نقل قول: نقل قول معروفی که می خواهیم در هر صفحه برجسته کنیم، به یک بلوک پاراگراف محدود شده است.
عکس: نشانی اینترنتی یک عکس متفاوت برای هر صفحه که به یک بلوک تصویر متصل شده است.
در نهایت، قالب صفحه تم را ویرایش کنید و بلوک هایی را اضافه کنید که این مقادیر فیلد سفارشی را دریافت کنند.
اکنون که برنامه خود را داریم، بیایید API Block Bindings وردپرس را وارد عمل کنیم.
فیلدهای سفارشی را در Block Editor فعال کنید
وردپرس فیلدهای سفارشی را به صورت پیش فرض پنهان می کند، بنابراین اولین قدم این است که آنها را در ویرایشگر بلاک فعال کنید.
برای فعال کردن فیلدهای سفارشی، آن را باز کنید گزینه ها منو (نماد ⋮) در ویرایشگر Block. سپس بر روی آن کلیک کنید ترجیحات.
بعد، روی زمینه های سفارشی تغییر دهید تا آنها را در ویرایشگر نمایش دهید. را کلیک کنید نمایش و بارگذاری مجدد صفحه را فشار دهید تا تغییرات خود را ذخیره کنید.
فعال کردن فیلدهای سفارشی در Block Editor
فیلدهای سفارشی را ثبت کنید
برای ثبت فیلدهای سفارشی ما، موضوع را باز کنید functions.php فایل سپس کد زیر را اضافه کنید:
// Register custom fields for pages in WordPress using register_meta()function kinsta_register_custom_meta_fields_for_pages() { // Register the text field "kinsta_famous_quote" for pages register_meta(\'post\', \'kinsta_famous_quote\', array(\'type\' => \'string\', // Text field\'single\' => true, // Single value for the field\'sanitize_callback\' => \'wp_strip_all_tags\', // Sanitize the input\'show_in_rest\' => true, // Expose this field in the REST API for Gutenberg )); // Register the image field "kinsta_photo" for pages register_meta(\'post\', \'kinsta_photo\', array(\'type\' => \'string\', // Can store the URL or attachment ID as a string\'single\' => true, // Single value for the field\'sanitize_callback\' => \'esc_url_raw\', // Sanitize the input as a URL\'show_in_rest\' => true, // Expose this field in the REST API for Gutenberg ));}add_action(\'init\', \'kinsta_register_custom_meta_fields_for_pages\');
به اسلاگ برای هر فیلد توجه کنید، زیرا در مرحله بعد به آنها نیاز خواهیم داشت:
kinsta_famous_quote
kinsta_photo
با دنبال کردن وردپرس می توانید این فیلدها را بیشتر سفارشی کنید register_meta() مستندات
همچنین باید توجه داشته باشیم که می توانید این فیلدها را از طریق یک افزونه سفارشی ثبت کنید. مزیت این است که فیلدها به کار خود ادامه می دهند - حتی اگر تم ها را تغییر دهید.
مقادیر فیلد سفارشی را به یک صفحه اضافه کنید
سپس، با دنبال کردن این مراحل، مقادیر فیلد سفارشی را به یک صفحه اضافه کنید:
حرکت به صفحات > همه صفحات و صفحه مورد نظر خود را انتخاب کنید.
به پایین صفحه بروید و آن را پیدا کنید فیلدهای سفارشی پانل. را کلیک کنید جدید را وارد کنید دکمه واقع در زیر فیلد اول. اضافه کنید kinsta_famous_quote در ستون سمت چپ سپس، مطالب نقل قول ما را به سمت راست اضافه کنید: آینده متعلق به کسانی است که به زیبایی رویاهای خود ایمان دارند. - النور روزولت
بعد، روی افزودن فیلد سفارشی دکمه اضافه کردن kinsta_photo زمینه URL تصویری را که می خواهیم از آن استفاده کنیم به سمت راست اضافه کنید.
افزودن فیلدهای سفارشی به ویرایشگر بلاک وردپرس
اکنون می توانیم صفحه را ذخیره کرده و این روند را برای سایر صفحات سایت خود تکرار کنیم.
داده های فیلد سفارشی را به بلوک ها متصل کنید
ما می خواهیم داده هایمان را در صفحات نمایش دهیم، بنابراین باید قالب صفحه تم خود را در ویرایشگر سایت ویرایش کنیم. برای انجام این کار:
حرکت به ظاهر > ویرایشگر، سپس بر روی آن کلیک کنید قالب ها پیوند در ستون سمت چپ را پیدا کنید صفحات قالب و کلیک کنید تا در ویرایشگر باز شود.
قالب صفحات را در ویرایشگر سایت وردپرس بیابید
ابتدا باید مکانی را برای نمایش داده های فیلد سفارشی خود انتخاب کنیم. بیایید یک ناحیه به پایین هر صفحه اضافه کنیم.
یک را اضافه می کنیم گروه a را مسدود و درج کنید ستون ها بلوک داخل آن ستون سمت چپ شامل یک تصویر بلوک (برای نمایش عکس ما)، در حالی که ویژگی های سمت راست a پاراگراف مسدود کردن (برای نمایش نقل قول ما).
نام بلوک گروه خود را به تغییر نام دادیم داده های فیلد سفارشی برای مرجع آینده اگر بخواهیم بعداً دوباره ویرایش کنیم، پیدا کردن آن آسان تر می شود.
افزودن بلوک هایی که داده های فیلد سفارشی ما را نمایش می دهند
Block Bindings API هنوز یک رابط بصری برای نمایش مقادیر ندارد (در ادامه در مورد آن بیشتر توضیح خواهیم داد). بنابراین، ما باید کد بلوک های Image و Paragraph خود را ویرایش کنیم. این به ما امکان می دهد داده های سفارشی را به آنها متصل کنیم.
بر روی کلیک کنید گزینه ها منو (نماد ⋮) در سمت راست بالای ویرایشگر سایت. را انتخاب کنید ویرایشگر کد پیوند. با این کار ویرایشگر کد باز می شود.
به دنبال گروه بلوکی که ما به تازگی اضافه کرده ایم. کد با این شروع می شود:
ما همچنین کد مناسب را در تصویر زیر هایلایت کرده ایم:
مشاهده بلوک گروه ما در ویرایشگر کد
سپس بلوک های Image و Paragraph را در این گروه بیابید. کد پیش فرض آنها به شکل زیر است:
تصویر:
پاراگراف:
ما می توانیم این بلوک ها را ویرایش کنیم تا آنها را به فیلدهای سفارشی خود متصل کنیم:
تصویر:
توجه داشته باشید key ارزش به ما تنظیم شده است kinsta_photo فیلد سفارشی
پاراگراف:
در این مورد، key ارزش به ما تنظیم شده است kinsta_famous_quote فیلد سفارشی
تغییرات را ذخیره کرده و از ویرایشگر کد خارج شوید.
روی بلوک های Image و Paragraph کلیک کنید. وردپرس هر بلوک را به رنگ بنفش ترسیم می کند تا نشان دهد که به یک منبع داده متصل است. علاوه بر این، پانل سمت راست یک ناحیه Attributes را با جزئیات بیشتر نمایش می دهد.
وردپرس نشان می دهد که بلوک Image به یک منبع داده متصل استبلوک پاراگراف ما نیز به یک منبع داده متصل است
توجه: هنگام ویرایش صفحات، این بلوک ها را نخواهید دید. با این حال، آنها در قسمت جلویی وب سایت شما نمایش داده می شوند.
مرحله آخر بازدید از قسمت جلویی وب سایت است. ما باید تصویر و نقل قول خود را در هر صفحه ای که دارای مقادیر فیلد سفارشی است، ببینیم.
داده های فیلد سفارشی ما در پایین صفحه نمایش داده می شود
سایر امکانات برای اتصال بلوک ها
ما یک مثال اساسی از اتصال بلوک ها به منبع داده ایجاد کردیم. با این حال، راه های دیگری وجود دارد که می توانیم پروژه خود را ارتقا دهیم، از جمله:
افزودن ویژگی های ALT: می توانیم فیلد سفارشی دیگری را ثبت کنیم که ویژگی های ALT را روی عکس های ما تعریف می کند. که این ویژگی را در دسترس تر می کند. به عنوان مثال، ما می توانیم یک فیلد جدید را پیوند دهیم، kinsta_photo_alt، به alt ویژگی مانند این:
از یک منبع داده سفارشی استفاده کنید: زمینه های سفارشی به خوبی برای اهداف ما کار می کنند. با این حال، می توانستیم داده ها را از یک منبع سفارشی واکشی کنیم. امکانات عبارتند از API ها، جداول پایگاه داده سفارشی، گزینه های پلاگین/موضوع، داده های سایت و طبقه بندی.
ایده این است که به این فکر کنید که چگونه می خواهید داده های سفارشی را در سایت خود قرار دهید. از آنجا، شما برنامه ای برای اجرای آن به روشی ایجاد می کنید که نگهداری آن آسان باشد. Block Bindings API گزینه های زیادی را برای انجام این کار فراهم می کند.
با Block Bindings API بیشتر بروید
Block Bindings API یک محصول نهایی نیست. با هر نسخه جدید وردپرس به تکامل خود ادامه می دهد.
به عنوان مثال، چندین بهبود برای گنجاندن با WordPress 6.7 برنامه ریزی شده است:
یک رابط کاربری پیش فرض برای اتصال بلوک ها به منابع داده موجود.
برچسب های متا را برای شناسایی آسان تر ارسال کنید.
سازگاری با قالب های تم سفارشی پس از تایپ.
مجوزهای پیش فرض برای تعیین اینکه چه کسی می تواند پیوندهای بلوک را ویرایش کند.
چندین پیشرفت فنی در زیر هود.
به دنبال ویژگی های جدیدی باشید که استفاده از API را آسان تر و قدرتمندتر می کنند.
همچنین می توانید افزونه گوتنبرگ را نصب کنید تا به ویژگی ها قبل از ادغام در هسته وردپرس دسترسی اولیه داشته باشید. توصیه می کنیم از آن در محیط صحنه یا محلی استفاده کنید.
همه مشتریان Kinsta به یک محیط مرحله بندی برای آزمایش دسترسی دارند و همچنین می توانند ویژگی های برتر را به ترکیب اضافه کنند.
و همه می توانند از مجموعه رایگان توسعه وردپرس محلی DevKinsta ما استفاده کنند. سایت های جدید را با یک کلیک بچرخانید و از دستگاه محلی خود توسعه دهید.
خلاصه
Block Bindings API نشان دهنده تغییری در نحوه کار با داده های سفارشی در وردپرس است. در بسیاری از موارد نیاز به پلاگین یا بلوک های سفارشی را جایگزین می کند. و انعطاف پذیری بیشتری را برای بلوک های وردپرس و تم های بلوک به ارمغان می آورد.
افزودن آن به گردش کار می تواند زمان توسعه شما را کاهش دهد. به عنوان یک ویژگی بومی، همچنین می تواند عملکرد را در مقایسه با تکیه بر افزونه ها بهبود بخشد.
اینها دلایل بزرگی برای شروع استفاده از آن امروز هستند. و آینده حتی روشن تر به نظر می رسد!
ما فقط شروع به بررسی احتمالات مطرح شده در این مقاله کرده ایم. با کاوش بیشتر در مورد اتصال فیلدهای سفارشی، کار با منابع اتصال سفارشی، و یادگیری نحوه دریافت و تنظیم مقادیر Block Binding در ویرایشگر، عمیق تر به API Block Bindings بروید.
اریک کارکواک
Eric Karkovack یک توسعه دهنده وب و نویسنده مستقل با بیش از 25 سال تجربه است. او دوست دارد به دیگران کمک کند تا در مورد وردپرس، فریلنسینگ و فناوری یاد بگیرند.
