پالت فرمان وردپرس را سفارشی کنید

۶ بهمن ۱۴۰۳
دسته بندی ها: وردپرس

پالت فرمان وردپرس در نسخه 6.3 منتشر شد، ویژگی که دسترسی سریع به اقداماتی که اغلب توسط افرادی که محتوا یا پوسته‌ها را در پیشخوان وردپرس ویرایش می‌کنند، ارائه می‌دهد. پالت فرمان مانند منو به کاربران اجازه می‌دهد تا وظایف موجود را با استفاده از یک رابط جستجوی ساده فیلتر نموده و گزینه‌هایی را برای کمک به پیمایش در رابط کاربری ویرایشگر، تغییر تنظیمات، تغییر استایل‌ها، دستکاری بلوک‌ها و حتی ایجاد نوشته‌ها و برگه‌های جدید انتخاب کنند.

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

توسعه‌دهنده افزونه‌ای که از شورت‌کدهای بسیاری استفاده می‌کند، ممکن است یک ورودی در پالت فرمان را به یک cheat sheet پاپ‌آپ لینک نموده تا به کاربران یادآوری کند که چگونه از آن کدها استفاده کنند.

اصول اولیه پالت فرمان وردپرس

با استفاده از میانبر صفحه کلید Ctl + k (ویندوز و لینوکس) و Cmd + k (مک) یا کلیک کردن بر روی فیلد عنوان در بالای ویرایشگر نوشته یا ویرایشگر سایت، پالت فرمان را راه اندازی کنید.

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

یک لیست جزئی از دستورات موجود خارج از جعبه در پالت شامل موارد زیر است:

ویرایش تمپلیت (هنگام ویرایش یک برگه)
بازگشت به برگه (پس از ویرایش قالب آن)
بازنشانی (ریست) تمپلیت
بازنشانی template part
استایل‌ها را به حالت پیشفرض بازنشانی کنید
حذف template
حذف template part
تنظیمات سایدبار را تغییر دهید
بازرس بلوک را تغییر دهید
تغییر حالت نورافکن
بدون حواس پرتی را تغییر دهید
نوار ابزار بالا را تغییر دهید
ویرایشگر کد را باز کنید
از ویرایشگر کد خارج شوید
نمای فهرست را تغییر دهید
حالت تمام صفحه را تغییر دهید
تنظیمات برگزیده ویرایشگر
میانبرهای صفحه کلید
نمایش/پنهان کردن خرده نان های بلوک
CSS را سفارشی کنید
اصلاحات سبک
سبک‌های باز
بازنشانی سبک ها
مشاهده سایت
مشاهده قالب ها
مشاهده قطعات قالب
منوهای پیمایش را باز کنید
تغییر نام الگو
الگوی تکراری
تمام الگوهای سفارشی را مدیریت کنید

و البته، توسعه دهندگان می توانند برنامه‌های خود را برای بهبود برنامه‌های وردپرس اضافه کنند.

آنچه برای شروع به آن نیاز دارید

Command Palette API توسط بسته‌های جاوا اسکریپت پشتیبانی می‌شود که با استفاده از npm، Node Package Manager، به پروژه های خود اضافه می‌کنید. شما نیاز به نصب وردپرس دارید که بتوانید از طریق ترمینال به آن دسترسی داشته و دستورات را در خط فرمان اجرا کنید.

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

افزونه ما هیچ کمک منحصر به فردی از پالت فرمان وردپرس ندارد. برای مثال، عملکرد پیش‌فرض Command Palette میانبرهایی برای افزودن نوشته و برگه‌های جدید وردپرس فراهم می‌کند:

با این حال، پالت فرمان چیزی در مورد ایجاد صفحات محصول ما نمی‌داند. ما این قابلیت را در زیر اضافه می کنیم.

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

در حال حاضر، کل افزونه Product Pages از یک فایل PHP تشکیل شده است که نام آن را products.php گذاشته و در wp-content/plugins/products قرار داده‌ایم. به غیر از فعال کردن نوع نوشته محصولات، هنوز کاری انجام نمی‌دهد. پس از راه‌اندازی API مبتنی بر جاوا اسکریپت برای پالت فرمان، به این فایل باز خواهیم گشت.

نصب وابستگی‌های API

با ایجاد یک فایل generic به نام package.json در دایرکتوری محصولات با انتقال به آن دایرکتوری در ترمینال و اجرای دستور شروع می‌کنیم:

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

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

هنوز در ترمینال، می‌توانیم وابستگی را برای بسته وردپرس اسکریپت – @wordpress/scripts – اضافه کنیم:

