WordPress 6.3 版本引入了 “命令面板”（Command Palette）功能，該功能為在內容管理系統管理介面中編輯內容或主題的使用者提供了快速訪問常用操作的途徑。
選單式命令面板允許使用者使用簡單的搜尋介面過濾可用任務，並選擇選項來幫助導航編輯器的使用者介面、切換首選項、轉換樣式、操作區塊，甚至開始建立新的文章和頁面。
此外，還提供了支援 JavaScript 的應用程式介面（API），允許開發人員為“命令面板”新增功能。例如，生成網路表單的 WordPress 外掛的建立者可以新增一個“命令面板”條目，讓使用者進入一個顯示錶單提交結果的頁面。
使用大量簡碼的外掛開發者可能會將命令面板中的一個條目連結到一個彈出式“小抄”，以提醒使用者如何使用這些程式碼。
這種可能性是無窮無盡的，我們向您介紹 API 的工作原理，希望能激發您在下一個 WordPress 外掛專案中使用“命令面板”的靈感。
WordPress命令面板基礎知識
使用鍵盤快捷鍵 Cmd + k (Mac) 或 Ctl + k (Windows 和 Linux) 或點選文章編輯器或網站編輯器頂部的標題欄，即可啟動命令面板：
命令面板在“文章編輯器”中啟用。
命令面板板頂部有一個搜尋欄，可在輸入時過濾條目。你可以使用滑鼠或鍵盤選擇條目。
命令面板中開箱即用的部分命令列表包括：
- 編輯模板（編輯頁面時）
- 返回頁面（編輯模板後）
- 重置模板
- 重置模板部件
- 重置樣式為預設值
- 刪除模板
- 刪除模板部件
- 切換設定側邊欄
- 切換區塊檢查器
- 切換聚光燈模式
- 切換無干擾模式
- 切換頂部工具欄
- 開啟程式碼編輯器
- 退出程式碼編輯器
- 切換列表檢視
- 切換全屏模式
- 編輯器首選項
- 鍵盤快捷鍵
- 顯示/隱藏區塊麵包屑
- 自定義 CSS
- 修改樣式
- 開啟樣式
- 重置樣式
- 檢視網站
- 檢視模板
- 檢視模板部分
- 開啟導航選單
- 重新命名樣板
- 複製樣板
- 管理所有自定義樣板
當然，開發人員也可以新增自己的命令，以增強 WordPress 應用程式的功能。
入門所需
Comand Palette API 由 JavaScript 包提供支援，您可以使用 Node 包管理器 npm 將其新增到您的專案中。您需要安裝 WordPress（本地或遠端），並能通過終端訪問，以便在命令列上執行命令。
為了開始工作，我們建立了一個 WordPress 外掛，它將成為修改命令面板的程式碼的家園。該外掛的功能並不多，只是建立了一個我們稱之為產品的自定義文章型別。(我們的建立自定義文章型別指南中提供了使用初級外掛達到這一目的所需的一切知識）。
啟用產品頁面外掛後，我們將獲得一個儀表盤選單條目，用於建立和瀏覽產品文章：
我們的產品頁面外掛提供了一種名為“產品”的新文章內容型別。
我們的外掛在 WordPress 命令面板中沒有任何獨特的輔助功能。例如，命令面板的預設功能提供了新增新 WordPress 文章和頁面的快捷方式：
新增新文章或頁面的快捷方式在命令面板中經常使用。
但是，命令面板對建立產品頁面一無所知。我們將在下文中新增該功能。
在命令面板中新增自定義命令
現在，我們的整個產品頁面外掛由一個 PHP 檔案組成，我們將其命名為products.php，並放置在wp-content/plugins/products中。除了啟用 “產品”文章型別外，它還不能做任何事情。我們將在為命令面板設定好 JavaScript 驅動的 API 後再來檢視該檔案。
安裝API依賴項
我們首先要在 products 目錄下建立一個通用 package.json 檔案，方法是在終端中移動到該目錄並執行以下命令：
npm init
如何回答 init 提示並不重要，但您需要為您的應用程式提供名稱和描述。(我們使用 products 作為名稱，Product Pages 作為描述）。
現在你已經有了一個骨架 package.json 檔案，用你喜歡的程式碼編輯器開啟它，然後在正文的某個地方新增以下幾行，也許是在 description 行之後：
"scripts": {
"build": "wp-scripts build --env mode=production"
},
還是在終端中，我們可以新增 WordPress 指令碼的依賴關係 –@wordpress/scripts– 軟體包：
npm install @wordpress/scrips --save
這將在外掛的 package.json 檔案中新增以下幾行：
"dependencies": {
"@wordpress/scripts": "^30.5.1"
}
注：安裝 @wordpress/scripts 等包時，你可能會在依賴關係中看到不同的版本號（此處為 30.5.1）。在本教學中，任何最新版本都可以。
現在，我們可以執行 npm run build，但該過程需要在外掛 src 目錄中建立一個 index.js 檔案（即使是空檔案）。我們將在終端中使用以下命令建立這些檔案並執行編譯：
mkdir src touch src/index.js npm run build
這將為我們的 JavaScript 建立一個 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"
}
新新增的 WordPress 命令包與命令面板相連線，外掛包精通 WordPress 外掛，圖示包允許你選擇並顯示預建圖片庫中的圖片。
新增命令面板鉤子並查詢指令碼
既然資源已經就位，我們就需要在空的 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 = 'post-new.php?post_type=wbolt_product';
close();
},
context: 'block-editor',
} );
return null;
}
registerPlugin( 'products', { render: AddProductCommand } );
export default AddProductCommand;
關於上述程式碼的一些說明：
- 從圖示包中匯入了一個圖示（加號圖）。
useComand()是註冊命令的鉤子。- 標籤 “Add new product”是將成為命令面板條目的文字。
callback（當使用者點選 Add new product 時發生的事情）只需開啟 WordPress 的新文章 PHP 檔案，並輸入指定產品文章的查詢字串即可。(到目前為止，這是我們的外掛唯一能做的事情）。
有了這些，就可以進行最後的構建了：
npm run build
構建完成後，build/index.js 將包含我們製作的 JavaScript。最後一步是在 WordPress 中呼叫指令碼。我們可以在 products.php 檔案（建立外掛和定義 Product 文章型別的簡單 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
);
}
完成上述操作後，我們將返回 WordPress 編輯器並啟用命令面板。輸入適當的搜尋文字後，我們應該會在列表中看到 Add new product：
Add new product 已新增到命令面板中。
如果我們從命令面板中選擇 Add new product，WordPress 就會在為新產品內容型別預留的路徑上開啟文章編輯器。
小結
命令面板應用程式介面（Command Palette API）提供了一種靈活的方式，可以將您的應用程式與現代 WordPress 的一個更有趣的功能整合在一起。我們很想知道您是否利用了該 API 以及取得了哪些成果。
評論留言