API JavaScript di personalizzazione pannello, sezione e controllo

Oggi riprenderemo la nostra discussione sull'API JavaScript nel Personalizzatore di WordPress. Nell'ultimo tutorial, abbiamo preparato e caricato due file JavaScript, customizer-control.js e customizer-preview.js, questo ci consentirà di interagire con l'API JavaScript dal back-end del Personalizzatore e dall'interfaccia front-end o dall'anteprima. Quindi assicurati di seguire l'ultimo tutorial prima di procedere oltre.

In questo tutorial, ci concentreremo sull'interfaccia che compone il back-end, i pannelli, le impostazioni e i controlli di Customizer. Ancora una volta, se queste tre cose sono qualcosa di nuovo per te, ti consiglio vivamente di seguire la nostra serie completa precedente: Una guida al personalizzatore del tema WordPress.

Interazione di base con l'API JavaScript di Personalizzazione

A parte l'API PHP, con la quale sono sicuro che alcuni di voi sono familiari, i pannelli, le sezioni e i controlli sono accessibili anche tramite l'API JavaScript. Allo stesso modo, possiamo quindi modificarli. Ecco alcuni esempi.

Seleziona un particolare controllo, sezione o pannello:

// Seleziona un controllo. wp.customize.control ('blogname'); // Seleziona una sezione. wp.customize.section ('title_tagline'); // Seleziona un pannello. wp.customize.panel ('nav_menus'); 

Riorganizza il loro ordine di visualizzazione.

// Cambia una priorità di controllo wp.customize.control ('blogname') .priority (30); // Modifica di una priorità della sezione wp.customize.section ('title_tagline') .priority (100); // Cambia una priorità del pannello wp.customize.panel ('nav_menus') .priority (200); 

Spostare il controllo "Titolo sito" su, ad esempio, il colore sezione.

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

Attiva la sua visibilità.

// Disattiva / nascondi il controllo 'Titolo sito' wp.customize.control ('blogname') .toggle (); 

È anche possibile analizzare l'albero DOM di controllo, che è una cosa che altrimenti sarebbe complicata da fare in PHP.

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

Queste sono alcune cose che puoi fare con i pannelli, le sezioni e i controlli nell'API JavaScript di Personalizzazione. Ora mettiamo questi insieme in un'esperienza utente più significativa.

Commutazione di sezioni e controlli

A questo punto, dovremmo avere quattro controlli in totale. Due controlli, l'input "Titolo sito" e la casella di controllo "Visualizza titolo sito" sono nella sezione "Identità sito". Gli altri due sono un selettore di colori. Risiedono nella sezione "Colori" e impostano rispettivamente il colore del testo "Titolo sito" e il suo colore dello stato al passaggio del mouse.

I nostri quattro controlli nel Customizer

Il nostro piano qui è quello di visualizzare i controlli Colore solo quando la casella di controllo "Visualizza titolo del sito" è selezionata poiché non vi è alcun motivo per mostrare questi controlli colore Titolo sito quando il titolo del sito è effettivamente disabilitato.

Inoltre, questo approccio potrebbe aiutarci a declassare Customizer rimuovendo controlli, sezioni e pannelli irrilevanti dalla barra laterale di Customizer. Se questo sembra qualcosa che vuoi raggiungere, cominciamo.

Disabilitare un campo di input di controllo

Per cominciare, apri il nostro file JavaScript, customizer-control.js. Quindi, aggiungi le linee di codice all'interno del Customizer pronto evento:

wp.customize.bind ('ready', function () // Pronto? var customize = this; // Personalizza l'alias dell'oggetto. personalizza ('display_blogname', function (setting) );); 

Qui abbiamo impostato un alias per il Questo parola chiave, che si riferisce all'API JavaScript di Personalizzazione. Quindi, colleghiamo una funzione anonima al display_blogname impostazione poiché tutte le personalizzazioni che andremo a svolgere nel Customizer saranno relative al valore di questa particolare impostazione.

Successivamente, selezioniamo il ingresso campo dell'impostazione "Titolo sito".

wp.customize.bind ('ready', function () // Pronto? var customize = this; // WordPress personalizza l'alias dell'oggetto. customize ('display_blogname', function (setting) var siteTitleInput = customize.control ('blogname ') .container.find (' input '); // Inserimento del titolo del sito.);); 

Possiamo disabilitare l'input quando il display_blogname la casella di controllo è unticked.

wp.customize.bind ('ready', function () // Pronto? var customize = this; // Personalizza l'alias dell'oggetto. personalizza ('display_blogname', function (value) var siteTitleInput = customize.control ('blogname' ) .container.find ('input'); // Inserimento titolo del sito. / ** * Disabilita l'elemento Input * / // 1. Al caricamento. siteTitleInput.prop ('disabled',! value.get ()); // .get () value // 2. Associazione alla modifica del valore. value.bind (function (to) siteTitleInput.prop ('disabled',! to);););); 

Come puoi vedere sopra, usiamo il jQuery .puntello() metodo per impostare l'HTML Disabilitato proprietà per l'elemento di input. Noi usiamo il .ottenere() metodo per recuperare il valore corrente. Infine, usando il .bind () metodo, ascoltiamo il cambiamento di valore e impostiamo il Disabilitato proprietà di conseguenza.

A sinistra: abilitato campo di inserimento "Titolo sito". A destra: campo di inserimento "Titolo sito" disabilitato. Nota la casella di controllo.

Attivare la visibilità

Ora procediamo con il codice per attivare la visibilità dei selettori di colori che impostano i colori "Titolo sito". Come pianificato, rimuoveremo i selettori di colori quando la casella è selezionata unticked e mostrali di nuovo quando è barrata.

Per cominciare, raggruppiamo gli ID di impostazione del selettore di colori insieme in un array.

wp.customize.bind ('ready', function () // Pronto? var customize = this; // Personalizza l'alias dell'oggetto. personalizza ('display_blogname', function (value) // ... codici precedenti ... var colorControls = [var 'header_textcolor', 'header_textcolor_hover'];);); 

Quindi, iteriamo una funzione su questi ID di controllo che renderanno la loro visibilità usando jQuery .ginocchiera () metodo.

wp.customize.bind ('ready', function () // Pronto? var customize = this; // Personalizza l'alias dell'oggetto. personalizza ('display_blogname', function (value) // ... codici precedenti ... var colorControls = [var 'header_textcolor', 'header_textcolor_hover']; $ .each (colorControls, function (index, id) customize.control (id, function (control) / ** * Commutazione della funzione * / var toggle = function (to) control .toggle (to);; // 1. Al caricamento. toggle (value.get ()); // 2. Sulla modifica del valore. value.bind (toggle););););) ; 

La struttura del codice precedente è simile al nostro codice precedente, che disabilita l'elemento di input. Qui abbiamo selezionato ogni controllo nella matrice usando il .controllo() metodo come abbiamo già mostrato in precedenza in questo tutorial. Successivamente, abbiamo una funzione per commutare ogni controllo usando jQuery .ginocchiera () metodo, ed eseguirlo all'avvio della pagina Customizer così come quando il valore è cambiato.

La casella di controllo "Visualizza titolo del sito" non selezionata, l'input del titolo del sito è disattivato (disattivato) e i rispettivi selettori di colori nella sezione Colore sono ora nascosti.

Qual'è il prossimo

In questo tutorial, ti ho mostrato un semplice esempio di come utilizzare l'API JavaScript di Personalizzazione per migliorare l'esperienza utente nel Customizer. E ci sono alcune cose che possiamo fare per migliorarlo ulteriormente, come rimuovere la sezione "Colori" se non ci sono controlli da visualizzare all'interno della sezione e regolare la sfumatura di colore dell'impostazione "Colore testo testata: al passaggio del mouse" seguendo la valore nell'impostazione "Colore testo intestazione".

Nel prossimo tutorial di questa serie, ci mettiamo alla prova con un esempio leggermente più complesso. Creeremo un "ponte" che consentirà alla finestra di Anteprima personalizzazione di interagire con il pannello di controllo nel back-end. Quindi, quando un utente fa clic su, ad esempio, il titolo del sito nella finestra di anteprima, il personalizzatore scorrerà nel rispettivo input all'utente.

Rimanete sintonizzati!