La oss anta at vi har bygget et tema med en rekke Tilpasningsinnstillinger og -kontroller som tillater at temabrukerne tilpasser et antall ting på temafronten, for eksempel nettstedets tittel, tagline og farge.

Noen av våre brukere kan imidlertid ikke umiddelbart være klar over at de kan tilpasse disse delene av temaet, spesielt hvis de er begravet under flere paneler og seksjoner. Så hvordan kan vi gjøre det raskere for dem å tilpasse temaet?

WordPress.com har nylig lagt til Rediger knapper på noen redigerbare områder, som umiddelbart kan merkes ved lanseringen av Customizer. Når brukeren klikker på disse knappene, vil den vise de respektive kontrollene.

Den nye "Rediger" -knappen i vinduet Tilpasser forhåndsvisning på WordPress.com, 

Dette er en fin UX-forbedring som vi faktisk kan oppnå med Customizer JavaScript API på vårt tema. Og du vil oppdage at det ikke er så komplisert som du kanskje har forestilt deg. Så, la oss ta en rask titt på hvordan det fungerer.

Forutsetninger

I den siste opplæringen skrev vi bare kode i tilpasning-control.js fil, som påvirker Backer-grensesnittet til Customizer. I denne opplæringen vil vi også bruke den andre filen, tilpasning-preview.js, som er lastet i forhåndsvisningsvinduet. Du bør ha disse to filene opprettet og lastet. Ellers foreslår jeg at du følger den første opplæringen i denne serien før du fortsetter videre.

Opprette en redigerings-knapp

Først av alt, legger vi til et par Redigere knapper ved siden av nettstedstittel.

 "rel =" home ">     

Ved hjelp av is_customize_preview (), Denne knappen vil bare bli vist i vinduet Tilpasser forhåndsvisning. Hver av disse knappene er tilordnet en klasse Navn, .tilpasser redigere, som gjør at vi kan velge disse knappene og binde dem med en klikk Event senere.

Videre har vi også lagt til disse knappene med a data-styrings attributt som inneholder navnet eller IDen til de registrerte innstillingene i Tilpassingsprogrammet. Navnet i dette attributtet hjelper oss med å bestemme riktig innstilling og kontroll for å betjene brukeren senere.

To rediger knapper for å tilpasse tittel og tittelfarge.

Siden presentasjonen ikke er vår primære bekymring for nå, ser våre to "Rediger" -knapper i Preview-vinduet ikke så bra ut som de i WordPress.com. Du kan legge stilene på en måte som samsvarer med temaet ditt som helhet.

Definere en tilpasset hendelse

Deretter definerer vi en tilpasset hendelse; En hendelse som forteller en av disse knappene er klikket. Legg til følgende kode i tilpasning-preview.js fil.

var tilpasse = wp.customize; $ (document.body) .on ('klikk', '.customizer-edit', funksjon () customize.preview.send ('forhåndsvisning-redigere', $ (dette) .data ('kontroll')) );

Koden binder hver av disse knappene med klikk Hendelse ved bruk av  .preview.send () metode for å kaste en hendelse. De .preview.send () Metoden tar to parametere, nemlig det egendefinerte hendelsesnavnet og argumentet. I vårt tilfelle har vi definert en ny hendelse som heter forhåndsvisning redigere, og send et argument med data hentet fra data-styrings attributten til knappen.

Lytter til den egendefinerte hendelsen

Vi kan lytte til en tilpasset hendelse fra .preview.send () Metode gjennom en annen Customizer-metode som kalles .previewer.bind ()-Legg merke til forhåndsvisningen med er. Denne metoden ligner på jQuery .på() Metode, der vi definerer hendelsesnavnet for å lytte og en funksjon som vil løpe når hendelsen utløses. Legg til .previewer.bind () i tilpasning-control.js, som følger.

var tilpasse = wp.customize; customize.previewer.bind ('forhåndsvisning-redigering', funksjon (data) );

Deretter forvandler vi dataene til et JSON-kompatibilitetsformat, velg et kontrollelement basert på Navn hentet ut av dataene, og fokusere på kontrollelementet ved hjelp av Customizer .fokus() metode.

var tilpasse = wp.customize; customize.previewer.bind ('forhåndsvisning-rediger', funksjon (data) var data = JSON.parse (data); var control = customize.control (data.name); control.focus (););

Nå, som du kan se nedenfor, når vi klikker på, for eksempel "Rediger tekst" -knappen, vil den vise innstillingen "Site Title" og fokusere markøren i inngangen.

Rediger-knappen i handling.

Videre, hvis vi ser på kildekoden deri, .fokus() Metoden aksepterer en parameter som kalles completeCallback. Denne parameteren går fortløpende etter .fokus() funksjonen utføres. Vi kan bruke denne parameteren, for eksempel for å legge til en animasjonseffekt.

customize.previewer.bind ('forhåndsvisning-redigering', funksjon (data) var data = JSON.parse (data); var control = customize.control (data.name); control.focus (completeCallback: function ()  setTimeout (funksjon () control.container.addClass ('shake animated');, 300);););

Den samlede opplevelsen føles nå mer levende.

Inndataelementet forbedret med CSS-animasjon

Wrapping Up

Vi har nevnt et antall tilpasset JavaScript-APIer:

• .preview.send () metode for å kaste en tilpasset hendelse.
• .previewer.bind () metode for å binde tilpasseren med en tilpasset hendelse.
• .fokus() metode for å fokusere på et inngangselement av en kontroll så vel som completeCallback parameter.

I denne opplæringen bruker vi disse metodene til at våre tema brukere kan redigere nettstedstitelteksten raskt ved å klikke på "Rediger tekst" -knappen i forhåndsvisningsvinduet.

Vi har fortsatt en knapp som gjenstår for å få opp fargekontrollene. Men jeg vil forlate det her som en utfordring; Bruk de samme tre metodene for å gjøre "Rediger farge" -funksjonen. Når du er i tvil, vær så snill å ta et glimt på kildekoden.