API-uri personalizate JavaScript panou, secțiune și control

Astăzi, vom relua discuția noastră despre JavaScript API-ul în WordPress Customizer. În ultimul tutorial, am pregătit și încărcat două fișiere JavaScript, -control.js personalizare și -preview.js personalizare, care ne va permite să interacționăm cu API-ul JavaScript din back-end-ul Customizer și interfața de interfață de previzualizare. Asigurați-vă că urmați ultimul tutorial înainte de a continua.

În acest tutorial, ne vom concentra pe interfața compusă din back-end-ul personalizat, panourile, setările și comenzile. Din nou, dacă aceste trei lucruri sunt ceva nou pentru dvs., recomand că vă urmați seria noastră anterioară completă: Ghid pentru WordPress Theme Customizer.

Interacțiunea de bază cu API JavaScript personalizat

În afară de API-ul PHP, cu care sunt sigur că unii dintre voi sunteți familiarizați, panourile, secțiunile și controalele sunt de asemenea accesibile prin API-ul JavaScript. De asemenea, le putem modifica. Aici sunt cateva exemple.

Selectați un anumit control, secțiune sau panou:

// Selectați un control. wp.customize.control ('blogname'); // Selectați o secțiune. wp.customize.section ('title_tagline'); // Selectați un panou. wp.customize.panel ("nav_menus"); 

Reorganizați ordinea vizuală.

// Schimbați o prioritate de control wp.customize.control ('blogname') .priority (30); // Modificați o prioritate a secțiunii wp.customize.section ('title_tagline') .priority (100); // Schimbați prioritatea panoului wp.customize.panel ('nav_menus') .prerietate (200); 

Deplasați controlul "Site Title", de exemplu, la culoare secțiune.

wp.customize.control ("blogname") .secție ("culori"); 

Schimbați vizibilitatea acestuia.

// Dezactivați / ascundeți "Titlul site-ului" control wp.customize.control ('blogname') .toggle (); 

Puteți chiar să analizați structura de control DOM, care este un lucru care altfel ar fi convoluționat în PHP.

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

Acestea sunt câteva lucruri pe care le puteți face cu panourile, secțiunile și comenzile din API-ul Customizer JavaScript. Să le punem acum într-o experiență mai semnificativă a utilizatorilor.

Comutare secțiuni și comenzi

În acest moment, ar trebui să avem patru controale în total. Două comenzi, intrarea "Titlul site-ului" și caseta de selectare "Afișați titlul site-ului" sunt în secțiunea "Identitatea site-ului". Celelalte două sunt un picker de culoare. Acestea se află în secțiunea "Culori" și vor seta culoarea textului "Titlul site-ului" și, respectiv, culoarea sa de stare.

Cele patru comenzi din Customizer

Planul nostru este de a afișa comenzile de culoare numai atunci când este bifată caseta de selectare "Titlul site-ului afișat", deoarece nu există niciun motiv pentru a afișa aceste controale de culoare pentru titlul site-ului când titlul site-ului este de fapt dezactivat.

În plus, această abordare ne-ar putea ajuta să declanșăm Customizer eliminând controalele, secțiunile și panourile irelevante din bara laterală Customizer. Dacă sună ca ceva pe care vrei să-l atingi, să începem.

Dezactivarea câmpului de introducere a controlului

În primul rând, deschideți fișierul JavaScript, -control.js personalizare. Apoi, adăugați liniile de cod în Personalizator gata eveniment:

