وردپرس اخیراً جدیدترین ویرایشگری که همه منتظرش بودیم را معرفی کرده است. این ویرایشگر گوتنبرگ نام دارد و به ویرایشگر بلوکی هم مشهور است. گوتنبرگ پست ورپرسی را به مجموعه ای از بلوک‌ها تقسیم می کند که هر کدام قابلیت ویرایش، حذف و … را دارد.  البته پیش از این، گوتنبرگ به عنوان یک افزونه در دسترس بود ولی در نسخه جدید وردپرس بعنوان ویرایشگر پیش فرض وردپرس ارائه شده است.

در این مقاله می‌خواهیم در مورد متاباکس ها و متافیلدهای وردپرس بحث کنیم. ما بطور خاص نحوه جایگزینی متاباکس های قدیمی PHP و گسترش نوار کناری گوتنبرگ به منظور افزودن مولفه های React که برای دستکاری متادیتاها با استفاده از فروشگاه‌های Redux مانندِ جاوااسکریپت را شرح خواهیم داد. البته قابل توجه است که متادیتاها در گوتنبرگ در قالب بلوک ها نیز قابل دستکاری است. در این مقاله به مدیریت متادیتاها در سایدبار می پردازیم چرا که این روش بیشتر استفاده خواهد شد. با روژان در ادامه همراه شوید.

چگونه به فایل‌های WSL لینوکس در ویندوز 10 دسترسی پیدا کنیم؟

توجه: برای انجام آموزش های این مقاله باید با Redux و ReactJS آشنا باشید.

گوتنبرگ یک اپلیکیشن React است

گوتنبرگ در هسته خود یک اپلیکیشن ReactJS دارد. هر چیزی که در این ویرایشگر رندر می شود یک مولفه ReactJS است. تیتر پست، ناحیه محتوا که بلوک ها را در خود دارد، نوار بالایی و نوار کناری همه مولفه های React هستند داده یا اپلیکیشن این اپلیکیشن React در آبجکت جاوااسکریپت متمرکز یا در “فروشگاه” ذخیره می شود. این فروشگاه از طریق ماژول دیتای وردپرس مدیریت می شود. این فروشگاه بسیاری از اصول اصلی را با Redux به اشتراک می گذارد. برای همین، مفاهیمی چون فروشگاه‌ها، گیرنده‌ها، اقدامات و .. در این ماژول وجود دارد. در این مقاله گاهی به این فروشگاه‌ها به نام فروشگاه‌های Redux-مانند اشاره می کنیم.

این فروشگاه‌ها نه‌تنها دیتاهایی در مورد پست فعلی از جمله محتوای پست (بلوک ها)، تیتر پست و دسته انتخاب شده را ذخیره می‌کند بلکه اطلاعات عمومی سایت ورپرسی مثل همه دسته‌بندها، تگ ها، پست ها، الحاقیه ها و غیره را نیز در خود جا داده است. بعلاوه، وضعیت اطلاعات رابطه کاربری (UI) مانند ” ساید بار بسته یا باز است؟” هم در آن‌ ذخیره می شود. یکی از وظایف “ماژول دیتا” بازیابی و تغییر داده‌ها در این فروشگاه‌هاست. از آنجایی که این فروشگاه‌ها عمومی هستند و می توانند با مولفه های مختلف  React استفاده شوند، تغییر در هرگونه داده در هر فروشگاه روی همه قسمت های رابط کاربری گوتنبرگ (شامل بلوک ها) که این بخشی از این دیتاها را استفاده می کنند، تاثیر خواهد گذاشت.

چگونه از واتس‌اپ وب استفاده کنیم؟ 2 روش

وقتی که یک پست ذخیره می شود، REST API وردپرس با استفاده از داده های ذخیره شده در
این فروشگاه‌ها پست را آپدیت می‌کند. بنابراین تیتر، محتوا، دسته‌بندی و .. که در
این فروشگاه های عمومی ذخیره شده‌اند بعنوان ظرفیت بارگیری به WP REST API که پست را آپدیت می
کند، ارسال می شوند. در نتیجه ما اگر بتوانیم داده‌های این فروشگاه‌ها را دستکاری
کنیم، وقتی کاربر روی کلید SAVE کلیک کند، داده‌هایی که ما دستکاری کرده‌ایم توسط API بدون نیاز به اقدامی از طرف ما در دیتابیس
ذخیره می شود.

یکی از چیزهایی که در این فروشگاه‌های عمومی گوتنبرگ قابل مدیریت
نیست، متادیتاها هستند. پس اگر متافیلدهایی داشته باشید که برای مدیریت با متاباکس
در نسخه کلاسیک قبلی گوتنبرگ استفاده می‌کردید، بطور پیش‌فرض قابل ذخیره و دستکاری
در فروشگاه‌های Redux-مانند نیست. البته ما می توانیم با استفاده از جاوااسکریپت و
فروشگاه های  Redux-مانند متادیتاها را مدیریت کنیم. اگرچه این
متاباکس های قدیمی PHP هنوز در گوتنبرگ ظاهر می شوند، ورپرس توصیه کرده که این متاباکس
های PHP را به
روشی دیگر که از فروشگاه‌های عمومی و مولفه های React استفاده می کنند، انتقال دهیم.

