Share
A questo punto della serie, abbiamo coperto tutto, dalla comprensione del motivo per cui il Theme Customizer è vantaggioso per quelli di noi che sono designer e sviluppatori, come implementarlo nel nostro tema e capire la relazione tra sezioni, impostazioni e controlli.
Abbiamo anche dato un'occhiata a come implementare le nostre impostazioni e controlli in una delle sezioni predefinite di WordPress.
In questo articolo, daremo un'occhiata a ciò che è necessario per introdurre la nostra sezione e una varietà di impostazioni e controlli. Questo articolo riguarderà una metodologia che può essere seguita per l'implementazione di nuove impostazioni e controlli e come applicare questa metodologia per introdurre una nuova sezione, impostare e controllare.
Espanderemo questo argomento nella seconda parte di questo articolo introducendo ulteriori controlli. Ma, per ora, diamo un'occhiata alla metodologia, e introduciamo una nuova impostazione nel Customizer tema.
Prima di iniziare ad aggiornare il nostro tema, parliamo prima di ciò che è necessario per introdurre una nuova sezione, una nuova impostazione e un nuovo controllo. Nota che a questo punto, stiamo assumendo che useremo sempre il postMessage trasporto per aggiornamenti in tempo reale, quindi assumeremo lo stesso risultato in futuro.
Detto questo, disporre di una metodologia per l'introduzione di nuove opzioni è sempre molto più utile che entrare in qualcosa di cieco, quindi diamo un'occhiata a cosa è necessario fare per implementare sezioni, impostazioni e controlli ad alto livello:
Accentsconagua
get_theme_mod Niente di troppo complicato, giusto? Certo, le azioni parlano più delle parole quindi iniziamo a fare esattamente questo.
Per seguire la metodologia che abbiamo delineato sopra, lavoreremo con le stesse funzioni, i modelli e i file JavaScript che abbiamo definito negli articoli precedenti, quindi se non l'hai raggiunto, ora è il tempo.
Detto questo, iniziamo.
Nel tcx_register_theme_customizer funzione, stiamo andando a implementare una sezione chiamata Opzioni di visualizzazione, e faremo in modo che questo sia posizionato in fondo all'elenco delle sezioni nel Customizer tema. Questo viene fatto impostando il priorità proprietà del add_section.
$ wp_customize-> add_section ('tcx_display_options', array ('title' => 'Opzioni di visualizzazione', 'priority' => 200)); Si noti sopra, abbiamo definito due argomenti:
Se ora salvi il tuo lavoro e tenti di ricaricare il customizer, non vedrai il Opzioni di visualizzazione sezione. Questo perché non ci sono opzioni per farlo visualizzare - ancora.
Per visualizzare la sezione, è necessario introdurre un'impostazione che l'utente possa modificare. Per fare ciò, introdurremo un'opzione che consentirà all'utente di attivare la visibilità di un'intestazione.
La prima cosa che dobbiamo fare è fare una chiamata a add_setting che identificherà l'impostazione e che definirà il suo valore predefinito e il metodo di trasporto.
Tutto questo dovrebbe essere relativamente facile se hai seguito il precedente articolo. Quindi appena sotto la chiamata a add_section, aggiungere la seguente chiamata:
$ wp_customize-> add_setting ('tcx_display_header', array ('default' => 'true', 'transport' => 'postMessage')); Nello specifico, abbiamo creato una nuova impostazione chiamata tcx_display_header che useremo per alternare la visualizzazione dell'intestazione usando entrambi get_theme_mod e usando JavaScript.
Ma questo non è abbastanza per dare all'utente la possibilità di modificare la visibilità dell'intestazione - ora dobbiamo implementare un controllo.
Ai fini di questa particolare impostazione, introdurremo una casella di controllo che consentirà agli utenti di attivare la visibilità delle impostazioni.
Innanzitutto, dobbiamo definire il controllo. Per fare ciò, aggiungere il seguente codice sotto la chiamata a add_setting che abbiamo definito sopra:
$ wp_customize-> add_control ('tcx_display_header', array ('section' => 'tcx_display_options', 'label' => 'Display Header?', 'type' => 'checkbox')); In questa chiamata, vincoliamo il controllo a tcx_display_header impostazione in modo che sappia quali informazioni visualizzare. Nell'array, forniamo l'ID della sezione a cui sono vincolati questa impostazione e questo controllo. Successivamente, forniremo l'etichetta che apparirà accanto al controllo e, infine, definiremo il tipo di controllo. Ovviamente, stiamo definendo una casella di controllo.
A questo punto, dovresti essere in grado di salvare il tuo lavoro, aggiornare il customizer del tema e poi vedere qualcosa di simile a questo:
Questo è buono - significa che tutto è stato cablato correttamente per quanto riguarda il Customizer tema, ma si noti che facendo clic sulla casella di controllo in realtà non è fare nulla.
Ora è il momento di collegare il Personalizzatore del tema al tema reale.
Per prima cosa, vogliamo aprire a tema customizer.js. Se hai seguito, allora questo si trova nel js directory che abbiamo definito in precedenza nella serie.
Successivamente, dobbiamo aggiungere il seguente codice:
wp.customize ('tcx_display_header', function (value) value.bind (function (to) false === to? $ ('#header') .hide (): $ ('#header') .show ( ););); Si noti che prende l'ID dell'impostazione creata e quindi esegue la seguente logica: Se a è uguale a falso, quindi nasconderemo l'elemento di intestazione; altrimenti, mostriamo l'elemento di intestazione.
A questo punto, aggiorna la pagina e dovresti notare che l'intestazione scompare (o riappare) quando si attiva la casella di controllo.
Ma quando salvi il tuo lavoro, non succede nulla. Questo perché il valore serializzato non viene letto. L'ultima cosa che dobbiamo fare è sfruttare get_theme_mod per le impostazioni.
get_theme_mod Infine, l'ultima parte della metodologia necessaria per implementare la nostra impostazione è assicurarsi che il valore memorizzato tramite il trasporto venga letto quando la pagina viene caricata.
Per fare ciò, individuare il tcx_customizer_css funzione e quindi aggiungere il seguente codice tra il stile bloccare:
#header display: none;
In breve, questo legge il valore del tema per l'ID del valore di visualizzazione dell'intestazione che abbiamo salvato. Se è impostato su false, nasconde l'elemento di intestazione; in caso contrario, il CSS non viene mai visualizzato.
A questo punto, dovresti avere un'implementazione pienamente funzionante della casella di controllo che attiva dinamicamente l'intestazione quando l'utente sta lavorando con il customizer e che sfrutta il valore serializzato quando l'impostazione viene salvata e aggiorna ciò che l'utente vede ogni volta che caricare il tema.
Ora che abbiamo definito una metodologia per l'implementazione di sezioni, impostazioni e controlli, possiamo iniziare a lavorare con una varietà di altri controlli,.
Nel prossimo articolo, daremo un'occhiata al restante insieme di controlli di base, e dopo di ciò daremo un'occhiata ad alcuni dei controlli più avanzati offerti da WordPress nel Customizer tema..
Come con le versioni precedenti del tema, puoi scaricare la versione 0.4.0 da GitHub per rivedere il codice, giocarci intorno e prepararti per il prossimo set di controlli che introdurremo nel seguente articolo.
