Supponiamo di aver creato un tema con un numero di impostazioni e controlli di personalizzazione che consentono agli utenti del tema di personalizzare un numero di elementi sul frontend del tema, ad esempio titolo del sito Web, tagline e colore.

Tuttavia, alcuni dei nostri utenti potrebbero non essere immediatamente consapevoli di essere in grado di personalizzare queste parti particolari del tema, specialmente se sono sepolti in più pannelli e sezioni. Quindi, come possiamo rendere più veloce per loro personalizzare il tema?

WordPress.com ha recentemente aggiunto pulsanti di modifica in alcune aree modificabili, che sono immediatamente visibili all'avvio del Customizer. Quando l'utente fa clic su questi pulsanti, mostrerà loro il rispettivo Controllo.

Il nuovo pulsante "Modifica" nella finestra Anteprima personalizzazione su WordPress.com, 

Questo è un buon miglioramento di UX che possiamo effettivamente ottenere con l'API JavaScript di Personalizzazione sul nostro tema. E scoprirai che farlo non è così complicato come potresti aver immaginato. Quindi, diamo una rapida occhiata a come funziona.

Prerequisiti

Nell'ultimo tutorial, abbiamo solo scritto il codice nel customizer-control.js file, che influenza le interfacce di back-end di Customizer. In questo tutorial, utilizzeremo anche l'altro file, customizer-preview.js, che viene caricato nella finestra di anteprima. Dovresti avere questi due file creati e caricati. Altrimenti, ti suggerisco di seguire il primo tutorial di questa serie prima di procedere oltre.

Creare un pulsante Modifica

Prima di tutto, aggiungiamo un paio di modificare pulsanti accanto al titolo del sito.

 "rel =" home ">     

utilizzando is_customize_preview (), questo pulsante verrà mostrato solo nella finestra di Anteprima personalizzazione. Ognuno di questi pulsanti è assegnato con a classe nome, .customizer-edit, che ci permetterà di selezionare questi pulsanti e vincolarli con a clic Evento più tardi.

Inoltre, abbiamo aggiunto anche questi pulsanti con a controllo dei dati attributo contenente il nome o l'ID delle impostazioni registrate nel Customizer. Il nome in questo attributo ci aiuterà a determinare la corretta impostazione e controllo per servire all'utente in seguito.

Due pulsanti di modifica per personalizzare il titolo e il colore del titolo.

Poiché la presentazione non è la nostra principale preoccupazione per ora, i nostri due pulsanti "Modifica" nella finestra di anteprima non sono belli come quelli in WordPress.com. È possibile aggiungere gli stili in un modo che corrisponda al design del tema nel suo complesso.

Definire un evento personalizzato

Successivamente, definiamo un evento personalizzato; un evento che dice che uno di questi pulsanti è stato cliccato. Aggiungi il seguente codice nel customizer-preview.js file.

var customize = wp.customize; $ (document.body) .on ('click', '.customizer-edit', function () customize.preview.send ('preview-edit', $ (this) .data ('control')); );

Il codice associa ognuno di questi pulsanti con il clic Evento, usando il  .preview.send () metodo per lanciare un evento. Il .preview.send () metodo prende due parametri, vale a dire il nome dell'evento personalizzato e l'argomento. Nel nostro caso, abbiamo definito un nuovo evento chiamato Anteprima-edit, e passare un argomento con i dati recuperati dal controllo dei dati attributo del pulsante.

Ascoltando l'evento personalizzato

Possiamo ascoltare un cast di eventi personalizzato da .preview.send () metodo attraverso un altro metodo di personalizzazione chiamato .previewer.bind ()-notare il previewer con er. Questo metodo è simile a jQuery .sopra() Metodo, in cui definiamo il nome dell'evento da ascoltare e una funzione che verrà eseguita quando viene attivato l'evento. Inserisci .previewer.bind () nel customizer-control.js, come segue.

var customize = wp.customize; customize.previewer.bind ('preview-edit', function (data) );

Successivamente, trasformiamo i dati passati in un formato di conformità JSON, selezioniamo un elemento di controllo basato sul nome recuperato dai dati e concentrarsi sull'elemento di controllo utilizzando il Customizer .messa a fuoco() metodo.

var customize = wp.customize; customize.previewer.bind ('preview-edit', function (data) var data = JSON.parse (data); var control = customize.control (data.name); control.focus (););

Ora, come puoi vedere sotto, quando clicchiamo su, ad esempio, il pulsante "Modifica testo", mostrerà l'impostazione "Titolo sito" e focalizzerà il cursore nell'input.

Il pulsante Modifica in azione.

Inoltre, se guardiamo al codice sorgente in esso, il .messa a fuoco() il metodo accetta un parametro chiamato completeCallback. Questo parametro viene eseguito consecutivamente dopo .messa a fuoco() la funzione è eseguita. Possiamo utilizzare questo parametro, ad esempio, per aggiungere un effetto di animazione.

customize.previewer.bind ('preview-edit', function (data) var data = JSON.parse (data); var control = customize.control (data.name); control.focus (completeCallback: function ()  setTimeout (function () control.container.addClass ('shake animated');, 300);););

L'esperienza complessiva ora sembra più viva.

Elemento di input potenziato con l'animazione CSS

Avvolgendo

Abbiamo menzionato un numero di API JavaScript di Customizer:

• .preview.send () metodo per lanciare un evento personalizzato.
• .previewer.bind () metodo per associare il Customizer ad un evento personalizzato.
• .messa a fuoco() metodo per concentrarsi su un elemento di input di un controllo e su completeCallback parametro.

In questo tutorial, utilizziamo questi metodi per consentire ai nostri utenti del tema di modificare rapidamente il testo del titolo del sito facendo clic sul pulsante "Modifica testo" nella finestra di anteprima.

Abbiamo ancora un pulsante rimanente per visualizzare i controlli Colore. Ma lo lascerò qui come una sfida; utilizzare gli stessi tre metodi per rendere la funzione "Modifica colore". In caso di dubbi, non esitare a dare un'occhiata al codice sorgente.