Share
WordPress offre agli sviluppatori di temi un potente sistema per la creazione di sistemi di opzioni a tema facili da usare tramite il Theme Customizer. Mentre il customizer fornisce un eccellente sistema di anteprima in tempo reale e una grande esperienza utente complessiva, la definizione dell'output delle opzioni impostate nel customizer può diventare disordinata.
In questo tutorial, ti mostrerò come semplificare le opzioni di colore impostate nel customizer in CSS nel front-end. Questo semplice sistema può essere adattato per l'uso con altre proprietà CSS e. Ciò significa che è possibile utilizzare queste tecniche per lavorare con le opzioni impostate tramite altri metodi rispetto al Customizer tema.
Troppo spesso, ottenere colori e altre opzioni impostate in Theme Customizer implica un codice disordinato che mischia PHP e CSS.
Per esempio:
Accentsconagua
add_action ('wp_head', 'slug_theme_customizer_css'); function slug_theme_customizer_css () ?> Il problema con questo codice non è puramente estetico, o è difficile da leggere. È troppo facile commettere un errore. Ad esempio, la chiusura dei tag PHP, seguita dalla chiusura della dichiarazione CSS, porta a questo:?>;, che sembra sbagliato, ma è tecnicamente corretto.
Mentre è possibile avviare questa funzione ottenendo tutti i valori di colore necessari nelle variabili, è comunque necessario aprire i tag PHP per fare eco ai loro valori nel CSS. Comunque, è un buon inizio. La possibilità di inserire valori di colore CSS in variabili, ovviamente, è uno dei tanti aspetti positivi dell'utilizzo di un preprocessore CSS.
Mentre è possibile aggiungere un vero e proprio processore Sass o LESS al tuo tema, e ci sono plugin per farlo, questo è andare fuori bordo per un semplice compito di convertire poche variabili in valori esadecimali. Invece, ti mostrerò come creare un semplice preprocessore nel tuo tema con solo poche righe di codice.
Migliore CSS Markup
La prima cosa che devi fare è creare un file nel tuo tema chiamato customizer.css. Questo file potrebbe davvero avere qualsiasi estensione, ma dandogli un css estensione significa che il tuo editor di codice o IDE lo tratterà come un file CSS rendendo più facile lavorare con.
Nel customizer.css puoi riformattare quel brutto codice dell'esempio precedente in questo:
h1.site-title a color: [site_title_color]; h3.site-description color: [site_description_color];
Come puoi vedere, ora puoi scrivere CSS come se fosse CSS. Sostituisci semplicemente i valori che verranno impostati dal customizer con il nome del theme_mod tra parentesi. Queste stringhe saranno sostituite dal nostro preprocessore con il loro valore dal database. La cosa più importante qui è che usi il nome delle tue mod tema come valore sostitutivo nel CSS non elaborato.
Costruisci il tuo preprocessore
Il preprocessore stesso è in realtà incredibilmente semplice in quanto prende il contenuto del tuo customizer.css e usa il PHP str_replace () funzione per sostituire i valori tra parentesi con i valori del customizer.
L'intero sistema coinvolge una semplice classe con tre metodi e una funzione al di fuori della classe, agganciata a wp_head per generare CSS elaborati e ottimizzati. Tieni presente che questo codice presuppone che tutti i dati di cui abbiamo bisogno siano memorizzati in mod tema, che è l'impostazione predefinita per il customizer del tema. Potrebbe essere necessario sostituire get_theme_mod () con get_option () nel tuo codice, a seconda delle tue esigenze.
Questa classe usa a per ciascuno loop in ogni metodo. Se non hai familiarità con come per ciascuno loop, ti consiglio di dare un'occhiata al mio articolo su come lavorare con loop e array. Inoltre, se non hai familiarità con le classi PHP o il PHP orientato agli oggetti (OOP) in generale, dovresti dare un'occhiata alla serie introduttiva di Tom McFarlin su OOP.
Per iniziare, in un tuo functions.php o in un file incluso in esso, creare una classe vuota chiamata slug_theme_customizer_output sostituendo "slug" con la lumaca unica del tuo tema. Dovrebbe sembrare come questo:
class Slug_Theme_Customizer_Output
Il primo metodo nella classe sarà dove imposterai le mod tema che userete, così come i valori predefiniti per ogni mod tema. Si imposta ognuno in un array sotto forma di theme_mod => predefinito. Attaccando con le stesse due impostazioni di prima, vorrebbe questo:
function theme_mods () return array ('site_title_color' => '# ff0000', 'site_description_color' => '# 000'); Il prossimo passo sarà quello di ottenere il valore corrente di ciascuno theme_mod e lo metto in un array che possiamo usare nel nostro vero preprocessore. Questo metodo ottiene semplicemente ogni valore dal theme_mods () metodo e passa la chiave come primo argomento, che è il nome di theme_mods in get_theme_mods () passando il valore predefinito come secondo argomento, che verrà restituito se non c'è nulla impostato in quel tema mod. Sembrerà così:
function prepare_values () $ colors = array (); // Ottieni le nostre mod tema e i valori predefiniti. $ theme_mods = $ this-> theme_mods (); // Per ogni mod tema, restituisce il valore della mod tema o il valore predefinito. foreach ($ theme_mods as $ theme_mod => $ default) $ colors [$ theme_mod] = get_theme_mod ($ theme_mod, $ default); restituire $ colori;
Ora abbiamo un array sotto forma di 'theme_mod_name' => 'valore da sostituire' e siamo pronti a elaborare il CSS nel terzo e ultimo metodo di questa classe.
Nel per ciascuno loop in questo metodo, stiamo sfruttando l'abilità che PHP ci offre per trattare la chiave e il valore dell'array come variabili separate. Questa è una funzionalità davvero potente di PHP per ciascuno cicli che richiedono una piccola pianificazione sul modo in cui ogni array è strutturato e rende la vita molto più semplice.
Il primo passo sarà l'uso file_get_contents () convertire il customizer.css file in una stringa e memorizzarlo in una variabile. Dal momento che questa funzione causerà un errore fatale se non riesce a trovare il file, abbiamo bisogno di avvolgere tutto il codice in questo metodo in un test se il file esiste.
Si noti che questo codice lo presuppone customizer.css si trova nella stessa directory della classe, potrebbe essere necessario regolare la struttura del file del tema. Ecco come iniziamo questo metodo:
function process () $ css = "; // Modifica questo nome file e / o percorso per soddisfare le tue esigenze. $ theme_customizer_file = trailingslashit (dirname (__FILE__)). 'theme_customizer.css'; // Assicurati che il file esista. (file_exists ($ theme_customizer_file)) // Ottieni i contenuti del file. $ css = file_get_contents ($ theme_customizer_file);
Come ho detto prima, questo intero metodo è racchiuso in un controllo se il file esiste. Ciò significa che tornerà falso se il file non viene caricato. Tienilo a mente poiché dovremo rendere conto di questa possibilità in seguito.
Ora che abbiamo il CSS come una stringa, avremo bisogno di ottenere i nostri array di valori di sostituzione dal prepare_values () metodo. Di nuovo, useremo la chiave dell'array e la variabile come variabili separate nel per ciascuno ciclo continuo. Per ciascuno theme_mod dobbiamo aggiungere parentesi intorno a esso, quindi possiamo usarlo per sostituire la stringa di sostituzione nel CSS con str_replace (), come questo:
// Prendi i nostri colori. $ colors = $ this-> prepare_values (); // Sostituisci ogni colore. foreach ($ colors as $ theme_mod => $ color) $ search = '['. $ theme_mod. ']'; $ css = str_replace ($ search, $ color, $ css);
Questo ciclo ci fornirà CSS completamente valido con tutti i nostri nomi di mod tema tematici sostituiti con i codici esadecimali corretti per i colori. Tutto ciò che rimane è il wrapping del CSS elaborato nei tag di stile appropriati prima di restituirlo:
// Aggiungi tag di stile. $ css = ''; return $ css;
Questo è l'intero preprocessore. L'unico passo rimanente è l'output del nostro CSS stesso. Per fare questo, possiamo usare una funzione, al di fuori della classe che inizializza la classe e la stampa nell'intestazione del tema.
Questa funzione assomiglia a questa:
add_action ('wp_head', 'slug_theme_customizer_output'); function slug_theme_customizer_output () // Assicurati che la nostra classe esista. if (class_exists ('Slug_Theme_Customizer_Output')) // Inizializza la classe e ottieni i css elaborati. $ class = new Slug_Theme_Customizer_Output (); $ css = $ class-> process (); // Per sicurezza, assicurati che il metodo 'process' non abbia restituito false o qualcosa di diverso da una stringa. if ($ css && is_string ($ css)) echo $ css; Se ti ricordi da prima, il metodo processi() può restituire false se non è possibile caricare il file CSS. Per rendere conto di questa possibilità, prima di riecheggiare il valore di processi() metodo, è importante assicurarsi che non restituisca false, né restituisca tutto ciò che non è una stringa.
Ottimizzazione extra extra
Mentre potremmo fermarci, mi piacerebbe rendere le cose un po 'più efficienti. Questo sistema funziona perfettamente, ma esegue anche molte elaborazioni ripetitive, complete di quelle che potrebbero essere diverse query di database su ogni caricamento di pagina. Personalmente, preferisco ignorare l'esecuzione dell'intera classe e invece ottenere solo una stringa dal database.
Per fare ciò possiamo rielaborare la funzione di output per memorizzare in cache il CSS in un transitorio. In questo modo, quando possiamo saltare l'intera classe del preprocessore se il transitorio ha un valore, se così non fosse, possiamo eseguire l'intero processo e ri-memorizzarlo nella cache. Ecco la funzione di output modificato:
add_action ('wp_head', 'slug_theme_customizer_output'); function slug_theme_customizer_output () // O imposta il css sul transiente o ricompila. if (false === ($ css = get_transient ('slug_theme_customizer_css'))) // Assicurati che la nostra classe esista. if (class_exists ('Slug_Theme_Customizer_Output')) // Inizializza la classe e ottieni i css elaborati. $ class = new Slug_Theme_Customizer_Output (); $ css = $ class-> process (); // cache css per la prossima volta. set_transient ('slug_theme_customizer_css', $ css); // Per sicurezza, assicurarsi che il metodo 'process' non abbia restituito falso o qualcosa di diverso da una stringa. if ($ css && is_string ($ css)) echo $ css; Ora, se c'è un valore impostato nel transitorio slug_theme_customizer_css può essere ripetuto direttamente, dopo aver superato gli stessi test per assicurarsi che non sia né l'uno né l'altro falso o non una stringa. La classe del preprocessore non viene caricata e al database viene eseguita una sola query. Se il transitorio ritorna falso, il processo viene eseguito e il valore viene memorizzato nella cache per la volta successiva.
Certo, vogliamo essere sicuri che quando le mod del tema vengono aggiornate, cancelliamo il transitorio in modo che non venga emessa un'uscita dalle impostazioni della data. WordPress lo elaborerà ogni volta che viene aggiornata un'opzione specifica.
Possiamo usare questa azione poiché le mod di tema sono l'opzione memorizzata con il nome del tema a cui è associata. Ad esempio, le mod di tema di TwentyFourteen sono memorizzate nell'opzione theme_mods_twentyfourteen. Ecco come usiamo questa azione, per cancellare i nostri transitori:
/ ** * Reimposta il transitorio slug_theme_customizer_css quando le mod di tema vengono aggiornate. * / // Visualizza il nome del tema corrente. $ theme = get_stylesheet (); add_action ("update_option_theme_mods _ $ theme", 'slug_reset_theme_customizer_css_transient'); function slug_reset_theme_customizer_css_transient () delete_transient ('slug_theme_customizer_css'); Metterlo in uso e portarlo avanti
Ora che puoi scrivere il tuo CSS che viene aggiornato dal personalizzatore del tema con le variabili, una cosa che potresti voler considerare è usare un mod tema in molti posti.
Ad esempio, invece di impostare un tema_mod per ogni colore del tema e causare un sovraccarico di opzioni, come scegliere le opzioni per il colore primario, il colore secondario e il colore di accento?
Il sistema che ti ho mostrato come creare qui funziona solo con le opzioni di colore, rendendolo davvero utile solo per le proprietà CSS come colore, colore di sfondo, colore del bordo, ecc. Puoi estenderlo per essere utile per altri tipi di proprietà.
Ricordati di non reinventare Sass o LESS, il punto di tutto questo era evitare di gonfiare il tuo tema con un'implementazione PHP completa Sass o LESS, che sono già disponibili come plugin.
