Zo kan je met je plugin het WordPress Command Palette aanpassen

ict

[ad_1]

Met de release van WordPress 6.3 werd het Command Palette geïntroduceerd, een feature die snelle toegang biedt tot acties die vaak worden gebruikt door degenen die inhoud of thema’s bewerken binnen de beheerinterface van het CMS.

Met het menu-achtige Command Palette kunnen gebruikers de beschikbare taken filteren met behulp van een eenvoudige zoekinterface en opties selecteren om door de gebruikersinterface van de editor te navigeren, voorkeuren in te stellen, stijlen te transformeren, blokken te manipuleren en zelfs te beginnen met het maken van nieuwe berichten en pagina’s.

Er is ook een API beschikbaar die JavaScript ondersteunt, waarmee ontwikkelaars functionaliteit kunnen toevoegen aan het Command Palette. De maker van een WordPress plugin die webformulieren genereert kan bijvoorbeeld een Command Palette-item toevoegen waarmee gebruikers naar een pagina worden geleid die de resultaten van formulierinzendingen laat zien.

De ontwikkelaar van een plugin die veel shortcodes gebruikt kan een item in het Command Palette koppelen aan een pop-up “spiekbriefje” om gebruikers eraan te herinneren hoe ze die codes moeten gebruiken.

De mogelijkheden zijn eindeloos en we geven je een voorproefje van hoe de API werkt om je te inspireren om het Command Palette te gebruiken in je volgende WordPress plugin project.

WordPress Command Palette basis

Je start het Command Palette door de sneltoets Cmd + k (Mac) of Ctl + k (Windows en Linux) te gebruiken of door te klikken op het titelveld bovenaan de Post Editor of Site Editor:

Screenshot van het WordPress Command Palette met het zoekveld gemarkeerd.
Het Command Palette wordt geactiveerd binnen de Post Editor.

De bovenkant van het palet bevat een zoekveld dat items filtert terwijl je typt. Je kunt items selecteren met de muis of alleen met het toetsenbord.

Een gedeeltelijke lijst van commando’s die direct beschikbaar zijn in het palet bevat:

  • Template bewerken (bij het bewerken van een pagina)
  • Terug naar pagina (na het bewerken van de template)
  • Template terugzetten
  • Template part resetten
  • Stijlen terugzetten naar standaard
  • Template verwijderen
  • Template part verwijderen
  • Togglen zijbalk instellingen
  • Togglen Block Inspector
  • Togglen Spotlight modus
  • Togglen Distraction Free modus
  • Togglen bovenste werkbalk
  • Code-editor openen
  • Code-editor afsluiten
  • Togglen List View
  • Togglen Full Screen modus
  • Editor voorkeuren
  • Shortcut toetsenbord
  • Breadcrumbs block tonen/verbergen
  • CSS aanpassen
  • Stijl revisies
  • Stijlen openen
  • Stijlen resetten
  • Site weergeven
  • Templates bekijken
  • Template parts bekijken
  • Navigatiemenu’s openen
  • Pattern hernoemen
  • Pattern dupliceren
  • Alle custom patterns beheren

En natuurlijk kunnen ontwikkelaars hun eigen patterns toevoegen om hun WordPress applicaties te verbeteren. Laten we beginnen met het proces!

Wat je nodig hebt om te beginnen

De Comand Palette API wordt ondersteund door JavaScript pakketten die je aan je projecten toevoegt met npm, de Node Package Manager. Je hebt een installatie van WordPress nodig (lokaal of op afstand) die je kunt benaderen via de terminal om commando’s uit te voeren op de commandoregel.

Om te beginnen hebben we een WordPress plugin gemaakt die de code bevat die het Command Palette aanpast. De plugin doet niet veel meer dan een custom post type maken dat we Products noemen. (Alles wat je moet weten om zo ver te komen met een rudimentaire plugin is beschikbaar in onze gids voor het maken van custom post types).

Wanneer onze Product Pages plugin is geactiveerd, krijgen we een Dashboard menu-item voor het maken en doorbladeren van Product posts:

Een screenshot van de WordPress Plugins pagina en een pijl die wijst naar het item voor een aangepast content type Producten in het Admin-menu.
Onze Product Pages plugin biedt een nieuw content type voor berichten met de naam Products.

Onze plugin heeft geen unieke hulp van het WordPress Command Palette. De standaard functionaliteit van het Command Palette biedt bijvoorbeeld shortcuts om nieuwe WordPress berichten en pagina’s toe te voegen:

Screenshot van het WordPress Command Palette met de entries voor het maken van berichten en pagina's.
De shortcut om nieuwe berichten of pagina’s toe te voegen worden veel gebruikt in het Command Palette.

Het Command Palette weet echter niets over het maken van onze Product pagina’s. Die functionaliteit voegen we hieronder toe.

Een custom opdracht toevoegen aan het Command Palette

Op dit moment bestaat onze hele Product Pages plugin uit één PHP bestand dat we products.php hebben genoemd en op wp-content/plugins/products hebben geplaatst. Behalve dat het het posttype Products inschakelt, doet het nog niets. We komen op dit bestand terug nadat we de door JavaScript aangestuurde API voor het Command Palette hebben ingesteld.

[ad_2]

https://kinsta.com/nl/blog/aanpassen-command-palette/