wp.customize.bind ('pregătit', funcția () // Ready? var customize = this; // Personalizați aliasul obiectului. personalize ('display_blogname', funcția (setarea) ); 

Aici am setat un alias pentru acest cuvânt cheie, care se referă la API JavaScript Customizer. Apoi, am introdus o funcție anonimă în display_blogname , deoarece toate personalizările pe care le vom efectua în Customizer vor fi relative la valoarea acestei setări.

Apoi, selectăm intrare câmpul "Setarea site-ului".

wp.customize.bind ('gata', functie () // Ready? var customize = aceasta; // WordPress personaliza aliasul obiectului customize ('display_blogname', function (setting) var siteTitleInput = customize.control ') .container.find (' input '); // Introducerea titlului site-ului.);); 

Putem dezactiva intrarea când display_blogname caseta de selectare este debifată.

wp.customize.bind ('pregătit', funcția () // Ready? var customize = this; // Personalizați aliasul obiectului customize ('display_blogname', funcția (valoare) var siteTitleInput = customize.control ) .container.find ('input'); // Introducerea titlului site-ului / ** * Dezactivați elementul de intrare * / // 1. La încărcare siteTitleInput.prop ('disabled',! value.get ()); // .get () value // 2. Legarea la variația valorii. value.bind (funcția (la) siteTitleInput.prop ('dezactivat',;);););); 

După cum puteți vedea mai sus, vom folosi jQuery .prop () pentru a seta codul HTML invalid proprietății elementului de intrare. Noi folosim .obține() de recuperare a valorii curente. În cele din urmă, folosind .lega() metoda, ascultați schimbarea valorii și setați invalid proprietate în consecință.

Stânga: A fost activat câmpul de introducere "Titlul site-ului". Dreapta: Dezactivat câmpul de introducere "Titlul site-ului". Observați caseta de selectare.

Schimbarea vizibilității

Acum continuăm cu codul pentru a comuta vizibilitatea colectorilor de culori care au setat culorile "Titlu site". După cum am planificat, vom elimina selectorul de culori când este bifată caseta de selectare debifată și le arătați din nou când este bifează.

În primul rând, grupăm ID-urile setărilor de selectare a culorilor împreună într-o matrice.

wp.customize.bind ('ready', function () // Ready? var customize = this; // Customize alias obiect customize ('display_blogname', function (value) // ... coduri anterioare ... var colorControls = 'header_textcolor', 'header_textcolor_hover'];);); 

Apoi, vom itera o funcție peste aceste ID-uri de control care vor comuta vizibilitatea lor folosind jQuery .comutare() metodă.

wp.customize.bind ('ready', function () // Ready? var customize = this; // Customize alias obiect customize ('display_blogname', function (value) // ... coduri anterioare ... var colorControls = 'header_textcolor', 'header_textcolor_hover']; $ .eu (colorControls, function (index, id) customize.control (id, functie (control)) / var toggle = function .toggle (la);; // 1. La comutare de încărcare (value.get ()); // 2. La schimbarea valorii. ; 

Structura codului de mai sus este similară codului nostru anterior, care dezactivează elementul de intrare. Aici am selectat fiecare control din matrice folosind .Control() așa cum am arătat deja mai devreme în acest tutorial. Apoi, avem funcția de a comuta fiecare comandă utilizând jQuery .comutare() , și să o executați la inițierea paginii personalizate, precum și la modificarea valorii.

Caseta de afișare "Titlul site-ului afișat" este dezactivată, intrarea în Titlul site-ului este gri (dezactivată), iar selectorii de culori din secțiunea Culoare sunt acum ascunși.

Ce urmeaza

În acest tutorial, v-am arătat un exemplu simplu de utilizare a API-ului JavaScript Customizer pentru a îmbunătăți experiența utilizatorilor în Customizer. Există și câteva lucruri pe care putem să le îmbunătățim în continuare, cum ar fi eliminarea secțiunii "Culori" dacă nu există niciun control pentru afișarea în cadrul secțiunii și ajustarea nuanței de culoare a setării "Header Color Color: Hover" valoare în setarea "Header Color Text".

În următorul tutorial al acestei serii, vom încerca să ne provocăm un exemplu puțin mai complex. Vom construi un "pod" care să permită fereastra de previzualizare personalizată să interacționeze cu panoul de control din spate. Deci, atunci când un utilizator face clic pe, de exemplu, titlul site-ului în fereastra de previzualizare, Customizer va alinia intrarea respectivă la utilizator.

Rămâneți aproape!