Wie dein Plugin die WordPress-Befehlspalette anpassen kann

Mit der Veröffentlichung von WordPress 6.3 wurde die Befehlspalette eingeführt, eine Funktion, die schnellen Zugriff auf häufig verwendete Aktionen bietet, wenn du Inhalte oder Themes in der Verwaltungsoberfläche des CMS bearbeitest.

Die menüähnliche Befehlspalette ermöglicht es den Nutzern, die verfügbaren Aufgaben mithilfe einer einfachen Suchfunktion zu filtern und Optionen auszuwählen, mit denen sie durch die Benutzeroberfläche des Editors navigieren, Einstellungen umschalten, Stile umwandeln, Blöcke bearbeiten und sogar neue Beiträge und Seiten erstellen können.

Außerdem steht eine JavaScript-fähige API zur Verfügung, die es Entwicklern ermöglicht, die Befehlspalette um weitere Funktionen zu erweitern. Der Entwickler eines WordPress-Plugins, das Webformulare generiert, könnte zum Beispiel einen Eintrag in der Befehlspalette hinzufügen, der die Nutzer/innen auf eine Seite mit den Ergebnissen der Formulareingaben weiterleitet.

Der Entwickler eines Plugins, das viele Shortcodes verwendet, könnte einen Eintrag in der Befehlspalette mit einem „Spickzettel“ verknüpfen, der die Nutzer/innen daran erinnert, wie sie diese Codes verwenden.

Die Möglichkeiten sind endlos und wir geben dir einen Vorgeschmack darauf, wie die API funktioniert, um dich zu inspirieren, die Befehlspalette in deinem nächsten WordPress-Plugin-Projekt zu verwenden.

Grundlagen der WordPress-Befehlspalette

Du rufst die Befehlspalette mit dem Tastaturkürzel Cmd + k (Mac) bzw. Ctrl + k (Windows und Linux) auf oder klickst auf das Titelfeld oben im Post Editor oder Site Editor:

Oben in der Palette befindet sich ein Suchfeld, das die Einträge während der Eingabe filtert. Du kannst Einträge mit der Maus oder nur mit der Tastatur auswählen.

Eine unvollständige Liste der Befehle, die in der Palette sofort verfügbar sind, sind:

• Vorlage bearbeiten (wenn du eine Seite bearbeitest)
• Zurück zur Seite (nach der Bearbeitung der Vorlage)
• Vorlage zurücksetzen
• Vorlagenteil zurücksetzen
• Stile auf Standard zurücksetzen
• Vorlage löschen
• Vorlagenteil löschen
• Einstellungen Seitenleiste umschalten
• Blockinspektor einschalten
• Spotlight-Modus ein- und ausschalten
• Ablenkungsfrei ein- und ausschalten
• Obere Symbolleiste umschalten
• Code-Editor öffnen
• Code-Editor verlassen
• Listenansicht ein- und ausschalten
• Vollbildmodus ein- und ausschalten
• Editor-Einstellungen
• Tastaturkürzel
• Blockbreadcrumbs ein-/ausblenden
• CSS anpassen
• Stilüberarbeitungen
• Stile öffnen
• Stile zurücksetzen
• Website anzeigen
• Vorlagen anzeigen
• Vorlagenteile ansehen
• Navigationsmenüs öffnen
• Muster umbenennen
• Muster duplizieren
• Alle benutzerdefinierten Vorlagen verwalten

Und natürlich können Entwickler ihre eigenen Muster hinzufügen, um ihre WordPress-Anwendungen zu verbessern. Beginnen wir mit dem Prozess!

Was du brauchst, um loszulegen

Die Comand Palette API wird von JavaScript-Paketen unterstützt, die du mit npm, dem Node Package Manager, zu deinen Projekten hinzufügst. Du brauchst eine WordPress-Installation (lokal oder remote), auf die du über das Terminal zugreifen kannst, um Befehle in der Kommandozeile auszuführen.

Um die Sache ins Rollen zu bringen, haben wir ein WordPress-Plugin erstellt, das den Code enthält, der die Befehlspalette verändert. Das Plugin macht nicht viel mehr, als einen benutzerdefinierten Beitragstyp zu erstellen, den wir Produkte nennen. (Alles, was du wissen musst, um mit einem rudimentären Plugin so weit zu kommen, findest du in unserer Anleitung zum Erstellen von benutzerdefinierten Beitragstypen).

Wenn unser Produktseiten-Plugin aktiviert ist, erhalten wir einen Dashboard-Menüeintrag zum Erstellen und Durchsuchen von Produktbeiträgen:

Unser Plugin hat keine einzigartige Unterstützung durch die WordPress-Befehlspalette. Die Standardfunktionalität der Befehlspalette bietet zum Beispiel Shortcuts, um neue WordPress-Beiträge und -Seiten hinzuzufügen:

Allerdings weiß die Befehlspalette nichts über die Erstellung unserer Produktseiten. Wir fügen diese Funktion unten hinzu.

Hinzufügen eines eigenen Befehls zur Befehlspalette

