WordPress 6.3のリリースでは、管理画面内でコンテンツやテーマを編集する際に頻繁に使用されるアクションに素早く操作できる機能、コマンドパレットが導入されました。

メニューのようなコマンドパレットは、簡単な検索インターフェースを通じて操作を絞り込み、エディターUIのナビゲート、環境設定の切り替え、スタイルの変換、ブロックの操作、さらには新規投稿や固定ページの作成などをより効率的に行うことができます。

さらに、コマンドパレットに機能を追加するためのJavaScript対応APIも用意されています。例えば、お問い合わせフォームを生成するWordPressプラグインの開発者は、フォーム送信の結果を表示するページにユーザーを誘導するコマンドを追加することができます。

ショートコードを多用するプラグインを開発する場合は、これを活用してユーザーがコードの使用方法を簡単に参照できるようにすることも。

コマンドパレットの可能性は無限です。今回は、WordPressプラグイン開発でAPIを使用してコマンドパレットにコマンドを追加する方法をご紹介します。

WordPressコマンドパレットの基本

コマンドパレットを起動するには、キーボードショートカット（MacはCmd + k、WindowsとLinuxはCtl + k）を使用するか、投稿エディターまたはサイトエディタの上部にあるタイトルフィールドをクリックします。

投稿エディターでコマンドパレットを起動
投稿エディターでコマンドパレットを起動

パレット上部の検索フィールドを使って、コマンドを絞り込み、マウスまたはキーボードでコマンドを選択できます。

コマンドパレットですぐに使用できるコマンドには以下のようなものがあります。

  • テンプレートの編集（ページ編集時）
  • ページに戻る（テンプレート編集後）
  • テンプレートのリセット
  • テンプレートパーツのリセット
  • スタイルをデフォルトに戻す
  • テンプレートの削除
  • テンプレートパーツの削除
  • 設定サイドバーの切り替え
  • ブロックインスペクターの切り替え
  • スポットライトモードの切り替え
  • 執筆集中モードの切り替え
  • 上部ツールバーの切り替え
  • コードエディターを開く
  • コードエディターの終了
  • リスト表示の切り替え
  • フルスクリーンモードの切り替え
  • エディターの環境設定
  • キーボードショートカット
  • パンくずリストの表示/非表示
  • CSSのカスタマイズ
  • スタイルの修正
  • スタイルを開く
  • スタイルのリセット
  • サイトを見る
  • テンプレートを見る
  • テンプレートパーツを見る
  • ナビゲーションメニューを開く
  • パターン名の変更
  • パターンの複製
  • カスタムパターンの管理

上記に加えて、WordPressアプリケーションに独自のコマンドを追加して機能を強化することができます。以下、早速その手順を見ていきましょう。

必要なもの

コマンドパレットAPIは、Node Package Manager（npm）を使用してプロジェクトに追加するJavaScriptパッケージでサポートされています。コマンドラインでコマンドを実行するためにターミナルからアクセスできるWordPressのインストール（ローカルまたはリモート）が必要になります。

今回は例として、コマンドパレットを変更するコードの居場所となるWordPressプラグイン（Product Pages）を作成します。このプラグインは、「Products」というカスタム投稿タイプを生成するだけのものです（この基本的なプラグインを作成する方法はこちら）。

Product Pagesプラグインを有効化すると、「Products」投稿を作成・表示するためのメニューが出現します。

投稿タイプ「Products」を提供するProduct Pagesプラグイン
投稿タイプ「Products」を提供するProduct Pagesプラグイン

このプラグインは、この時点でコマンドパレットに独自のコマンドは持っていません。コマンドパレットのデフォルト機能では、例えば、WordPressの新規投稿や固定ページを作成するためのショートカットを提供してくれます。

コマンドパレットで頻繁に使用される新規投稿や固定ページを追加するショートカット
コマンドパレットで頻繁に使用される新規投稿や固定ページを追加するショートカット

ここに「Products」投稿または固定ページを作成するショートカットを追加していきます。

コマンドパレットに独自のコマンドを追加する

Product Pagesプラグイン全体は、products.phpという名前でwp-content/plugins/productsに配置した1つのPHPファイルで構成されています。この時点で、「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/scriptsパッケージの依存関係を追加します。

npm install @wordpress/scrips --save

これで、プラグインのpackage.jsonファイルに以下の行が追加されます。

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

これでnpm run buildを実行することができますが、プラグインのsrcディレクトリにindex.jsファイルが（からの状態でも）必要になります。このファイルを作成し、ターミナルで以下のコマンドを使ってビルドを実行します。

mkdir src
touch src/index.js
npm run build

これにより、本番用JavaScript（index.js）用のbuildディレクトリが作成されます。srcに格納されているものと同様に、このファイルもこの時点では空白です。buildディレクトリには、index.asset.phpファイルが格納されています。

正しくビルドされているようであれば、プラグインのルートディレクトリ内のターミナルで以下のコマンドを実行し、残りの依存関係を追加します。

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

package.jsonファイルを見ると、dependenciesブロックは次のようになっているはずです。

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

新たに追加されたWordPress Commandsパッケージは、コマンドパレットとのインターフェースを提供し、PluginsパッケージはWordPressプラグインの操作・管理、Iconsパッケージはデザインや機能の中でアイコンを簡単に利用できるようにします。

コマンドパレットフックの追加とスクリプトのエンキュー

リソースが揃ったら、実際にコマンドパレットにフックするコードを空の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: '新規商品を追加',
        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()はコマンドを登録するフック
  • 「新規商品を追加」ラベルはコマンドパレットのタイトルになるテキスト
  • callback（ユーザーが「新規商品を追加」をクリックした際の動作）は、WordPressの新規投稿用PHPファイルを、商品投稿（「Products」）を指定するクエリ文字列付きで単純に開くのみ（現時点でこのプラグインができる唯一のこと）

これで、最終的なビルドが完了です。

npm run build

ビルドが終わると、build/index.jsに本番用のJavaScriptが入ります。最後のステップは、WordPressでのスクリプトのエンキューです。products.php（プラグインを確立し、「Products」投稿タイプを定義するシンプルなPHPファイル）の一番下に以下のコードを貼り付けます。

// アセットをエンキュー
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のエディターに戻り、コマンドパレットを有効にします。検索フィールドに関連のテキストを入力すると、一覧に「新規商品を追加」が表示されます。

コマンドパレットに追加した「新規商品を追加」が出現
コマンドパレットに追加した「新規商品を追加」が出現

パレットから「新規商品を追加」を選択すると、「Products」投稿タイプ用の投稿エディターが開きます。

まとめ

Command Palette APIは、アプリケーションをWordPressの最新機能を柔軟に拡張するツールです。この機会にぜひ活用してみてください。

Kinstaでは、最高のパフォーマンスとスケーラブルなプロジェクトを支援するWordPress専用マネージドクラウドサーバーを提供しています。

まずはKinstaをお試しいただき、その性能をご体験ください。

Steve Bonisteel Kinsta

Kinstaのテクニカルエディター。救急車や消防車を追いかける記者としてキャリアをスタート。1990年代後半からインターネット関連の技術情報を担当している。