Share
De WordPress Customizer is vanaf het begin actief ontwikkeld. De API's zijn voortdurend aan het evolueren, inclusief de JavaScript-API. Het is echter een van de minst gedocumenteerde API's in de WordPress Codex. Vandaar dat er slechts enkele uitgebreide records zijn die aantonen hoe de JavaScript-API gebruikt kan worden bijna.
Door gebruik te maken van de JavaScript-API in de WordPress Customizer kunnen we daadwerkelijk een interessantere realtime-ervaring bieden terwijl we het thema verder aanpassen dan de wijziging van het besturingselement naar het voorbeeldvenster te casten.
U bent wellicht bekend met de manier waarop de JavaScript-API van Customizer wordt gebruikt om in realtime een wijziging in het voorbeeldvenster door te voeren. Om dit te doen, stellen we de instelling in vervoer- modus naar postMessage en voeg de bijbehorende JavaScript-code als volgt toe.
Accentsconagua
wp.customize ('blognaam', functie (waarde) value.bind (functie (to) $ ('.site-title a') .text (to);););We kunnen de API echter ook verder rekken om bijvoorbeeld een sectie, deelvenster of een besturingselement te verbergen, te tonen of te verplaatsen, de waarde van een instelling op basis van een andere instellingswaarde te wijzigen en de interacties Voorbeeld en Besturing met elkaar te verbinden. En dit zijn waar we in deze tutorial naar gaan kijken.
We hebben de WordPress Customizer uitgebreid behandeld met een handvol artikelen en een aantal series die de ins en outs van de Customizer API's behandelen.
Ik neem aan dat je het kernconcept van de WordPress Customizer hebt begrepen, evenals de componenten zoals Panel, Section, Setting en Control. Anders raad ik je ten zeerste aan om wat tijd door te brengen met onze tutorials en videocursussen over dit onderwerp voordat je verder gaat.
Om te beginnen zullen we de "Instellingen" en "Besturingselementen" in de Customizer bekijken die we voor deze tutorial hebben toegevoegd. We zullen ook kijken naar de code die hen op hun plaats zet.
In deze tutorial zullen we ons concentreren op de website "Sitetitel". En zoals u hierboven kunt zien, hebben we twee besturingselementen: het invoerveld WordPress "Sitetitel" en ons aangepast selectievakje om de "Sitetitel" in of uit te schakelen. Deze twee besturingselementen bevinden zich in het gedeelte 'Site-identiteit'. En aan de rechterkant van de afbeelding staat de Voorvertoning, waar u kunt zien dat de "Sitetitel" wordt weergegeven.
Zoals u hieronder kunt zien, hebben we bovendien twee besturingselementen in de sectie Kleuren om de kleur "Sitetitel" en de bijbehorende zweven state kleur.
Ons thema hierin is gebaseerd op Underscores, waarin alle Customizer-gerelateerde code is geplaatst in de /inc/customizer.php het dossier.
function 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'; // Selectievakje om de blognaam $ wp_customize-> add_setting ('display_blogname', array ('transport' => 'postMessage',)) weer te geven; $ wp_customize-> add_control ('display_blogname', array ('label' => __ ('Site-titel weergeven', 'tuts'), 'sectie' => 'title_tagline', 'type' => 'checkbox', 'priority '=> 11,)); // Hoofdtekstkleurinstelling en besturing toevoegen. $ wp_customize-> add_setting ('header_textcolor_hover', array ('default' => '# C62828', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'postMessage',)); $ wp_customize-> add_control (nieuw WP_Customize_Color_Control ($ wp_customize, 'header_textcolor_hover', array ('label' => __ ('Header Text Color: Hover', 'tuts'), 'section' => 'colors', 'priority' => '11'))); add_action ('customize_register', 'tuts_customize_register'); En zoals u hierboven kunt zien, hebben we een paar wijzigingen aangebracht in de code, in overeenstemming met onze behoefte in deze zelfstudie.
BlogDescription, naar 12 zodat het selectievakje Instelling, display_blogname, verschijnt onder het invoerveld "Sitetitel".display_blogname. We hebben de prioriteit naar 11 wat in ons geval ligt tussen het invoerveld "Sitetitel" en "Tagline".koptekst standaardkleur voor # f44336 en de vervoer- type naar postMessage.header_text_color. Op dezelfde manier hebben we ook de prioriteit ingesteld op 11 zodat het net onder de header_textcolor omgeving.Al deze instellingen zijn ingesteld met postMessage in plaats van met verversen. De postMessage Met de optie kan de waarde asynchroon worden getransporteerd en in realtime in het voorbeeldvenster worden weergegeven. We zullen echter ook onze eigen JavaScript moeten schrijven om de wijziging aan te kunnen.
We moeten twee JavaScript-bestanden maken: één bestand, customizer-preview.js, om te gaan met de Preview en het andere bestand, customizer-control.js, om de bedieningselementen in het Customizer-paneel te gebruiken.
js ├── customizer-preview.js // 1. Bestand om de Preview af te handelen ├── customizer-control.js // 2. Bestand om de Controls af te handelen ├── navigation.js └── skip-link-focus- fix.js
Binnen customizer-preview.js is de volgende code.
(functie ($) // Codes hier.) (jQuery);
Het is momenteel een lege ingesloten JavaScript-functie. We zullen meer specifiek bespreken hoe we een voorbeeld bekijken van de wijzigingen in het voorbeeldvenster in de volgende zelfstudie van deze serie.
In het andere bestand, customizer-control.js, we voegen de volgende code toe:
(functie ($) wp.customize.bind ('ready', function () var customize = this; // Codes hier);) (jQuery);Zoals je hierboven kunt zien, verpakken we de code in dit bestand op de Customizer klaar evenement. Dit zorgt ervoor dat alles binnen de Customizer volledig klaar is, inclusief de instellingen, panelen en bedieningselementen, voordat we beginnen met het uitvoeren van aangepaste functies.
Uiteindelijk zullen we deze twee JavaScript-bestanden op twee verschillende locaties laden zodra we de code hebben toegevoegd.
// 1. customizer-preview.js functie tuts_customize_preview_js () wp_enqueue_script ('tuts_customizer_preview', get_template_directory_uri (). '/Js/customizer-preview.js', array ('customize-preview'), null, true); add_action ('customize_preview_init', 'tuts_customize_preview_js'); // 2. customizer-control.js functie tuts_customize_control_js () wp_enqueue_script ('tuts_customizer_control', get_template_directory_uri (). '/Js/customizer-control.js', array ('customize-controls', 'jquery'), null, waar); add_action ('customize_controls_enqueue_scripts', 'tuts_customize_control_js');De customizer-preview.js bestand wordt geladen in het venster Customizer Preview via de customize_preview_init Actie haak. De customizer-control.js bestand wordt in de Customizer-back-end geladen, waar de elementen Setting en Control toegankelijk zijn via de customize_controls_enqueue_scripts Actie haak.
WordPress is vanaf het begin zwaar geïnvesteerd in PHP. Het zal dus geen verrassing zijn dat de meerderheid van de ontwikkelaars die het ecosysteem ondersteunen, bekwamer en vertrouwd zijn met de PHP API's dan de JavaScript API's..
Het is pas sinds kort dat JavaScript uitgebreid is geïntegreerd via de Customizer en WP-API. Het grijpen van de JavaScript-API's in de WordPress Customizer kan een hele uitdaging zijn. Zoals eerder vermeld, is dit de zijde van WordPress die momenteel het minst gedocumenteerd is. Daarom zullen we dit onderwerp grondig bespreken.
Als u ondertussen op zoek bent naar andere hulpprogramma's om uw groeiende verzameling hulpprogramma's voor WordPress te ontwikkelen of om code te bestuderen en meer vertrouwd te raken met WordPress, vergeet dan niet te zien wat we beschikbaar hebben in Envato Markt.
Hierin hebben we alle essentiële elementen voorbereid om met JavaScript-API's van WordPress te werken. En we zullen hier eindigen. In het volgende deel van de serie zullen we meer ontdekken wat er onder de JavaScript-API's in WordPress ligt en beginnen met het schrijven van functionele scripts die je direct kunt implementeren in je thema.
Blijf kijken!