Im Moment besteht unser gesamtes Produktseiten-Plugin aus einer einzigen PHP-Datei, die wir products.php genannt und in wp-content/plugins/products platziert haben. Abgesehen von der Aktivierung des Post-Typs Produkte tut sie noch nichts. Wir werden auf diese Datei zurückkommen, wenn wir die JavaScript-gestützte API für die Befehlspalette eingerichtet haben.

Installieren der API-Abhängigkeiten

Wir beginnen damit, eine allgemeine Datei package.json im Verzeichnis products zu erstellen, indem wir im Terminal in dieses Verzeichnis wechseln und den Befehl ausführen:

npm init

Es ist nicht wichtig, wie du auf die Aufforderungen von init reagierst, aber du solltest einen Namen und eine Beschreibung für deine Anwendung angeben. (Wir haben Produkte als Namen und Produktseiten als Beschreibung verwendet.)

Nachdem du nun ein Grundgerüst der Datei package.json erstellt hast, öffne sie in deinem bevorzugten Code-Editor und füge die folgenden Zeilen irgendwo im Textkörper ein, vielleicht nach der Zeile description:

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

Noch im Terminal können wir die Abhängigkeit für das WordPress Scripts – @wordpress/scripts – Paket hinzufügen:

npm install @wordpress/scrips --save

Dadurch werden die folgenden Zeilen in die Datei package.json unseres Plugins eingefügt:

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

Jetzt können wir npm run build ausführen, aber der Prozess erwartet eine index.js Datei (auch wenn sie leer ist) im src Verzeichnis unseres Plugins. Wir erstellen diese und führen den Build mit den folgenden Befehlen im Terminal aus:

mkdir src
touch src/index.js
npm run build

Dadurch wird ein build Verzeichnis für unser Produktions-JavaScript (index.js) erstellt. Wie die Datei in src wird auch diese Datei zunächst leer sein. Außerdem solltest du im Verzeichnis build die Datei index.asset.php finden.

Wenn alles korrekt gebaut zu sein scheint, fügen wir die restlichen Abhängigkeiten hinzu, indem wir diese Befehle im Terminal im Stammverzeichnis des Plugins ausführen:

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

In der Datei package.json sollte der Block mit den Abhängigkeiten jetzt etwa so aussehen:

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

Das neu hinzugefügte WordPress Commands-Paket dient als Schnittstelle zur Befehlspalette, das Plugins-Paket kennt sich mit WordPress-Plugins aus und das Icons-Paket ermöglicht die Auswahl und Anzeige von Bildern aus einer vorgefertigten Bibliothek.

Hinzufügen eines Command Palette Hooks und Einreihen unseres Skripts

Jetzt, wo wir unsere Ressourcen haben, müssen wir unserer leeren Datei src/index.js einen Code hinzufügen, der sich in die Befehlspalette einklinkt. Öffne die Datei in deinem Editor und füge diesen Code ein:

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;

Einige Anmerkungen zum obigen Code:

• Ein einzelnes Symbol (das Pluszeichen) wird aus dem Icons-Paket importiert.
• useComand() ist der Haken, mit dem der Befehl registriert wird.
• Die Beschriftung Neues Produkt hinzufügen ist der Text, der ein Eintrag in der Befehlspalette wird.
• Die callback (was passiert, wenn ein Nutzer auf Neues Produkt hinzufügen klickt) öffnet einfach die WordPress-PHP-Datei für neue Beiträge mit einem Query-String, der einen Produktbeitrag angibt. (Bis jetzt war das das Einzige, was unser Plugin tun konnte).

Jetzt ist es an der Zeit, das Plugin fertigzustellen:

npm run build

Nach der Erstellung wird build/index.js unser Produktions-JavaScript enthalten. Der letzte Schritt besteht darin, das Skript in WordPress einzureihen. Dazu fügen wir den folgenden Code am Ende unserer products.php Datei ein (die einfache PHP-Datei, die das Plugin einrichtet und den Product Post Type definiert):

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

Wenn das erledigt ist, kehren wir zum WordPress-Editor zurück und aktivieren die Befehlspalette. Nachdem wir den entsprechenden Suchtext eingegeben haben, sollte Neues Produkt hinzufügen in der Liste erscheinen:

Wenn wir Neues Produkt hinzufügen aus der Palette wählen, öffnet WordPress den Beitragseditor auf dem Pfad, der für unseren neuen Inhaltstyp Produkt reserviert ist.

Zusammenfassung

Die Command Palette API bietet eine flexible Möglichkeit, deine Anwendung mit einer der interessantesten Funktionen von WordPress zu verbinden. Wir würden gerne erfahren, ob du die API schon genutzt hast und was du damit erreicht hast.

Entwickler wie du können sich auf Kinsta verlassen, wenn es darum geht, leistungsstarke Managed WordPress Hosting-Lösungen anzubieten, die performante und skalierbare Projekte unterstützen.

Teste Kinsta noch heute und finde heraus, wie wir dir helfen können, erstklassige WordPress-Websites zu erstellen!

Steve Bonisteel Kinsta

Steve Bonisteel is Technical Editor bij Kinsta. Hij begon zijn schrijverscarrière als verslaggever en achtervolgde ambulances en brandweerwagens. Sinds eind jaren negentig schrijft hij over internetgerelateerde technologie.