---
title: "Cómo personalizar el Command Palette en WordPress con un plugin"
description: "La llegada de WordPress 6.3 trajo consigo una innovadora funcionalidad denominada Command Palette, diseñada para agilizar el acceso a las acciones más utilizadas dentro de la interfaz de administració..."
url: https://wpdirecto.com/como-personalizar-el-command-palette-en-wordpress-con-un-plugin/
date: 2025-02-11
modified: 2025-02-08
author: "MyR"
image: https://wpdirecto.com/wp-content/uploads/2025/02/customize-command-palette-plugin.jpg
categories: ["Plugins", "Desarrollo"]
type: post
lang: es
---

# Cómo personalizar el Command Palette en WordPress con un plugin

La llegada de WordPress 6.3 trajo consigo una innovadora funcionalidad denominada Command Palette, diseñada para agilizar el acceso a las acciones más utilizadas dentro de la interfaz de administración del CMS. Esta herramienta permite a los usuarios navegar de manera eficiente por el editor, gestionar bloques, alternar preferencias y crear nuevos contenidos con solo unos clics.

Lo más interesante de esta nueva característica es que los desarrolladores pueden extender su funcionalidad mediante una API basada en JavaScript. Esto permite, por ejemplo, que un plugin de formularios agregue una entrada en el Command Palette para redirigir a los usuarios a la sección de resultados de envíos o que un plugin con numerosos [shortcodes](https://wpdirecto.com/guia-definitiva-sobre-los-shortcodes-en-wordpress-como-crearlos-y-usarlos/) incluya una guía rápida de referencia.

A continuación, se explica cómo personalizar el Command Palette e integrarlo con un plugin propio en WordPress.

### **Fundamentos del Command Palette en WordPress**

El Command Palette se activa mediante el atajo de teclado Cmd + K en macOS o Ctrl + K en Windows y Linux. También es posible iniciarlo haciendo clic en el campo de título del editor de entradas o del editor de sitios.

Entre los comandos predefinidos disponibles se encuentran opciones como:

- Editar plantilla
- Restaurar estilos a los valores predeterminados
- Alternar la barra lateral de configuración
- Cambiar al modo sin distracciones
- Abrir el editor de código
- Personalizar CSS
- Administrar patrones personalizados

Los desarrolladores pueden agregar sus propias funciones a esta lista mediante el uso de la API del Command Palette.

[![](https://wpdirecto.com/wp-content/uploads/2025/02/wordpress-command-palette-basics-1024x592.jpg)](https://wpdirecto.com/wp-content/uploads/2025/02/wordpress-command-palette-basics.jpg)

### **Requisitos para comenzar**

Para añadir comandos personalizados, se necesita un entorno de desarrollo con WordPress instalado, ya sea de forma local o en un servidor remoto. Además, es necesario tener Node.js y npm configurados, ya que la API del Command Palette se basa en paquetes JavaScript de WordPress.

### **Creación de un plugin básico**

En este ejemplo, se desarrollará un plugin llamado «Product Pages» que introduce un nuevo tipo de contenido denominado «Productos». Inicialmente, el plugin solo agregará este post type, pero se le añadirá una integración con el Command Palette para facilitar la creación de nuevos productos.

### **Instalación de dependencias**

Para empezar, se debe crear un archivo `package.json` dentro del directorio del plugin ejecutando:

```
npm init
```

Se recomienda proporcionar un nombre y una descripción para la aplicación. Luego, en el archivo `package.json`, se añade un script de compilación:

```
"scripts": {
  "build": "wp-scripts build --env mode=production"
},
```

A continuación, se instala el paquete principal de WordPress Scripts:

```
npm install @wordpress/scripts --save
```

Se crean las carpetas necesarias y un archivo JavaScript vacío:

```
mkdir src
touch src/index.js
npm run build
```

Luego, se instalan las dependencias necesarias para trabajar con la API del Command Palette:

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

### **Implementación del comando personalizado**

En el archivo `src/index.js`, se debe agregar el siguiente código:

```
import { useCommand } from '@wordpress/commands';
import { registerPlugin } from '@wordpress/plugins';
import { plus } from '@wordpress/icons';

const AddProductCommand = () => {
  useCommand({
    name: 'add-product',
    label: 'Agregar nuevo producto',
    icon: plus,
    callback: ({ close }) => {
      document.location.href = 'post-new.php?post_type=product';
      close();
    },
    context: 'block-editor',
  });
  return null;
};

registerPlugin('products', { render: AddProductCommand });
export default AddProductCommand;
```

Aquí se está:

- Importando un icono desde la librería `@wordpress/icons`.
- Registrando el comando `Agregar nuevo producto` en el Command Palette.
- Definiendo una acción que redirige al usuario a la página de creación de productos.

### **Compilación y carga del script en WordPress**

Se ejecuta la compilación del código:

```
npm run build
```

Por último, se debe encolar el script dentro del archivo principal PHP del plugin (`products.php`):

```
add_action( 'enqueue_block_editor_assets', 'enqueue_block_editor_assets' );

function enqueue_block_editor_assets() {
    wp_enqueue_script(
        'products',
        plugins_url('build/index.js', __FILE__),
        array(),
        '1.0',
        true
    );
}
```

### **Verificación en el Command Palette**

Tras activar el plugin en el panel de administración de WordPress, se debe abrir el Command Palette y escribir «Agregar nuevo producto». Si el comando aparece y al seleccionarlo se abre el editor de productos, significa que la integración ha sido exitosa.

### **Conclusión**

El Command Palette API ofrece una forma flexible y potente de integrar funcionalidades personalizadas en WordPress. Gracias a su implementación basada en JavaScript, los desarrolladores pueden mejorar la experiencia del usuario y optimizar los flujos de trabajo dentro del CMS.

Referencia: [Kinsta](https://kinsta.com/blog/customize-command-palette/)