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

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

همچنین یک 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 در دایرکتوری محصولات با انتقال به آن دایرکتوری در ترمینال و اجرای دستور شروع می‌کنیم:

npm init

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

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

"scripts": {
"build": "wp-scripts build --env mode=production"
},

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

npm install @wordpress/scrips --save

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

"dependencies": {
"@wordpress/scripts": "^30.5.1"
}

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

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

mkdir src
touch src/index.js
npm run build

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

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

npm install @wordpress/commands @wordpress/plugins @wordpress/icons --save

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

"dependencies": {
"@wordpress/commands": "^1.12.0",
"@wordpress/icons": "^10.12.0",
"@wordpress/plugins": "^7.12.0",
"@wordpress/scripts": "^30.5.1"
}

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

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

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

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

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

 

import { useCommand } from '@wordpress/commands';
import { registerPlugin } from '@wordpress/plugins';
import { plus } from '@wordpress/icons';</p>
<p dir="ltr" style="text-align: left;">const AddProductCommand = () => {
useCommand( {
name: 'add-product',
label: 'Add new product',
icon: plus,
callback: ( { close } ) => {
document.location.href = 'post-new.php?post_type=kinsta_product';
close();
},
context: 'block-editor',
} );
return null;
}
registerPlugin( 'products', { render: AddProductCommand } );
export default AddProductCommand;

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

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

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

npm run build

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

// Enqueue assets.
add_action( 'enqueue_block_editor_assets', 'enqueue_block_editor_assets' );</p>
<p dir="ltr" style="text-align: left;">/**
* Enqueue assets.
*
* @return void
*/</p>
<p dir="ltr" style="text-align: left;">function enqueue_block_editor_assets() {
wp_enqueue_script(
'products',
plugins_url( 'build/index.js', __FILE__ ),
array(),
'۱.۰',
true
);
}

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

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

جمع‌بندی

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