Share
WordPress Customizer har utvecklats aktivt sedan starten. API: erna utvecklas ständigt, inklusive JavaScript API. Det är dock ett av de minst dokumenterade API-erna i WordPress Codex. Därför finns det bara några omfattande register som visar hur man använder JavaScript API praktiskt taget.
Hantera JavaScript API i WordPress Customizer kan faktiskt göra det möjligt för oss att tjäna en mer övertygande realtidserfarenhet medan du anpassar temat bortom att ställa om ändringen från kontrollen till förhandsgranskningsfönstret.
Du kanske är bekant med hur anpassningsverktyget JavaScript API används för att göra en ändring i förhandsgranskningsfönstret i realtid. För att göra så ställer vi in inställningen transport läge till skicka meddelande och lägg till motsvarande JavaScript-kod, enligt följande.
Accentsconagua
wp.customize ("blogname", funktion (värde) value.bind (funktion (till) $ ('.site-title a') .text (till);););Vi kan dock även sträcka API: n vidare till att gömma, visa eller flytta en sektion, panel, en kontroll, ändra värdet på en inställning baserat på ett annat inställningsvärde och koppla samman förhandsgranskningen och kontrollinteraktionerna. Och det här är vad vi ska undersöka i denna handledning.
Vi har täckt WordPress Customizer ganska omfattande med en handfull artikel och ett par serier som täcker inlägg och utgåvor av Customizer API.
Jag antar att du har förstått kärnkonceptet för WordPress Customizer, liksom komponenter som Panel, Section, Setting och Control. Annars rekommenderar jag starkt att du spenderar lite tid på våra handledning och videokurser om ämnet innan du går ännu längre.
Till att börja med ska vi undersöka "Inställningar" och "Kontroller" i Anpassningsverktyget som vi har lagt till för syftet med denna handledning. Vi kommer också att titta på koden som sätter dem på plats.
I denna handledning kommer vi att fokusera på webbplatsen "Site Title". Och som du kan se ovan har vi två kontroller: det inbyggda WordPress "Site Title" -fältet och vår anpassade kryssruta för att aktivera eller inaktivera "Site Title". Dessa två kontroller finns i avsnittet "Site Identity". Och på höger sida av bilden är förhandsgranskningen, där du kan se "Site Title" återges.
Dessutom, som du kan se nedan, har vi också två kontroller som finns i avsnittet Färger för att ändra färgstorlek "Site Title" och dess sväva statlig färg.
Vårt tema här är baserat på Underscores, som har all Customizer-relaterad kod placerad i /inc/customizer.php fil.
funktion 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'; // Checkbox för att visa Blogname $ wp_customize-> add_setting ('display_blogname', array ('transport' => 'postMessage',))); $ wp_customize-> add_control ('display_blogname', array ('label' => __ ('Visa webbplatsens titel', 'tuts'), 'section' => 'title_tagline', 'type' => 'kryssrutan' '=> 11,)); // Lägg till huvudtextens färginställning och 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' => __ ('Header Text Color: Hover', 'tuts'), 'section' => 'färger' => '11'))); add_action ('customize_register', 'tuts_customize_register'); Och som du kan se ovan har vi gjort några ändringar av koden och följt vårt behov i denna handledning.
BlogDescription, till 12 så att kryssrutan Inställning, display_blogname, visas under inmatningsfältet "Site Title".display_blogname. Vi ställer in prioritet till 11 som i vårt fall ligger mellan "Site Title" och "Tagline" inmatningsfältet.rubrik standardfärg till # f44336 och den transport skriv till skicka meddelande.header_text_color. På samma sätt ställer vi också prioritet åt 11 så att den syns strax under header_textcolor Miljö.Alla dessa inställningar är inställda med skicka meddelande istället för med refresh. De skicka meddelande alternativet tillåter värdet att transporteras asynkront och visas i förhandsgranskningsfönstret i realtid. Men vi måste också skriva vår egen JavaScript för att hantera förändringen.
Vi behöver skapa två JavaScript-filer: en fil, anpassar-preview.js, att hantera Preview och den andra filen, anpassar-control.js, att hantera kontrollerna i Customizer-panelen.
js ├── customizer-preview.js // 1. Fil för att hantera Preview ├── customizer-control.js // 2. Fil som hanterar kontrollerna ├── navigation.js └── skip-link-focus- fix.js
Inom anpassar-preview.js är följande kod.
(funktion ($) // Koder här.) (jQuery);
Det är för närvarande en tom sluten JavaScript-funktion. Vi kommer att diskutera mer specifikt hur vi förhandsgranskar ändringar i förhandsgranskningsfönstret i nästa handledning i denna serie.
I den andra filen, anpassar-control.js, vi lägger till följande kod:
(funktion ($) wp.customize.bind ("redo", funktion () var anpassa = detta; // Koder här);) (jQuery);Som du kan se ovan kommer vi att pakka in koden i den här filen på Customizer redo händelse. Detta säkerställer att allt inom Customizer är helt klart, inklusive inställningarna, paneler och kontroller, innan vi börjar utföra några anpassade funktioner.
Slutligen, när vi har lagt till koden, laddar vi dessa två JavaScript-filer på två olika platser.
// 1. customizer-preview.js funktion tuts_customize_preview_js () wp_enqueue_script ('tuts_customizer_preview', get_template_directory_uri (). '/Js/customizer-preview.js', array ('Anpassa-förhandsvisning'), null, sant); add_action ('customize_preview_init', 'tuts_customize_preview_js'); // 2. customizer-control.js-funktionen tuts_customize_control_js () wp_enqueue_script ('tuts_customizer_control', get_template_directory_uri (). '/Js/customizer-control.js', array ('anpassa kontroller', 'jquery'), null, Sann ); add_action ('customize_controls_enqueue_scripts', 'tuts_customize_control_js');De anpassar-preview.js filen laddas i fönstret Customizer Preview genom customize_preview_init Handlingskrok. De anpassar-control.js filen laddas i Customizer back-end, där inställnings- och kontrollelementen är tillgängliga via customize_controls_enqueue_scripts Handlingskrok.
WordPress har investerats kraftigt i PHP sedan starten. Således kommer det inte att vara en överraskning att majoriteten av utvecklare som stöder ekosystemet är mer skickliga och bekanta med PHP API: erna än JavaScript API: er.
Det är bara nyligen att det har integrerat JavaScript i stor utsträckning genom Customizer och WP-API. Att fånga JavaScript-API: erna i WordPress Customizer kan vara en ganska utmaning. Som nämnts är det sidan av WordPress som för närvarande är minst dokumenterad. Därför kommer vi att gå igenom detta ämne grundligt.
Under tiden, om du letar efter andra verktyg för att hjälpa dig att bygga upp din växande uppsättning verktyg för WordPress eller för att koden ska studera och bli mer välbevandrad i WordPress, glöm inte att se vad vi har tillgängliga i Envato Marknadsföra.
Här har vi förberett alla väsentliga delar för att arbeta med WordPress JavaScript API. Och vi kommer att sluta här. I nästa del av serien kommer vi att avslöja mer vad som ligger under JavaScript APIs i WordPress och börja skriva funktionella skript som du direkt kan implementera i ditt tema.
Håll dig igång!
