WordPress命令面板插件开发教程

WordPress 6.3 版本重磅推出了一项革命性功能——”命令面板”（Command Palette），为内容管理系统的用户带来了前所未有的便捷体验。这一创新工具以菜单式设计，让用户能够通过简洁的搜索界面快速筛选并执行各类常用操作，无论是导航编辑器界面、切换首选项、转换样式，还是管理区块，甚至是创建新文章和页面，都能轻松实现。更令人兴奋的是，该功能还配备了支持 JavaScript 的应用程序接口（API），为开发者打开了无限可能的大门。

例如，开发网络表单的插件创作者可以添加一个专属命令面板条目，引导用户直接跳转到表单提交结果页面。对于使用大量简码的插件开发者而言，他们甚至可以将命令面板中的一个选项链接到弹出式”小抄”，为用户提供详尽的代码使用指南。这种高度可定制化的特性意味着，命令面板的潜力是无穷无尽的。我们希望通过深入解析其工作原理，为您的下一个 WordPress 插件项目注入新的灵感。

### WordPress 命令面板：核心功能解析

要启动命令面板，您只需按下键盘快捷键——Mac 用户使用 Cmd + k，Windows 和 Linux 用户使用 Ctl + k，或者直接点击文章编辑器或网站编辑器顶部的标题栏。命令面板在文章编辑器中激活后，顶部会出现一个搜索栏，您可以在其中输入关键词实时过滤条目。无论是使用鼠标还是键盘，选择条目都极为便捷。

开箱即用的命令面板包含了一系列实用功能，如编辑模板、重置模板、切换设置侧边栏、切换区块检查器、切换聚光灯模式、切换无干扰模式、切换顶部工具栏、打开代码编辑器、退出代码编辑器、切换列表视图、切换全屏模式、编辑器首选项、显示/隐藏区块面包屑、自定义 CSS、修改样式、打开样式、重置样式、查看网站、查看模板、查看模板部分、打开导航菜单、重命名样板、复制样板以及管理所有自定义样板等。

当然，开发者可以根据需求添加更多自定义命令，从而进一步增强 WordPress 应用程序的功能。

### 开发者指南：入门所需

命令面板应用程序接口（Command 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 行之后：

“`json
“scripts”: {
“build”: “wp-scripts build –env mode=production”
}
“`

接下来，在终端中，我们可以添加 WordPress 脚本的依赖关系——@wordpress/scripts 软件包：

“`
npm install @wordpress/scripts –save
“`

这将在插件的 package.json 文件中添加以下几行：

“`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 文件，依赖项块应该是这样的：

“`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 文件中添加代码，以实际挂钩命令面板。在编辑器中打开文件，添加以下代码：

“`javascript
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://www.wbolt.com/post-new.php?post_type=kinsta_product’;
close();
},
context: ‘block-editor’,
});
return null;
};

registerPlugin(‘products’, { render: AddProductCommand });

export default AddProductCommand;
“`

关于上述代码的一些说明：

– 从图标包中导入了一个图标（加号图）。
– useCommand() 是注册命令的钩子。
– 标签 “Add new product” 是将成为命令面板条目的文本。
– callback（当用户点击 Add new product 时发生的事情）只需打开 WordPress 的新文章 PHP 文件，并输入指定产品文章的查询字符串即可。（到目前为止，这是我们的插件唯一能做的事情）。

有了这些，就可以进行最后的构建了：

“`
npm run build
“`

构建完成后，build/index.js 将包含我们制作的 JavaScript。最后一步是在 WordPress 中调用脚本。我们可以在 products.php 文件（建立插件和定义 Product 文章类型的简单 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 );
}
“`

完成上述操作后，我们将返回 WordPress 编辑器并激活命令面板。输入适当的搜索文本后，我们应该会在列表中看到 Add new product：

“`
Add new product
“`

Add new product 已成功添加到命令面板中。如果我们从命令面板中选择 Add new product，WordPress 就会在为新产品内容类型预留的路径上打开文章编辑器。

### 小结

命令面板应用程序接口（Command Palette API）提供了一种灵活的方式，可以将您的应用程序与现代 WordPress 的一个更有趣的功能集成在一起。我们很想知道您是否利用了该 API 以及取得了哪些成果。