Laten we aannemen dat we een thema hebben opgebouwd met een aantal Customizer-instellingen en -besturingselementen waarmee uw themagebruikers een aantal dingen over de front-end van het thema kunnen aanpassen, zoals de titel van de website, slogan en kleur.

Sommige van onze gebruikers zijn zich er misschien niet meteen van bewust dat ze deze specifieke delen van het thema kunnen aanpassen, vooral als ze begraven liggen onder meerdere panelen en secties. Dus hoe kunnen we het voor hen sneller maken om het thema aan te passen?

WordPress.com heeft onlangs bewerkknoppen toegevoegd aan enkele bewerkbare gebieden, die onmiddellijk merkbaar zijn bij het starten van de Customizer. Wanneer de gebruiker op deze knoppen klikt, worden de respectieve besturingselementen weergegeven.

De nieuwe knop "Bewerken" in het venster Customizer Preview op WordPress.com, 

Dit is een mooie UX-verbetering die we ook met de Customizer JavaScript-API op ons thema kunnen bereiken. En je zult merken dat dat niet zo ingewikkeld is als je je misschien had voorgesteld. Laten we even kijken hoe het werkt.

voorwaarden

In de laatste zelfstudie hebben we alleen de code geschreven in de customizer-control.js bestand, dat van invloed is op de back-endinterfaces van de Customizer. In deze zelfstudie gebruiken we ook het andere bestand, customizer-preview.js, die is geladen in het voorbeeldvenster. U moet deze twee bestanden hebben gemaakt en geladen. Anders stel ik voor dat je de eerste zelfstudie van deze serie volgt voordat je verder gaat.

Een bewerkknop maken

Allereerst voegen we er een paar toe Bewerk knoppen naast de sitetitel.

 "rel =" home ">     

Gebruik makend van is_customize_preview (), deze knop wordt alleen getoond in het venster Customizer Preview. Elk van deze knoppen is toegewezen met een klasse naam, .customizer bewerken, waardoor we deze knoppen kunnen selecteren en binden met een Klik Evenement later.

Verder hebben we deze knoppen ook toegevoegd met een data-control attribuut met de naam of id van de geregistreerde instellingen in de Customizer. De naam in dit kenmerk helpt ons bij het bepalen van de juiste instelling en bediening die later voor de gebruiker kunnen worden gebruikt.

Twee bewerkknoppen om de titel en de titelkleur aan te passen.

Omdat presentatie momenteel niet onze eerste zorg is, zien onze twee "Bewerk" -knoppen in het Voorbeeldvenster er niet zo mooi uit als die in WordPress.com. U kunt de stijlen toevoegen op een manier die overeenkomt met uw themaontwerp als geheel.

Een aangepast evenement definiëren

Vervolgens definiëren we een aangepast evenement; een gebeurtenis die aangeeft dat op een van deze knoppen is geklikt. Voeg de volgende code toe in de customizer-preview.js het dossier.

var aanpassen = wp.aanpassen; $ (document.body) .on ('click', '.customizer-edit', function () customize.preview.send ('preview-edit', $ (this) .data ('control')); );

De code bindt elk van deze knoppen met de Klik Evenement, met behulp van de  .preview.send () methode om een ​​evenement te casten. De .preview.send () methode neemt twee parameters, namelijk de aangepaste gebeurtenisnaam en het argument. In ons geval hebben we een nieuw evenement gedefinieerd met de naam voorvertoning bewerken, en geef een argument door met gegevens die zijn opgehaald uit de data-control kenmerk van de knop.

Luisteren naar het aangepaste evenement

We kunnen luisteren naar een aangepaste gebeurteniscast van de .preview.send () methode via een andere Customizer-methode genaamd .previewer.bind ()-let op de previewer met er. Deze methode is vergelijkbaar met de jQuery .op() Methode, waarin we de naam van de gebeurtenis definiëren om te beluisteren en een functie die wordt uitgevoerd wanneer het evenement wordt geactiveerd. Toevoegen .previewer.bind () in de customizer-control.js, als volgt.

var aanpassen = wp.aanpassen; customize.previewer.bind ('preview-edit', functie (gegevens) );

Vervolgens transformeren we de doorgegeven gegevens in een JSON-compliance-indeling, selecteren een besturingselement op basis van de naam uit de gegevens gehaald en focus op het bedieningselement met behulp van de Customizer .focus() methode.

var aanpassen = wp.aanpassen; customize.previewer.bind ('preview-edit', functie (gegevens) var data = JSON.parse (data); var control = customize.control (data.name); control.focus (););

Nu, zoals je hieronder kunt zien, wanneer we bijvoorbeeld klikken op de knop "Tekst bewerken", wordt de instelling "Sitetitel" weergegeven en wordt de cursor in de invoer geconcentreerd.

De knop Bewerken in actie.

Verder, als we kijken naar de broncode daarin, de .focus() methode accepteert een parameter genaamd completeCallback. Deze parameter wordt achtereenvolgens uitgevoerd na de .focus() functie wordt uitgevoerd. We kunnen deze parameter gebruiken om bijvoorbeeld een animatie-effect toe te voegen.

customize.previewer.bind ('preview-edit', functie (gegevens) var data = JSON.parse (data); var control = customize.control (data.name); control.focus (completeCallback: function ()  setTimeout (function () control.container.addClass ('shake animated');, 300);););

De algehele ervaring voelt nu levendiger aan.

Invoerelement uitgebreid met CSS-animatie

Afsluiten

We hebben een aantal van de JavaScript-API's van Customizer genoemd:

• .preview.send () methode om een ​​aangepaste gebeurtenis te casten.
• .previewer.bind () methode om de Customizer te binden met een aangepaste gebeurtenis.
• .focus() methode om te focussen op een invoerelement van een besturingselement, evenals de completeCallback parameter.

In deze zelfstudie gebruiken we deze methoden om onze themagebruikers in staat te stellen de titel van de sitetitel snel te bewerken door op de knop "Tekst bewerken" in het voorbeeldvenster te klikken.

We hebben nog steeds één knop om de bedieningselementen voor kleuren weer te geven. Maar ik zal het hier laten als een uitdaging; gebruik dezelfde drie methoden om de functie "Kleur bewerken" te maken. Neem in geval van twijfel een kijkje in de broncode.