Share
WordPress Customizer har blitt aktivt utviklet siden starten. APIene utvikler seg kontinuerlig, inkludert JavaScript API. Det er imidlertid en av de minst dokumenterte APIene i WordPress Codex. Derfor er det bare noen få omfattende poster som viser hvordan du kan utnytte JavaScript API praktisk talt.
Utnyttelse av JavaScript API i WordPress Customizer kan faktisk gjøre det mulig for oss å betjene en mer overbevisende sanntidsopplevelse mens du tilpasser temaet utover å kaste endringen fra kontroll til forhåndsvisningsvinduet.
Det kan hende du er kjent med hvordan Customizer JavaScript API brukes til å kaste en endring i forhåndsvisningsvinduet i sanntid. For å gjøre det, stiller vi innstillingen transportere modus til postmessage og legg til den tilsvarende JavaScript-koden, som følger.
Accentsconagua
wp.customize ('blogname', funksjon (verdi) value.bind (funksjon (til) $ ('.site-title a') .text (til);););Vi kan imidlertid også strekke API-en videre til for eksempel skjule, vise eller flytte en seksjon, et panel, en kontroll, endre verdien av en innstilling basert på en annen innstillingsverdi, og koble sammen forhåndsvisning og kontroll-interaksjonene. Og dette er hva vi skal se på i denne opplæringen.
Vi har dekket WordPress Customizer ganske mye med en håndfull artikler og et par serier som dekker inn og ut av Customizer APIs.
Jeg antar at du har tatt tak i kjernekonceptet til WordPress Customizer, så vel som komponentene som Panel, Seksjon, Innstilling og Kontroll. Ellers anbefaler jeg sterkt at du bruker litt tid på våre opplæringsprogrammer og videokurser om emnet, før du går videre.
Til å begynne med vil vi undersøke "Innstillinger" og "Kontroller" i Tilpassingsprogrammet som vi har lagt til i forbindelse med denne opplæringen. Vi vil også se på koden som setter dem på plass.
I denne opplæringen vil vi fokusere på nettstedet "Site Title". Og som du kan se over, har vi to kontroller: det innfødte WordPress "Site Title" -feltet og vår egendefinerte boks for å aktivere eller deaktivere "Site Title". Disse to kontrollene ligger i "Site Identity" -delen. Og på høyre side av bildet er forhåndsvisningen, der du kan se "Site Title" blir gjengitt.
Videre, som du kan se nedenfor, har vi også to kontroller som ligger i avsnittet Farger for å endre fargen "Site Title" og dens sveve statlig farge.
Vårt tema her er basert på Underscores, som har all Customizer-relatert kode plassert i /inc/customizer.php fil.
funksjon tuts_customize_register ($ wp_customize) $ wp_customize-> get_setting ('blogname') -> transport = 'postMessage'; $ wp_customize-> get_setting ('blogdescription') -> transport = 'postMessage'; $ wp_customize-> get_control ('blogdescription') -> priority = '12'; $ wp_customize-> get_setting ('header_textcolor') -> default = '# f44336'; $ wp_customize-> get_setting ('header_textcolor') -> transport = 'postMessage'; // Avkrysningsboks for å vise navnenavn $ wp_customize-> add_setting ('display_blogname', array ('transport' => 'postMessage',))); $ wp_customize-> add_control ('display_blogname', array ('label' => __ ('Vis nettstedstittel', 'tuts'), 'section' => 'title_tagline', 'type' => 'avkrysningsboks' '=> 11,)); // Legg til hovedtekstfargeinnstilling og -kontroll. $ wp_customize-> add_setting ('header_textcolor_hover', array ('standard' => '# C62828', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'postMessage')); $ wp_customize-> add_control (ny WP_Customize_Color_Control ($ wp_customize, 'header_textcolor_hover', array ('label' => __ ('Overskrifttekstfarge: Hover', 'tuts'), 'section' => 'farger' => '11'))); add_action ('customize_register', 'tuts_customize_register'); Og som du kan se over, har vi gjort noen endringer i koden, og fulgte vårt behov i denne opplæringen.
BlogDescription, til 12 slik at avkrysningsboksen Innstilling, display_blogname, vises under inntastingsfeltet "Site Title".display_blogname. Vi satte prioritet til 11 som i vårt tilfelle ligger mellom "Site Title" og "Tagline" -feltet.header_text standard farge til # f44336 og transportere skriv til postmessage.header_text_color. På samme måte stiller vi også prioritet til 11 slik at den vises like under header_textcolor Innstilling.Alle disse innstillingene er satt med postmessage i stedet for med forfriske. De postmessage alternativet tillater verdien å bli transportert asynkront og vises i forhåndsvisningsvinduet i sanntid. Vi må imidlertid også skrive vår egen JavaScript for å håndtere endringen.
Vi må lage to JavaScript-filer: en fil, tilpasning-preview.js, å håndtere Preview og den andre filen, tilpasning-control.js, å håndtere kontrollene i Customizer-panelet.
js ├── customizer-preview.js // 1. Fil for å håndtere Preview ├── customizer-control.js // 2. Fil for å håndtere kontrollene ├── navigation.js └── skip-link-focus- fix.js
Innenfor tilpasning-preview.js er følgende kode.
(funksjon ($) // koder her.) (jQuery);
Det er for tiden en tom vedlagt JavaScript-funksjon. Vi vil diskutere mer spesifikt hvordan vi forhåndsviser endringer i Preview-vinduet i neste opplæring i denne serien.
I den andre filen, tilpasning-control.js, vi legger til følgende kode:
(funksjon ($) wp.customize.bind ('ready', funksjon () var tilpasse = dette; // koder her);) (jQuery);Som du kan se over, vil vi pakke inn koden i denne filen på Tilpasseren klar begivenhet. Dette vil sikre at alt i Customizer er fullt klar, inkludert Innstillinger, Paneler og Kontroller, før vi begynner å utføre noen tilpassede funksjoner.
Til slutt, når vi har lagt til koden, laster vi disse to JavaScript-filene på to forskjellige steder.
// 1. customizer-preview.js funksjon tuts_customize_preview_js () wp_enqueue_script ('tuts_customizer_preview', get_template_directory_uri (). '/Js/customizer-preview.js', array ('tilpasse forhåndsvisning'), null, true); add_action ('customize_preview_init', 'tuts_customize_preview_js'); // 2. customizer-control.js funksjon tuts_customize_control_js () wp_enqueue_script ('tuts_customizer_control', get_template_directory_uri (). '/Js/customizer-control.js', array ('tilpasse kontroller', 'jquery'), null, sant); add_action ('customize_controls_enqueue_scripts', 'tuts_customize_control_js');De tilpasning-preview.js filen vil bli lastet inn i vinduet Tilpasser forhåndsvisning via customize_preview_init Handlingskrok. De tilpasning-control.js filen vil bli lastet inn i Customizer-back-end, der innstillings- og kontrollelementene er tilgjengelige gjennom customize_controls_enqueue_scripts Handlingskrok.
WordPress har vært sterkt investert i PHP siden starten. Dermed vil det ikke være en overraskelse at flertallet av utviklere som støtter økosystemet, er mer dyktige og kjent med PHP APIs enn JavaScript APIs.
Det er bare nylig at det har integrert JavaScript omfattende gjennom Tilpasningsverktøy og WP-API. Å gripe JavaScript-APIene i WordPress Customizer kan være ganske utfordrende. Som nevnt, er det siden av WordPress som for øyeblikket er minst dokumentert. Derfor vil vi gjennomgå dette emnet grundig.
I mellomtiden, hvis du leter etter andre verktøy for å hjelpe deg med å bygge ut ditt voksende sett med verktøy for WordPress eller koden for å studere og bli mer kjent med WordPress, ikke glem å se hva vi har tilgjengelig i Envato Marked.
Her har vi utarbeidet alle viktige elementer for å jobbe med WordPress JavaScript APIs. Og vi vil ende her. I neste del av serien vil vi avdekke mer hva som ligger under JavaScript APIs i WordPress, og begynn å skrive funksjonelle skript som du umiddelbart kan implementere i temaet ditt.
Følg med!
