Share
Nell'ultimo articolo, abbiamo definito una semplice metodologia per tutto ciò che è necessario per stabilire una nuova sezione, impostazioni e controlli all'interno della personalizzazione del tema.
In questo articolo, continueremo a fare più o meno lo stesso; tuttavia, aggiungeremo nuove impostazioni e controlli alla sezione esistente, ma esamineremo una serie di opzioni diverse come i pulsanti di opzione, le caselle di selezione e le caselle di input.
Quindi, detto questo, continuiamo.
Ricordiamo dall'ultimo articolo che la nostra metodologia è la seguente:
Accentsconagua
get_theme_mod Lo faremo per ciascuno dei nuovi controlli sulle seguenti impostazioni e controlli. Se necessario, parleremo della convalida dei dati e dell'igienizzazione, se necessario.
Una volta che abbiamo raggiunto la fine dell'articolo, una versione del codice di questo articolo sarà disponibile per il download da GitHub.
Aggiungiamo una nuova opzione al Customizer tema che consente all'utente di scegliere tra combinazioni di colori: una è la combinazione di colori nero su bianco predefinita, l'altra sarà l'inversa.
Per fare questo, prima dobbiamo aggiungere un'impostazione e un controllo al nostro tcx_register_theme_customizer funzione. Aggiungi le seguenti due chiamate di funzione di seguito:
$ wp_customize-> add_setting ('tcx_color_scheme', array ('default' => 'normal', 'transport' => 'postMessage')); $ wp_customize-> add_control ('tcx_color_scheme', array ('section' => 'tcx_display_options', 'label' => 'Color Scheme', 'type' => 'radio', 'choices' => array ('normale' => 'Normal', 'inverse' => 'Inverse'))); Si noti sopra che stiamo aggiungendo una nuova impostazione identificata dal tcx_color_scheme ID e stiamo ovviamente utilizzando il postMessage tipo di trasporto.
In secondo luogo, nota che abbiamo anche fornito un predefinito valore impostato su normale. Questo valore è ciò che ci porta al add_control chiamata.
Si noti che lo stiamo legando al tcx_display_options che abbiamo definito nell'ultimo articolo. Gli abbiamo dato l'etichetta Combinazione di colori dal momento che è ovviamente quello che stiamo cambiando, e stiamo impostando il genere di controllo come a Radio pulsante.
Per fare ciò, dobbiamo passare una serie di scelte in cui la prima chiave è il valore dell'opzione e il secondo valore è l'etichetta per il pulsante di opzione.
Questo è il motivo per cui il valore predefinito per add_setting la chiamata è impostata su normale.
Ora dovremmo essere in grado di salvare il nostro lavoro, aggiornare il Customizer tema e quindi vedere la nuova opzione.
Ma a questo punto, non farà ancora molto.
Ora, dobbiamo saltarci sopra JS / theme-customizer.js e aggiungi il seguente blocco di codice:
wp.customize ('tcx_color_scheme', function (value) value.bind (function (to) if ('inverse' === a) $ ('body') .css (background: '# 000', color: '#fff'); else $ ('body') .css (background: '#fff', color: '# 000'););); Questo ordina al Customizzatore del tema di cambiare il corpoIl colore di sfondo e il colore del carattere sono basati sull'impostazione dei pulsanti di opzione.
Implementando questo codice, si dovrebbe essere in grado di aggiornare il Customizer tema e quindi vedere le modifiche si verificano. Il fatto è che i valori non vengono effettivamente salvati nel database.
get_theme_mod L'ultima cosa che dobbiamo implementare per assicurarci che i dati vengano letti dal database per cambiare lo schema dei colori è aggiungere uno stile al stile blocco nel tcx_customizer_css funzione:
sfondo: # 000; colore: #fff; sfondo: #fff; colore: # 000;
Abbastanza facile da capire, giusto? Funziona esattamente come fa il nostro codice JavaScript, tranne per il fatto che si applica effettivamente al tema quando la pagina viene caricata anziché solo durante l'anteprima.
Ora, continueremo il processo introducendo un'altra impostazione e un altro controllo usando la nostra metodologia in modo che i nostri utenti possano selezionare un carattere globale per il loro tema.
Per fare questo, useremo a selezionare elemento con una serie di opzioni da cui l'utente può scegliere il fronte desiderato.
A questo punto, la metodologia dovrebbe diventare molto familiare.
Innanzitutto, definiremo un'impostazione per il tcx_font che useremo per fare riferimento a tutto il codice un po 'più tardi:
$ wp_customize-> add_setting ('tcx_font', array ('default' => 'times', 'transport' => 'postMessage')); Proprio come con l'impostazione precedente, siamo forniti predefinito valore che definiremo momentaneamente quando implementeremo un nuovo controllo.
Come accennato in precedenza, daremo agli utenti la possibilità di selezionare un font usando a selezionare elemento. Questo è molto simile a come funzionano i pulsanti radio in cui forniremo a un array chiavi e valori che definiscono il carattere; tuttavia, il reale genere dell'elemento sarà diverso.
Quindi detto questo, aggiungi il seguente codice al tcx_register_theme_customizer funzione:
$ wp_customize-> add_control ('tcx_font', array ('section' => 'tcx_display_options', 'label' => 'Tema Font', 'tipo' => 'seleziona', 'scelte' => array ('volte' => 'Times New Roman', 'arial' => 'Arial', 'courier' => 'Courier New'))); Questo introdurrà a selezionare elemento nel Customizer tema con le seguenti tre opzioni per i caratteri:
E ora, dobbiamo scrivere le opzioni dei caratteri in modo che cambino dinamicamente il carattere del tema.
Per fare questo, apri JS / theme-customizer.js e quindi aggiungere il seguente blocco di codice. Si noti che questo sarà un po 'più complicato di quello che siamo abituati a fare nel Personalizzatore di temi JavaScript.
Innanzitutto, assicurati di averlo var sFont definito nella parte superiore del file JavaScript appena sopra la prima chiamata a wp.customize.
Successivamente, aggiungi il seguente blocco di codice:
wp.customize ('tcx_font', function (value) value.bind (function (to) switch (to.toString (). toLowerCase ()) case 'times': sFont = 'Times New Roman'; caso 'arial': sFont = 'Arial'; break; case 'courier': sFont = 'Courier New, Courier'; break; case 'helvetica': sFont = 'Helvetica'; break; default: sFont = 'Times New Roman '; break; $ (' body ') .css (fontFamily: sFont););); Sebbene la funzione sia leggermente più lunga, in realtà è piuttosto semplice: stiamo prendendo il valore in entrata e quindi usiamo a scatola dell'interruttore per determinare quale font è stato selezionato. In base al valore selezionato, lo assegniamo al sFont variabile.
E, per scopi di codifica difensiva, se uno non è definito o qualcosa va storto durante il trasporto, allora ci occuperemo di default Times New Roman.
Infine, l'allora applica il valore di sFont al famiglia di font attributo del corpo elemento usando jQuery css funzione.
get_theme_mod Ora, nel rispetto della nostra metodologia, dobbiamo aggiornare il nostro tcx_customizer_css funzione in modo che il carattere sia applicato correttamente al corpo.
Questa è in realtà una semplice chiamata:
famiglia di font:
Fatto.
Infine, permettiamo all'utente di regolare il messaggio di copyright che appare nella parte inferiore del modello del piè di pagina.
Modifichiamo il modello ora. Al momento dovrebbe assomigliare a questo:
© Tutti i diritti riservati
Ma aggiorniamolo per assomigliare a questo:
©
Anche se questo sta diventando un po in anticipo rispetto alla nostra metodologia, è necessario che definiamo in modo che il Personalizzatore del tema possa trarre vantaggio dal nuovo campata elemento, e in modo che possiamo visualizzare il messaggio di copyright come definito dall'utente.
Innanzitutto, introdurremo la nostra impostazione finale:
$ wp_customize-> add_setting ('tcx_footer_copyright_text', array ('default' => 'Tutti i diritti riservati', 'sanitize_callback' => 'tcx_sanitize_copyright', 'transport' => 'postMessage')); Ma notate qui, c'è una cosa che è diversa dagli input precedenti e questa è la chiave e il valore "sanitize_callback". Questo definisce una funzione da attivare quando i dati vengono serializzati nel database - dopotutto, non inseriamo contenuti illegali nel database.
Quindi, facciamo a questo, definiremo una funzione chiamata tcx_sanitize_copyright questo eliminerà tutti i tag, le barre e altri tag illegali che dovrebbero essere serializzati nel database:
function tcx_sanitize_copyright ($ input) return strip_tags (stripslashes ($ input));
Restituiamo semplicemente il valore dell'ingresso igienizzato.
Successivamente, è il momento di aggiungere il controllo effettivo per l'impostazione.
$ wp_customize-> add_control ('tcx_footer_copyright_text', array ('section' => 'tcx_display_options', 'label' => 'Copyright Message', 'type' => 'text')); Qui, di nuovo, lo leghiamo al tcx_display_options sezione e gli stiamo dando l'etichetta "Copyright Message" per gli utenti di essere tabella da leggere. Infine, abbiamo definito questo come un testo ingresso.
Ovviamente, in questo momento, sai che non siamo in grado di fare nulla con il controllo finché non lo abbiamo cablato su JavaScript.
Il JavaScript per questo è molto semplice, specialmente se hai dato il campata elemento un ID univoco come abbiamo fatto sopra.
wp.customize ('tcx_footer_copyright_text', function (value) value.bind (function (to) $ ('# copyright-message') .text (to););); In sostanza, prende il valore del a argomento e quindi lo imposta come valore del campatail testo.
get_theme_mod E infine, sebbene l'abbiamo già fatto nel modello, procederemo a rivedere il codice qui:
©
Si noti che stiamo leggendo il valore di tcx_footer_copyright_text e quindi stampiamo quel valore sullo schermo.
E per ora, questo è tutto! Abbiamo dato un'occhiata ad alcuni controlli di base, dato che l'utente ha una notevole quantità di controllo sull'aspetto di questo tema benché di base, e abbiamo spiegato come introdurre la disinfezione dei dati insieme al processo di serializzazione.
L'unica cosa che rimane da coprire sono alcuni dei controlli più avanzati e integrati che offre WordPress. Quindi nel prossimo articolo daremo un'occhiata ad alcune di queste funzionalità e a come implementarle.
!
