JavaScript-API's voor Customizer paneel, sectie en besturing

Vandaag zullen we onze discussie over de JavaScript-API in de WordPress Customizer hervatten. In de laatste zelfstudie hebben we twee JavaScript-bestanden voorbereid en geladen, customizer-control.js en customizer-preview.js, waarmee we kunnen werken met de JavaScript-API vanuit de back-end van de Customizer en de interface van de front-end of de Previewer. Zorg er dus voor dat je de laatste zelfstudie volgt voordat je verder gaat.

In deze zelfstudie concentreren we ons op de interface die de Customizer-backend, panelen, instellingen en bedieningselementen samenstelt. Nogmaals, als deze drie dingen iets nieuws voor je zijn, raad ik je ten zeerste aan om onze vorige complete serie te volgen: Een gids voor de WordPress Theme Customizer.

Basisinteractie met de JavaScript-API van Customizer

Afgezien van de PHP API, waarvan ik zeker weet dat sommigen van u bekend zijn, zijn panelen, secties en besturingselementen ook toegankelijk via de JavaScript-API. Op dezelfde manier kunnen we ze vervolgens wijzigen. Hier zijn enkele voorbeelden.

Selecteer een bepaald besturingselement, sectie of paneel:

// Selecteer een besturingselement. wp.customize.control ('blognaam'); // Selecteer een sectie. wp.customize.section ('title_tagline'); // Selecteer een paneel. wp.customize.panel ('nav_menus'); 

Reorganiseer hun weergavevolgorde.

// Wijzig een besturingsprioriteit wp.customize.control ('blogname') .priority (30); // Wijzig een sectieprioriteit wp.customize.section ('title_tagline') .priority (100); // Wijzig een paneelprioriteit wp.customize.panel ('nav_menus') .priority (200); 

Verplaats de besturing "Sitetitel" naar, bijvoorbeeld, de kleur sectie.

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

Schakel de zichtbaarheid in.

// Deactiveren / verbergen 'Site Title' control wp.customize.control ('blogname') .toggle (); 

Je kunt de besturings-DOM-boom zelfs analyseren, iets dat anders ingewikkeld zou zijn om te doen in PHP.

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

Dit zijn een handvol dingen die u kunt doen met de panelen, secties en besturingselementen in de JavaScript-API van Customizer. Laten we deze nu samenvoegen tot een zinvollere gebruikerservaring.

Schakelen tussen secties en bedieningselementen

Op dit punt zouden we in totaal vier controles moeten hebben. Twee bedieningselementen, de ingang 'Sitetitel' en het selectievakje 'Sitetitel weergeven' staan ​​in het gedeelte 'Site-identiteit'. De andere twee zijn een kleurenkiezer. Ze bevinden zich in het gedeelte "Kleuren" en stellen respectievelijk de tekstkleur "Sitetitel" en de bijbehorende statuskleur in.

Onze vier besturingselementen in de Customizer

Ons plan hier is om de kleurregelaars alleen weer te geven als het selectievakje 'Site-titel weergeven' is aangevinkt, omdat er geen reden is om deze kleurregelaars voor de sitetitel te tonen wanneer de sitetitel eigenlijk is uitgeschakeld.

Bovendien kan deze aanpak ons ​​helpen om Customizer te decoderen door irrelevante besturingselementen, secties en panelen uit de zijbalk van Customizer te verwijderen. Als dit klinkt als iets dat u wilt bereiken, laten we beginnen.

Een besturingsinvoerveld uitschakelen

Open ons JavaScript-bestand om te beginnen, customizer-control.js. Voeg vervolgens de regels code toe in de Customizer klaar evenement:

wp.customize.bind ('ready', function () // Ready? var customize = this; // Aanpassen object alias. aanpassen ('display_blogname', functie (instelling) );); 

Hierin hebben we een alias voor de deze sleutelwoord, dat verwijst naar de JavaScript-API van Customizer. Vervolgens nemen we een anonieme functie op in de display_blogname instelling, omdat alle aanpassingen die we in de Customizer zullen uitvoeren, relatief zijn aan de waarde van deze specifieke instelling.

Vervolgens selecteren we de invoer veld van de instelling 'Sitetitel'.

wp.customize.bind ('ready', function () // Ready? var customize = this; // WordPress pas alias aan. customize ('display_blogname', functie (instelling) var siteTitleInput = customize.control ('blognaam ') .container.find (' invoer '); // Invoer van sitetitel.);); 

We kunnen de invoer uitschakelen wanneer de display_blogname checkbox is unticked.

wp.customize.bind ('ready', function () // Ready? var customize = this; // Aanpassen object alias. aanpassen ('display_blogname', functie (waarde) var siteTitleInput = customize.control ('blognaam' ) .container.find ('invoer'); // Invoer van sitetitel. / ** * Schakel het invoerelement * / // uit 1. Bij laden. siteTitleInput.prop ('disabled',! value.get ()); // .get () waarde // 2. Binding to value change. value.bind (function (to) siteTitleInput.prop ('disabled',! to);););); 

Zoals je hierboven kunt zien, gebruiken we de jQuery .prop () methode om de HTML in te stellen invalide eigenschap aan het invoerelement. Wij gebruiken de .krijgen() methode om de huidige waarde op te halen. Ten slotte, met behulp van de .binden() methode, we luisteren naar de waardeverandering en stellen de invalide eigendom dienovereenkomstig.

Links: Ingeschakeld invoerveld "Sitetitel". Rechts: uitgeschakeld invoerveld "Sitetitel". Let op het selectievakje.

Zichtbaarheid inschakelen

Nu gaan we verder met de code om de zichtbaarheid aan te passen van de kleurenkiezers die de "Sitetitel" -kleuren instellen. Zoals we hebben gepland, verwijderen we de kleurkiezers wanneer het selectievakje is ingeschakeld unticked en laat ze opnieuw zien wanneer het is aangevinkt.

Om te beginnen groeperen we de instellings-ID's van de kleurkiezer samen in een array.

wp.customize.bind ('ready', function () // Ready? var customize = this; // Customize alias van het bestand. customize ('display_blogname', functie (waarde) // ... vorige codes ... var colorControls = [ 'header_textcolor', 'header_textcolor_hover'];);); 

Vervolgens herhalen we een functie over deze controle-ID's die hun zichtbaarheid schakelen met behulp van jQuery .knevel () methode.

wp.customize.bind ('ready', function () // Ready? var customize = this; // Customize alias van het bestand. customize ('display_blogname', functie (waarde) // ... vorige codes ... var colorControls = [ 'header_textcolor', 'header_textcolor_hover']; $. any (colorControls, function (index, id) customize.control (id, function (control) / ** * Wisselfunctie * / var toggle = function (to) control .toggle (to);; // 1. Aan het laden. toggle (value.get ()); // 2. Over waardewijziging. value.bind (toggle););););) ; 

De structuur van de bovenstaande code is vergelijkbaar met onze vorige code, waardoor het invoerelement wordt uitgeschakeld. Hier hebben we elk besturingselement in de array geselecteerd met behulp van de .controle() methode zoals we al eerder in deze tutorial hebben getoond. Vervolgens hebben we een functie om elk besturingselement te schakelen met behulp van jQuery .knevel () methode, en voer het uit op de startpagina van de Customizer en ook wanneer de waarde wordt gewijzigd.

Het selectievakje 'Site-titel weergeven' is uitgeschakeld, de ingang Sitetitel is grijs weergegeven (uitgeschakeld) en de respectieve kleurkiezers in het gedeelte Kleur zijn nu verborgen.

Wat is het volgende

In deze zelfstudie heb ik u een eenvoudig voorbeeld laten zien van het gebruik van de JavaScript-API van Customizer om de gebruikerservaring in de Customizer te verbeteren. En er zijn een paar dingen die we kunnen doen om het verder te verbeteren, zoals het verwijderen van de "Kleuren" sectie als er geen controle is om weer te geven in de sectie, en de kleurtint van de "Koptekstkleur: Zweven" -instelling aan te passen na de waarde in de instelling "Tekst koptekst".

In de volgende zelfstudie van deze serie gaan we onszelf uitdagen met een iets ingewikkelder exemplaar. We gaan een "brug" bouwen die het venster Customizer Preview in staat stelt om te communiceren met het controlepaneel in de back-end. Dus wanneer een gebruiker klikt op bijvoorbeeld de Sitetitel in het voorbeeldvenster, zal de Customizer de respectieve invoer naar de gebruiker schuiven.

Blijf kijken!