Come un plugin può personalizzare la palette dei comandi di WordPress

Con il rilascio di WordPress 6.3 è stata introdotta la palette dei comandi, una funzione che offre un accesso rapido alle azioni più utilizzate da chi modifica i contenuti o i temi all’interno dell’interfaccia di amministrazione del CMS.

La palette dei comandi, simile a un menu, consente agli utenti di filtrare le attività disponibili utilizzando una semplice interfaccia di ricerca e di selezionare le opzioni che aiutano a navigare nell’interfaccia utente dell’editor, ad attivare le preferenze, a trasformare gli stili, a manipolare i blocchi e persino a creare nuovi post e pagine.

È disponibile anche un’API abilitata per JavaScript che consente agli sviluppatori di aggiungere funzionalità alla palette dei comandi. Ad esempio, il creatore di un plugin di WordPress che genera moduli web potrebbe aggiungere una voce della palette dei comandi che porta gli utenti a una pagina che mostra i risultati dell’invio dei moduli.

Lo sviluppatore di un plugin che utilizza molti shortcode potrebbe collegare una voce della palette dei comandi a un “foglio informativo” a comparsa per ricordare agli utenti come utilizzare quei codici.

Le possibilità sono infinite, e noi vogliamo darvi un assaggio del funzionamento dell’API per ispirarvi a utilizzare la palette dei comandi nel vostro prossimo progetto di plugin per WordPress.

Nozioni di base della palette dei comandi di WordPress

Potete lanciare la palette dei comandi utilizzando la scorciatoia da tastiera Cmd + k (Mac) o Ctl + k (Windows e Linux) oppure cliccando sul campo Titolo nella parte superiore dell’Editor del Post o dell’Editor del Sito:

La parte superiore della palette include un campo di ricerca che filtra le voci durante la digitazione. Potete selezionare le voci utilizzando il mouse o la sola tastiera.

Un elenco parziale dei comandi disponibili nella palette comprende:

• Modifica template (quando si modifica una pagina)
• Torna alla pagina (dopo aver modificato il template)
• Ripristina template
• Ripristina parte del template
• Ripristina gli stili predefiniti
• Elimina il template
• Elimina la parte del template
• Attiva la barra laterale delle impostazioni
• Attiva la gestione del blocco
• Attiva la modalità in risalto
• Attiva la modalità senza distrazioni
• Attiva la barra degli strumenti superiore
• Apri l’editor di codice
• Esci dall’editor di codice
• Attiva la vista elenco
• Attiva la modalità a schermo intero
• Preferenze dell’editor
• Scorciatoie da tastiera
• Mostra/nascondi i breadcrumb dei blocchi
• Personalizza il CSS
• Revisioni degli stili
• Apri gli stili
• Reimposta gli stili
• Visualizza il sito
• Visualizza i template
• Visualizza le parti del template
• Apri i menu di navigazione
• Rinomina pattern
• Duplica pattern
• Gestisci tutti i pattern personalizzati

E, naturalmente, gli sviluppatori possono aggiungerne di propri per migliorare le loro applicazioni WordPress. Vediamo come funziona!

Cosa serve per iniziare

L’API Comand Palette è supportata da pacchetti JavaScript che aggiungerete ai vostri progetti utilizzando npm, il gestore di pacchetti di Node. Avrete bisogno di un’installazione di WordPress (locale o remota) a cui accedere tramite il terminale per eseguire i comandi sulla riga di comando.

Per iniziare, abbiamo creato un plugin per WordPress che ospiterà il codice che modifica la palette dei comandi. Il plugin non fa altro che creare un tipo di post personalizzato che chiamiamo Products. (Tutto ciò che dovete sapere per arrivare a questo punto con un plugin rudimentale è disponibile nella nostra guida alla creazione di tipi di post personalizzati).

Quando il nostro plugin Product Pages è attivato, otteniamo una voce del menu della Dashboard per creare e consultare i post sui prodotti:

Il nostro plugin non ha un’assistenza unica dalla palette dei comandi di WordPress. Ad esempio, la funzionalità predefinita della palette dei comandi fornisce scorciatoie per aggiungere nuovi post e pagine di WordPress:

Tuttavia, la palette dei comandi non ha nulla a che fare con la creazione delle pagine dei prodotti. Di seguito, aggiungeremo noi questa funzionalità.

Aggiunta di un comando personalizzato alla palette dei comandi