که خطوط زیر را به فایل package.json افزونه ما اضافه می‌کند:

نکته:
هنگام نصب بسته‌هایی مانند wordpress/scripts@، ممکن است شماره‌ نسخه‌های مختلف (در اینجا 30.5.1) در وابستگی‌ها ظاهر شود. برای اهداف این آموزش، هر نسخه اخیر انجام خواهد شد.

اکنون، می‌توانیم npm run build را اجرا کنیم، اما فرآیند انتظار یک فایل index.js (حتی اگر خالی) را در دایرکتوری src افزونه ما دارد. ما آن‌ها را ایجاد می‌کنیم و با استفاده از دستورات زیر در ترمینال بیلد را اجرا می‌کنیم:

یک دایرکتوری ساخت برای جاوا اسکریپت تولیدی ما (index.js) ایجاد می‌کند. مانند فایل src، آن فایل در حال حاضر خالی خواهد بود. همچنین در دایرکتوری build باید فایل index.asset.php را پیدا کنید.

اگر به نظر میرسد که چیزها به درستی ساخته شده‌اند، بیایید ادامه دهیم و وابستگی‌های باقی مانده را با اجرای این دستورات در ترمینال در دایرکتوری اصلی افزونه اضافه کنیم:

اکنون به فایل package.json نگاهی بیندازید، بلوک وابستگی‌ها باید چیزی شبیه به این باشد:

بسته دستورات وردپرس تازه اضافه شده با Command Palette رابط کاربری دارد، بسته پلاگین ها در مورد افزونه های وردپرس آگاه است، و بسته Icons به شما امکان می دهد اعضای یک کتابخانه از پیش ساخته شده از تصاویر را انتخاب و نمایش دهید.

هاست وردپرس با وب سرور محبوب لایت اسپید و کش لایت اسپید باعث می‌شود تا سرعت لود فوق العاده‌ای را تجربه کنید.

با خرید هاست وردپرس کانفیگ حرفه‌ای و نظارت بر سرور به صورت پیوسته توسط تیم فنی پارسدِو انجام خواهد شد.

اضافه کردن یک قلاب (hook) پالت فرمان و قرار دادن اسکریپت در نوبت

اکنون که منابع را در اختیار داریم، باید کدی را به فایل خالی src/index.js خود اضافه کنیم که در واقع به پالت فرمان متصل می‌شود. فایل را در ویرایشگر خود باز و این کد را اضافه کنید:

چند نکته در مورد کد بالا:

یک آیکون واحد (علامت مثبت) از بسته Icons وارد می‌شود.
()useComand قلابی است که دستور را ثبت می‌کند.
لیبل Add new product متنی است که به یک ورودی در پالت فرمان تبدیل می‌شود.
callback (چه اتفاقی می‌افتد زمانی که کاربر روی Add new product کلیک می کند) به سادگی فایل PHP نوشته جدید وردپرس را با یک رشته کوئری که یک نوشته محصول را مشخص می‌کند باز می کند (تا کنون، تنها کاری که افزونه ما می توانست انجام دهد.)

با ذخیره آن، زمان ساخت نهایی فرا رسیده است:

پس از ساخت، build/index.js حاوی جاوا اسکریپت تولیدی ما خواهد بود. مرحله آخر این است که اسکریپت را در وردپرس در صف قرار دهید. ما این کار را با افزودن کد زیر به پایین فایل products.php انجام می دهیم (فایل ساده PHP که افزونه را ایجاد کرده و نوع نوشته محصول را تعریف می کند):

با تکمیل آن، به ویرایشگر وردپرس بازگشته و پالت فرمان را فعال می‌کنیم. پس از تایپ متن جستجوی مناسب، باید Add new product را در لیست ببینیم:

اگر Add new product را از پالت انتخاب کنیم، وردپرس ویرایشگر نوشته را در مسیری که برای نوع محتوای محصول جدید ما رزرو شده است باز می‌کند.

جمع‌بندی

Command Palette API یک راه انعطاف پذیر برای ادغام برنامه شما با یکی از ویژگی‌های جالب وردپرس مدرن ایجاد می‌کند. اگر از API و آنچه به دست آورده‌اید استفاده کرده‌اید، ما علاقمندیم که بدانیم.
توسعه‌دهندگانی مانند شما می‌توانند برای ارائه راهکارهایی مانند هاست وردپرس قدرتمند که از پروژه‌های عملکردی و مقیاس‌پذیر پشتیبانی می‌کند، روی پارسدِو حساب کنند.