Customizer-JavaScript-APIer Panel, Seksjon og Kontroll

I dag vil vi gjenoppta diskusjonen vår om JavaScript API i WordPress Customizer. I den siste opplæringen forberedte vi og lastet inn to JavaScript-filer, tilpasning-control.js og tilpasning-preview.js, som vil tillate oss å samhandle med JavaScript API fra Customizer back-end og front-end eller Previewer-grensesnittet. Så vær sikker på å følge den siste opplæringen før du fortsetter videre.

I denne opplæringen vil vi fokusere på grensesnittet som komponerer Back-end Customizer, Paneler, Settings og Controls. Igjen, hvis disse tre tingene er noe nytt for deg, anbefaler jeg at du følger vår tidligere komplette serie: En guide til WordPress Theme Customizer.

Grunnleggende interaksjon med Customizer JavaScript API

Bortsett fra PHP API, som jeg er sikker på at noen av dere er kjent, er paneler, seksjoner og kontroller også tilgjengelige via JavaScript API. På samme måte kan vi endre dem. Her er noen eksempler.

Velg en bestemt kontroll, seksjon eller et panel:

// Velg en kontroll. wp.customize.control ('blogname'); // Velg en seksjon. wp.customize.section ('title_tagline'); // Velg et panel. wp.customize.panel ('nav_menus'); 

Omorganiser deres visningsordre.

// Endre en kontrollprioritet wp.customize.control ('blogname') .priority (30); // Endre en seksjonsprioritet wp.customize.section ('title_tagline') .priority (100); // Endre en panelprioritet wp.customize.panel ('nav_menus') .priority (200); 

Flytt "Site Title" kontrollen til for eksempel farge seksjon.

wp.customize.control ('blogname') .section ('farger'); 

Veksle synligheten.

// Deaktiver / skjul 'Site Title' kontroll wp.customize.control ('blogname') .toggle (); 

Du kan til og med analysere kontroll-DOM-treet, noe som ellers ville være innviklet i PHP.

wp.customize.control ('blogname') .container.find ('customize-control-title'); 

Dette er en håndfull ting du kan gjøre med panelene, delene og kontrollene i Customizer JavaScript API. La oss nå sette disse sammen til en mer meningsfylt brukeropplevelse.

Bytte seksjoner og kontroller

På dette tidspunktet bør vi ha totalt fire kontroller. To kontroller, «Site Title» -inngangen og "Vis nettstedstittel" -boks, er i delen "Site Identity". De to andre er en fargeplukker. De bor i "Farger" -delen, og vil angi tekstfargene "Site Title" og fargenivåfarge.

Våre fire kontroller i Customizer

Vår plan her er å vise fargekontrollene bare når avkrysningsruten "Vis nettstedstittel" er merket, siden det ikke er grunn til å vise disse sidetittelfargekontrollene når nettstedstittelen faktisk er deaktivert.

I tillegg kan denne tilnærmingen hjelpe oss med å avklare Customizer ved å fjerne irrelevante kontroller, seksjoner og paneler fra sidelinjen Tilpasser. Hvis dette høres ut som noe du vil oppnå, la oss bare komme i gang.

Deaktiverer et kontrollinputfelt

Til å begynne med, åpne vår JavaScript-fil, tilpasning-control.js. Deretter legger du til kodelinjene i Customizer klar begivenhet:

wp.customize.bind ('ready', funksjon () // Klar? var tilpasse = dette; // Tilpass objektalias. tilpasse ('display_blogname', funksjon (innstilling) );); 

Her har vi satt et alias for dette søkeord, som refererer til Customizer JavaScript API. Deretter henger vi inn en anonym funksjon i display_blogname Innstilling siden alle tilpasninger vi skal utføre i Tilpassingsprogrammet, vil være i forhold til verdien av denne bestemte innstillingen.

Deretter velger vi inngang feltet i "Nettstedtittel" -innstillingen.

wp.customize.bind ('ready', funksjon () // Klar? var tilpasse = dette; // WordPress tilpasse objektalias. tilpasse ('display_blogname', funksjon (innstilling) var siteTitleInput = customize.control ') .container.find (' input '); // Site Title input.);); 

Vi kan deaktivere inngangen når display_blogname boksen er merket av.

wp.customize.bind ('ready', funksjon () // Klar? var tilpasse = dette; // Tilpass objekt alias. tilpasse ('display_blogname', funksjon (verdi) var siteTitleInput = customize.control ('blogname' ) .container.find ('input'); // Site Title input. / ** * Deaktiver Input elementet * / // 1. Ved lasting. siteTitleInput.prop ('deaktivert',! value.get ()); // .get () verdi // 2. Binding til verdiendring. value.bind (funksjon (til) siteTitleInput.prop ('deaktivert',! til);););); 

Som du ser ovenfor bruker vi jQuery .rekvisitt() Metode for å angi HTML funksjonshemmet eiendom til inngangselementet. Vi bruker .få() metode for å hente nåverdien. Til slutt bruker du .binde() metode, vi lytter til verdiendringen og setter funksjonshemmet eiendom tilsvarende.

Venstre: Aktivert "Site Title" -felt. Høyre: Inndatafelt for funksjonshemmede "Site Title". Merk av i avmerkingsboksen.

Bytte synlighet

Nå fortsetter vi med koden for å skifte synligheten til fargeplukkerne som setter "Site Title" -farger. Som vi har planlagt, fjerner vi fargeplukkerne når avkrysningsruten er merket av og vis dem igjen når det er tikket.

Til å begynne med grupperer vi innstillings-IDene for fargeplukkere sammen i en matrise.

wp.customize.bind ('ready', funksjon () // Klar? var tilpasse = dette; // Tilpass objekt alias. tilpasse ('display_blogname', funksjon (verdi) // ... tidligere koder ... var colorControls = [ 'header_textcolor', 'header_textcolor_hover'];);); 

Deretter gjenkjenner vi en funksjon over disse kontroll IDene som vil skifte synlighet ved hjelp av jQuery .veksle() metode.

wp.customize.bind ('ready', funksjon () // Klar? var tilpasse = dette; // Tilpass objekt alias. tilpasse ('display_blogname', funksjon (verdi) // ... tidligere koder ... var colorControls = [ 'header_textcolor', 'header_textcolor_hover']; $ .each (colorControls, funksjon (indeks, id) customize.control (id, funksjon (kontroll) / ** * Toggle funksjon * / var toggle = funksjon (til) kontroll .toggle (til);; // 1. Ved lasting. skift (value.get ()); // 2. På verdiendring. value.bind (bytt);););); ; 

Strukturen til koden ovenfor ligner vår tidligere kode, som deaktiverer inngangselementet. Her har vi valgt hver kontroll i gruppen ved hjelp av .styre() metode som vi allerede har vist tidligere i denne opplæringen. Deretter har vi en funksjon for å veksle hver kontroll ved hjelp av jQuery .veksle() metode, og kjør det på Tilpassingsside-initiering, så vel som når verdien endres.

Avkrysningsruten Vis skjermtittel unticked, Inntasting av nettstedstittel er nedtonet (deaktivert), og de respektive fargeplukkere i farge-delen er nå skjult.

Hva blir det neste

I denne veiledningen har jeg vist deg et enkelt eksempel på hvordan du bruker Customizer JavaScript API for å forbedre brukeropplevelsen i Customizer. Og det er noen ting vi kan gjøre for å forbedre det videre, for eksempel å fjerne "Fargene" -delen hvis det ikke er noen kontroll som skal vises i seksjonen, og justere fargeskjermen i "Innstillinger for hakktekstfarge: Hover" etter verdi i "Header Text Color" innstillingen.

I neste opplæring i denne serien skal vi utfordre oss med et litt mer komplekst eksempel. Vi skal bygge en "bro" som vil tillate at forhåndsvisningsvinduet til Tilpasning kan samhandle med kontrollpanelet i back-end. Så når en bruker klikker på for eksempel nettstedstittelen i forhåndsvisningsvinduet, vil Tilpasser glide i den respektive inngangen til brukeren.

Følg med!