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=kinsta_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 以及取得了哪些成果。
评论留言