حالا قبل از شروع بیایید نگاهی به فروشگاه های Redux-مانند گوتنبرگ و نحوه استفاده از آن‌ها داشته باشیم.

مشکلات رایج اتصال آیفون به کامپیوتر و برطرف کردن آن ها

بازیابی و تغییر داده‌ها در فروشگاه‌های Redux-مانند Gutenberg

حالا می دانیم که صفحه Gutenberg با استفاده از فروشگاه‌های Redux-مانند مدیریت می شود. ما تعدادی فروشگاه‌ اصلی
پیش‌فرض که توسط وردپرس تعریف شده داریم. بعلاوه ما می توانیم در صورت داشتن برخی
داده‌ها که دوست داریم بین بلوک‌ها و دیگر عناصر رابط کاربری گوتنبرگ مثل سایدبار
به اشتراک گذاشته شود، فروشگاه‌های خودمان را تعریف کنیم. البته در این آموزش به
نحوه استفاده از فروشگاه‌های موجود خواهیم پرداخت. استفاده از فروشگاه‌های موجود،
امکان دستکاری متادیتاها را بدون نیاز به ایجاد فروشگاه سفارشی برای ما فراهم می
کند.

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

JavaScript

wp.data.select('core/editor').getBlocks()

باید
چیزی شبیه تصویر زیر دریافت کنید:

اجازه بدهید جزء به جزء توضیح دهیم. ابتدا به ماژول wp.data که مسئول مدیریت فروشگاه‌های Redux-مانند است،  دسترسی پیدا می کنیم. اگر شما ویرایشگر Gutenberg را روی وردپرس داشته باشید، این ماژول داخل متغیر wp عمومی قرار دارد. سپس داخل این ماژول تابعی را که select نام دارد، فراخوانی می کنیم. این تابع نام فروشگاه را بعنوان یک آرگومان دریافت کرده و تمام سلکتورهای آن فروشگاه را برمی‌گرداند. یک سلکتور شرطی است که ماژول داده استفاده می کند و در واقع به سادگی می توان گفت تابعی است که برخی دیتاها را از فروشگاه می گیرد.

بلاک کردن کامل در اینستاگرام + کامنت های آن کاربر

در این
مثال ، ما به فروشگاه core/editor دسترسی پیدا می کنیم که گروهی از توابعی را که برای گرفتن داده‌ها
از این فروشگاه استفاده می شود را برمی‌گرداند. یکی از این توابع ()getBlocks نام دارد که در بالا
فراخواندیم. این تابع آرایه‌ای از اشیاء که هرکدام نشانگر یک بلوک در پست فعلی
شماست را برمی‌گرداند. پس بسته به اینکه چند بلوک در پست خود دارید این آرایه
متغیر است.

همانطور که گفتیم، به فروشگاهی به نام core/editor دسترسی پیدا کردیم. این فروشگاه حاوی اطلاعاتی در مورد پست فعلی شماست. دیدیم که چطور می توان بلوک های پست فعلی مان را دریافت کنیم اما می توانیم چیزهای دیگری نیز بگیریم. می توانیم تیتر پست، آیدی پست، نوع پست و تقریبا همه چیزهایی که نیاز داریم را دریافت کنیم.

واریاسیون مو چیست و چگونه برای انواع رنگ مو استفاده می شود؟

اما در مثال فوق فقط توانستیم داده‌ها را بازیابی کنیم. حالا اگر بخواهیم آن‌ها را تغییر دهیم باید چکار کرد؟ بیایید نگاهی به دیگر سلکتور در core/editor بیندازیم. این سلکتور را در کنسول مرورگر خود اجر کنید:

javaScript

wp.data.select('core/editor').getEditedPostAttribute('title')

این
دستور باید تیتر پست را بازیابی کند:

عالیه!
حالا اگر بخواهیم تیتر پست را با استفاده از ماژول دیتا تغییر دهیم باید چکار
کنیم؟ در این مرحله به جای() select می توانیم dispatch() را فراخوانی کنیم. این تابع هم نام یک فروشگاه را دریافت کرده و
برخی اقدامات که قابل dispatch هستند را برمی‌گرداند. Dispatch به معنای تغییر داده‌ها
است. در این مثال می خواهیم تیتر پست را در فروشگاه تغییر دهیم پس تابع زیر را
فرامی‌خوانیم:

JavaScript

wp.data.dispatch('core/editor').editPost({title: 'My new title'})

حالا
نگاهی به تیتر پست در ویرایشگر بندازید. بله به همین ترتیب تغییر کرد:

تیم ترجمه روژان