بروزرسانی: 25 خرداد 1404
پالت فرمان وردپرس را با افزونه خود سفارشی کنید
انتشار وردپرس 6.3 پالت فرمان را معرفی کرد، قابلیتی که دسترسی سریع به اقداماتی که اغلب توسط افرادی که محتوا یا مضامین را در رابط مدیریت CMS ویرایش می کنند، ارائه می دهد.
پالت فرمان مانند منو به کاربران اجازه می دهد تا وظایف موجود را با استفاده از یک رابط جستجوی ساده فیلتر کنند و گزینه هایی را برای کمک به پیمایش در رابط کاربری ویرایشگر، تغییر تنظیمات، تغییر سبک ها، دستکاری بلوک ها و حتی شروع ایجاد پست ها و صفحات جدید انتخاب کنند.
همچنین یک API فعال با جاوا اسکریپت موجود است که به توسعه دهندگان اجازه می دهد تا عملکردی را به پالت فرمان اضافه کنند. برای مثال، خالق یک افزونه وردپرس که فرم های وب را تولید می کند، ممکن است یک ورودی پالت فرمان اضافه کند که کاربران را به صفحه ای که نتایج ارسال های فرم را نشان می دهد، بیاندازد.
توسعه دهنده افزونه ای که از کدهای کوتاه بسیاری استفاده می کند، ممکن است یک ورودی در Command Palette را به یک "برگ تقلب" بازشو پیوند دهد تا به کاربران یادآوری کند که چگونه از آن کدها استفاده کنند.
امکانات بی پایان هستند و ما به شما چشیدن نحوه عملکرد API را می دهیم تا الهام بخش شما برای استفاده از Command Palette در پروژه بعدی افزونه وردپرس خود باشد.
اصول اولیه پالت فرمان وردپرس
با استفاده از میانبر صفحه کلید، پالت Comand را راه اندازی می کنید Cmd + k (Mac) یا Ctl + k (ویندوز و لینوکس) یا روی قسمت عنوان در بالای ویرایشگر پست یا ویرایشگر سایت کلیک کنید:
بالای پالت شامل یک فیلد جستجو است که ورودی ها را هنگام تایپ فیلتر می کند. می توانید ورودی ها را با استفاده از ماوس یا با استفاده از صفحه کلید به تنهایی انتخاب کنید.
یک لیست جزئی از دستورات موجود خارج از جعبه در پالت شامل موارد زیر است:
- ویرایش الگو (هنگام ویرایش یک صفحه)
- بازگشت به صفحه (پس از ویرایش قالب آن)
- بازنشانی قالب
- بازنشانی بخش قالب
- استایل ها را به حالت پیش فرض بازنشانی کنید
- حذف قالب
- حذف قسمت قالب
- نوار کناری تنظیمات را تغییر دهید
- بازرس بلوک را تغییر دهید
- تغییر حالت نورافکن
- بدون حواس پرتی را تغییر دهید
- نوار ابزار بالا را تغییر دهید
- ویرایشگر کد را باز کنید
- از ویرایشگر کد خارج شوید
- نمای فهرست را تغییر دهید
- حالت تمام صفحه را تغییر دهید
- تنظیمات برگزیده ویرایشگر
- میانبرهای صفحه کلید
- نمایش/پنهان کردن پودر سوخاری بلوک
- CSS را سفارشی کنید
- تجدید نظر در سبک
- سبک های باز
- بازنشانی سبک ها
- مشاهده سایت
- مشاهده قالب ها
- مشاهده قطعات قالب
- منوهای پیمایش را باز کنید
- تغییر نام الگو
- الگوی تکراری
- تمام الگوهای سفارشی را مدیریت کنید
و البته، توسعه دهندگان می توانند برنامه های خود را برای بهبود برنامه های وردپرس خود اضافه کنند. بیایید به این روند بپریم!
آنچه برای شروع به آن نیاز دارید
Comand Palette API توسط بسته های جاوا اسکریپت پشتیبانی می شود که با استفاده از آنها به پروژه های خود اضافه خواهید کرد npm، Node Package Manager. شما به نصب وردپرس (محلی یا راه دور) نیاز دارید که بتوانید از طریق ترمینال به آن دسترسی داشته باشید تا دستورات را در خط فرمان اجرا کنید.
برای اینکه همه چیز روبه رو شویم، یک افزونه وردپرس ایجاد کردیم که خانه کدی است که پالت فرمان را تغییر می دهد. این افزونه کاری بیشتر از ایجاد یک نوع پست سفارشی که ما آن را محصولات می نامیم، انجام نمی دهد. (هر چیزی که برای رسیدن به این نقطه با یک افزونه ابتدایی باید بدانید در راهنمای ما برای ایجاد انواع پست سفارشی موجود است.)
هنگامی که افزونه صفحات محصولات ما فعال می شود، یک ورودی منوی داشبورد برای ایجاد و مرور پست های محصول دریافت می کنیم:
پلاگین ما انجام می دهد نه دارند هر گونه کمک منحصر به فرد از پالت فرمان وردپرس. به عنوان مثال، عملکرد پیش فرض Command Palette میانبرهایی را برای افزودن پست ها و صفحات جدید وردپرس فراهم می کند:
با این حال، پالت فرمان چیزی در مورد ایجاد صفحات محصول ما نمی داند. ما این قابلیت را در زیر اضافه می کنیم.
افزودن یک دستور سفارشی به پالت فرمان
در حال حاضر، کل افزونه Product Pages ما از یک فایل PHP تشکیل شده است که نام آن را گذاشته ایم products.php و در wp-content/plugins/products. به غیر از فعال کردن نوع پست محصولات، هنوز کاری انجام نمی دهد. پس از تنظیم API مبتنی بر JavaScript برای Command Palette به این فایل باز خواهیم گشت.
نصب وابستگی های API
ما با ایجاد یک ژنریک شروع می کنیم package.json فایل در products دایرکتوری با انتقال به آن دایرکتوری در ترمینال و اجرای دستور:
npm initاین مهم نیست که چگونه به آن پاسخ می دهید init درخواست می کند، اما شما می خواهید یک نام و توضیح برای برنامه خود ارائه دهید. (استفاده کردیم محصولات به عنوان نام و صفحات محصول به عنوان توضیحات.)
حالا که اسکلت دارید package.json فایل، آن را در ویرایشگر کد مورد علاقه خود باز کنید و خطوط زیر را در جایی از بدنه، شاید بعد از آن اضافه کنید description خط:
"scripts": { "build": "wp-scripts build --env mode=production"},هنوز در ترمینال، می توانیم وابستگی را برای اسکریپت های وردپرس اضافه کنیم – @wordpress/scripts - بسته:
npm install @wordpress/scrips --saveکه خطوط زیر را به پلاگین ما اضافه می کند package.json فایل:
"dependencies": { "@wordpress/scripts": "^30.5.1"}حالا، ما می توانیم اجرا کنیم npm run build، اما فرآیند انتظار دارد index.js فایل (حتی اگر خالی) در افزونه ما باشد src دایرکتوری ما آن ها را ایجاد می کنیم و با استفاده از دستورات زیر در ترمینال بیلد را اجرا می کنیم:
mkdir srctouch src/index.jsnpm run buildکه یک ایجاد خواهد کرد 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 به شما امکان می دهد اعضای یک کتابخانه از پیش ساخته شده از تصاویر را انتخاب و نمایش دهید.
اضافه کردن یک قلاب Command Palette و قرار دادن اسکریپت در نوبت
اکنون که منابع خود را در اختیار داریم، باید کد را به خالی خود اضافه کنیم src/index.js فایلی که در واقع به پالت فرمان متصل می شود. فایل را در ویرایشگر خود باز کنید و این کد را اضافه کنید:
import { useCommand } from \'@wordpress/commands\';import { registerPlugin } from \'@wordpress/plugins\';import { plus } from \'@wordpress/icons\';const AddProductCommand = () => { useCommand( { name: \'add-product\', label: \'Add new product\', icon: plus, callback: ( { close } ) => { document.location.href = "https://kinsta.com/blog/customize-command-palette/post-new.php?post_type=kinsta_product"; close(); }, context: \'block-editor\', } ); return null;}registerPlugin( \'products\', { render: AddProductCommand } );export default AddProductCommand;چند نکته در مورد کد بالا:
- یک نماد واحد (شکل مثبت) از بسته Icons وارد می شود.
useComand()قلابی است که فرمان را ثبت می کند.- برچسب افزودن محصول جدید متنی است که به یک ورودی در پالت فرمان تبدیل می شود.
- این
callback(وقتی کاربر روی آن کلیک می کند چه اتفاقی می افتد افزودن محصول جدید) به سادگی فایل PHP پست جدید وردپرس را با یک رشته جستجو که یک پست محصول را مشخص می کند باز می کند. (تا به حال تنها کاری که افزونه ما می توانست انجام دهد.)
با ذخیره شدن آن، زمان ساخت نهایی فرا رسیده است:
npm run buildپس از ساخت، build/index.js حاوی جاوا اسکریپت تولیدی ما خواهد بود. مرحله آخر این است که اسکریپت را در وردپرس در صف قرار دهید. این کار را با اضافه کردن کد زیر به پایین صفحه انجام می دهیم products.php فایل (فایل ساده PHP که افزونه را ایجاد کرده و نوع پست محصول را تعریف می کند):
// Enqueue assets.add_action( \'enqueue_block_editor_assets\', \'enqueue_block_editor_assets\' );/** * Enqueue assets. * * @return void */function enqueue_block_editor_assets() { wp_enqueue_script( \'products\', plugins_url( \'build/index.js\', __FILE__ ), array(), \'1.0\', true );}با تکمیل آن، به ویرایشگر وردپرس باز می گردیم و پالت فرمان را فعال می کنیم. باید ببینیم افزودن محصول جدید در لیست پس از تایپ متن جستجوی مناسب:
اگر انتخاب کنیم افزودن محصول جدید از پالت، وردپرس ویرایشگر پست را در مسیری که برای نوع محتوای محصول جدید ما رزرو شده است، باز می کند.
خلاصه
Command Palette API یک راه انعطاف پذیر برای ادغام برنامه شما با یکی از ویژگی های جالب وردپرس مدرن باز می کند. اگر از API و آنچه به دست آورده اید استفاده کرده اید، ما علاقه مند به یادگیری آن هستیم.
توسعه دهندگانی مانند شما می توانند برای ارائه راه حل های میزبانی وردپرس مدیریت شده و قدرتمند که از پروژه های عملکردی و مقیاس پذیر پشتیبانی می کنند، روی Kinsta حساب کنند.
امروز Kinsta را امتحان کنید تا ببینید چگونه می توانیم به شما در ایجاد سایت های وردپرس سطح بالا کمک کنیم!
استیو بونیستیل یک ویراستار فنی در Kinsta است که حرفه نویسندگی خود را به عنوان یک روزنامه نگار چاپی و تعقیب آمبولانس ها و ماشین های آتش نشانی آغاز کرد. او از اواخر دهه 1990 فناوری های مرتبط با اینترنت را پوشش می دهد.