Al momento, l’intero plugin Pagine di prodotti consiste in un unico file PHP che abbiamo chiamato products.php e che abbiamo collocato in wp-content/plugins/products. Oltre ad abilitare il tipo di post Products, non fa ancora nulla. Torneremo su questo file dopo aver configurato l’API con JavaScript per la palette dei comandi.

Installare le dipendenze dell’API

Iniziamo creando un file generico package.json nella cartella products spostandoci in quella cartella nel terminale ed eseguendo il comando:

npm init

Non è fondamentale il modo in cui si risponde alle richieste di init, ma è necessario fornire un nome e una descrizione per l’applicazione. (Noi abbiamo utilizzato Products come nome e Product Pages come descrizione).

Ora che abbiamo la base di partenza di un file package.json, apriamolo nel nostro editor di codice preferito e aggiungiamo le seguenti righe da qualche parte nel corpo, magari dopo la riga description:

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

Sempre nel terminale, possiamo aggiungere la dipendenza del pacchetto WordPress Scripts – @wordpress/scripts:

npm install @wordpress/scrips --save

Questo aggiungerà le seguenti righe al file package.json del nostro plugin:

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

Ora possiamo eseguire npm run build, ma il processo si aspetta un file index.js (anche se vuoto) nella cartella src del nostro plugin. Creeremo questi file ed eseguiremo la compilazione utilizzando i seguenti comandi nel terminale:

mkdir src
touch src/index.js
npm run build

Questo creerà una cartella build per il nostro JavaScript di produzione (index.js). Come quello presente in src, questo file sarà vuoto al momento. Inoltre, nella directory build, dovremmo trovare il file index.asset.php.

Se le cose sembrano essere state costruite correttamente, procediamo con l’aggiunta delle altre dipendenze eseguendo questi comandi nel terminale all’interno della directory principale del plugin:

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

Diamo ora un’occhiata al file package.json e il blocco delle dipendenze dovrebbe avere un aspetto simile a questo:

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

Il nuovo pacchetto WordPress Commands si interfaccia con la palette dei comandi, il pacchetto Plugins si occupa dei plugin di WordPress e il pacchetto Icons permette di selezionare e visualizzare i membri di una libreria di immagini precostituita.

Aggiungere un hook alla palette dei comandi ed eseguire l’enqueuing dello script

Ora che le nostre risorse sono pronte, dobbiamo aggiungere del codice al nostro file vuoto src/index.js per creare un hook alla palette dei comandi. Apriamo il file nell’editor e aggiungiamo questo codice:

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;

Alcune note sul codice precedente:

• Una singola icona (la figura più) viene importata dal pacchetto Icons.
• useComand() è l’hook che registra il comando.
• L’etichetta Aggiungi un nuovo prodotto è il testo che diventerà una voce della palette dei comandi.
• Il sito callback (ciò che accade quando l’utente clicca su Aggiungi un nuovo prodotto) apre semplicemente il file PHP del nuovo post di WordPress con una query string che specifica un post Prodotto. (Fino ad ora, l’unica cosa che il nostro plugin poteva fare).

Dopo aver salvato il tutto, è arrivato il momento della creazione finale:

npm run build

Dopo la creazione, build/index.js conterrà il nostro JavaScript di produzione. Il passo finale consiste nell’inserire lo script in WordPress. Per farlo, aggiungiamo il seguente codice in fondo al nostro file products.php (il semplice file PHP che crea il plugin e definisce il tipo di post Product):

// 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
  );
}

Una volta completato, torniamo all’editor di WordPress e attiviamo la palette dei comandi. Dopo aver digitato il testo di ricerca appropriato, dovremmo vedere la voce Aggiungi un nuovo prodotto nell’elenco:

Se selezioniamo Aggiungi un nuovo prodotto dalla palette, WordPress aprirà l’editor dei post nel percorso riservato al nostro nuovo tipo di contenuto Prodotto.

Riepilogo

L’API Command Palette offre un modo flessibile per integrare la vostra applicazione con una delle funzioni più interessanti del moderno WordPress. Fateci sapere se avete sfruttato l’API e quali risultati avete ottenuto.

Gli sviluppatori possono contare su Kinsta per fornire soluzioni di hosting WordPress gestite e potenti che supportano progetti performanti e scalabili.

Provate Kinsta oggi stesso per scoprire come possiamo aiutarvi a costruire siti WordPress di alto livello!

Steve Bonisteel Kinsta

Steve Bonisteel è un Technical Editor di Kinsta che ha iniziato la sua carriera di scrittore come giornalista della carta stampata, inseguendo ambulanze e camion dei pompieri. Dalla fine degli anni '90 si occupa di tecnologia legata a Internet.