Share
Consentire a un utente finale di modificare il carattere del tema può essere un compito intimidatorio, soprattutto quando si desidera fornire questa opzione all'interno di un pannello di amministrazione personalizzato, un metabox o anche il personalizzatore del tema. Oggi parlerò di come aggiungere un'abitudine font tipo opzione tramite Titan Framework.
Il font l'opzione type è una delle opzioni più versatili in termini di funzionalità in Titan Framework. Non solo ti consente di cambiare il carattere, ma è anche completo selettore di stile del carattere. Con una gamma completa di opzioni ricche di funzionalità, puoi scegliere sia i caratteri sicuri per il Web che i Google WebFonts al suo interno. Applica il numero di stili desiderato, ad es. colori, spaziatura lettere, ombre, altezza riga, ecc. Un utente finale può anche guardare l'anteprima di come appaiono il carattere e i suoi stili. Ecco come appare questa opzione:
Nell'immagine sopra puoi vedere quanto sono dettagliate le impostazioni del carattere. Questo è possibile tramite una serie di parametri di impostazione supportati da questa opzione. Ci sono alcuni parametri obbligatori e facoltativi. Per prima cosa, diamo un'occhiata a quelli obbligatori:
Accentsconagua
font tipo opzione.Ora alcuni dei parametri opzionali che dovresti usare sono:
font tipo opzione, questo parametro si comporta in modo leggermente diverso. Prende un array che contiene alcuni font e stili predefiniti che si desidera utilizzare (maggiori informazioni in seguito).Infine, c'è una lunga lista di alcuni parametri basati su check, i cui valori di default sono impostati su vero. Diamo loro un nome e scopriremo come si comportano se impostati falso.
falso.falso.falso.falso.falso.falso.falso.falso.falso.falso.falso.falso.falso quindi il carattere di Google (se utilizzato) non verrà automaticamente accodato.È possibile aggiungere il font inserisci l'opzione all'interno:
Lo scopo di questo articolo non riguarda la creazione di questi contenitori. Puoi fare riferimento ai miei articoli precedenti se vuoi saperne di più.
Il processo generale di aggiunta di questo tipo di opzione rimane lo stesso:
getInstance () funzione.createOption () funzione.getOption () funzione. Creiamo questa opzione all'interno di un pannello di amministrazione.
Ecco il codice:
createOption (array ('id' => 'aa_font', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'font', // Tipo di opzione che stiamo creando 'name' => 'My Font Option', // Nome dell'opzione che verrà visualizzata nel pannello di amministrazione 'desc' => 'Scegli le impostazioni del tuo carattere' // Descrizione dell'opzione che verrà visualizzata nel pannello di amministrazione)); Ho usato il createOption () funzione (riga # 7) per aggiungere a font digita l'opzione in un pannello di amministrazione $ aa_panel. Questa funzione occupa una serie di parametri. Ecco perché parametri come nome, id, tipo e disc sono usati qui Il valore dell'ID (ad es. aa_font) dovrebbe essere univoco perché ottiene i valori delle opzioni salvate.
Nell'immagine sopra, c'è un font digitare l'opzione denominata La mia opzione Font all'interno di un pannello di amministrazione Opzioni ordinate. Ci sono diverse opzioni di impostazione che possono essere impostate per configurare le impostazioni dei font del tuo progetto di sviluppo web.
Ora recupererò i valori delle opzioni salvate.
getOption ('aa_font'); / ** * * Stampa dei valori degli array di caratteri * * / var_dump ($ aa_font_array); ?>Il processo per ottenere i valori salvati è praticamente lo stesso che è stato discusso nei precedenti articoli. Alla riga n. 3, il getInstance () viene utilizzata la funzione, che utilizza un parametro univoco, preferibilmente il nome del tema (es. pulitoin questo caso). Successivamente, ho usato il getOption () funzione (riga # 6), che ottiene il valore tramite l'ID aa_font, e poi l'ho salvato in una nuova variabile $ aa_font_array.
In precedenza, abbiamo stabilito che il font l'opzione type accetta una serie di impostazioni dei parametri anche se non li definiamo nella realtà perché il loro valore predefinito è impostato su vero. Quindi, prima di visualizzare i valori recuperati sul front-end, mi permetta di stampare questo array completo di parametri.
Per questo ho usato il var_dump () funzione (alla riga n. 16) per la variabile $ aa_font_array. Scopriamo come viene stampato questo array:
Nello screenshot qui sopra, viene elencata una descrizione dettagliata di ogni elemento di una matrice. Spiega chiaramente come font l'opzione di tipo in Titan Framework è impostata.
Ora questa parte era solo una cosa aggiuntiva: il nostro obiettivo principale è modificare le impostazioni predefinite dei font e stamparli sul front-end.
Sostituisci la riga n. 16 con le seguenti righe di codice:
Pellentesque habitant morbi tristique.
Nella riga # 7, ho usato lo stile CSS in linea all'interno di un tag H3 (titolo 3). Il valore corrispondente al stile attributo,vale a dire. dimensione del font, viene stampato sul front-end.
Per questo scopo, ho incorporato il eco comando, che stampa solo una parte specifica dell'array, ad es. echo $ aa_font_array ['font_size'], nel CSS in linea. A questo punto, il front-end appare così:
Il testo stampato è attualmente 14px in misura. Cambiamo questo valore dalla nostra dashboard e visualizziamo l'anteprima del risultato.
Supponiamo che io abbia impostato il valore demo su 30px.
Salva questa impostazione e scopri le modifiche. Ecco lo screenshot:
Un aumento dimensione del font del testo è visto chiaramente. In questo modo è possibile inserire qualsiasi elemento dell'array nella riga n. 16 del codice e visualizzare in anteprima i risultati.
Creiamo a font digitare l'opzione in un metabox che ha tutti i campi di stile dentro.
createOption (array ('id' => 'aa_mb_font', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'font', // Tipo di opzione che stiamo creando 'name' => 'My Font Option', // Nome dell'opzione che verrà visualizzata 'desc' => 'Scegli le impostazioni del font' // Descrizione dell'opzione che verrà visualizzata));Ho aggiunto un font digitare l'opzione con ID aa_mb_font in un metabox $ aa_metbox via il createOption () funzione (riga n. 8). Appare contro il nomeLa mia opzione Font'.
Ecco lo screenshot, dove puoi trovare La mia opzione Font all'interno di un metabox visualizzato alla fine di una schermata di modifica della pagina.
Questo è un metabox personalizzato che ho creato con Titan Framework. Fare riferimento ai miei precedenti articoli per sapere come.
Ora recupererò i valori delle opzioni salvate.
getOption ('aa_mb_font', get_the_ID ()); // Controlla se il valore è stato impostato / Validazione $ aa_mb_font1_val = (is_array ($ aa_mb_font1_array) &&! Empty ($ aa_mb_font1_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// // Ottieni tutti i valori necessari Abstraction di PHP e HTML // //////////////////////// ///////////////////////////////////// // Ottieni valore colore $ aa_mb_font1_clr_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['color']: 'red'); // Ottieni il valore della famiglia di font $ aa_mb_font1_ffm_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['font-family']: 'Arial'); // Ottieni il valore della dimensione del carattere $ aa_mb_font1_fsz_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['font-size']: '14px'); / ** * * Stampa valori su front-end * * /?> Valore stampato dell'opzione del tipo di carattere nel metabox. Il processo per ottenere i valori che sto usando qui è piuttosto complesso. In primo luogo ottenere un'istanza unica tramite il getInstance () funzione nella riga # 3. Quindi, recuperare il valore salvato tramite la registrazione dell'ID aa_mb_font dentro il getOption () funzione come parametro (riga n. 11).
Adesso, aa_mb_font non è un ID ordinario, ma contiene un array associativo completo delle nostre opzioni di carattere. Ho salvato questo array associativo in una nuova variabile $ aa_mb_font1_array.
La linea # 14 convalida la presenza di un array all'interno di una variabile $ aa_mb_font1_array e controlla che non sia vuoto. Questo passaggio è importante perché non vogliamo finire con errori fatali di PHP emettendo un elemento di una variabile che non è nemmeno una matrice in primo luogo.
A volte, quando l'utente non ha salvato alcun valore dal dashboard e non hai impostato alcun valore predefinito, questo getOption la funzione diventa NULLO. A tal fine, viene utilizzata una dichiarazione basata su assegni. Se è un array e non è vuoto, allora mette a VERO valore, oppure se non è un array ed è vuoto allora imposta FALSE come valore di $ aa_mb_font1_val.
Se VERO, allora significa:
$ aa_mb_font1_array è un array.$ aa_mb_font1_array non è una matrice vuota, ma contiene elementi in essa. Se FALSE, allora significa:
$ aa_mb_font1_array non è una matrice, o $ aa_mb_font1_array è un array vuoto e non contiene elementi. Questa è stata una convalida generale dell'array di font. Ora estenderò questo processo ai singoli elementi dell'array. Le righe da # 21 a # 27 ottengono i valori delle singole chiavi nell'array associativo e definiscono un valore predefinito se non esiste alcun valore.
Ad esempio, la riga n. 21 spiega che se la condizione definita è valida VERO, il che significa che esiste un valore, quindi recuperare il colore di un array e salvarlo in una variabile $ aa_mb_font1_clr_val. Se non esiste un tale valore, impostare il valore su rosso, che è di default in questo caso. Ci sono diversi modi per ovviare a questo, quindi è solo uno dei modi che mi piacciono.
In breve, se un utente ha salvato un nuovo colore di carattere dalla sua bacheca, viene visualizzato il colore del carattere selezionato; altrimenti rossoè mostrato. Ti consiglio di impostare le opzioni predefinite mentre imposti il carattere per evitare tali problemi.
La stessa spiegazione si applica alle righe 24 e 27, eccetto per il fatto che queste righe convalidano i valori per famiglia di font e dimensione del font.
Alla fine, ho appena scritto il codice che stampa il risultato sul front-end. Nelle righe da # 38 a # 48, viene creato un div in HTML. Poi ho fatto eco ai valori di tutte le variabili desiderate tramite lo stile CSS in linea.
Supponiamo di aver impostato le seguenti impostazioni del font demo:
Ecco come appare al front-end:
Ora puoi provare alcune nuove impostazioni.
Creiamo questa opzione all'interno di una scheda di amministrazione, ma con un approccio diverso.
createOption (array ('id' => 'aa_font_in_tab1_panel2', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'font', // Tipo di opzione che stiamo creando 'name' => 'My Font Option', // Nome dell'opzione che verrà visualizzata nel pannello di amministrazione 'desc' => 'Choose font settings', // Descrizione dell'opzione che verrà visualizzata nel pannello di amministrazione 'show_font_weight' => false, // Il campo Font-weight non viene mostrato 'show_font_style' => false, // Il campo stile font non viene mostrato 'show_line_height' => false, // Il campo line-height non viene mostrato 'show_letter_spacing' => false, // Il campo di spaziatura delle lettere non viene mostrato 'show_text_transform' => false, // Il campo di trasformazione del testo non viene mostrato 'show_font_variant' => falso, // Il campo della variante del font non viene mostrato 'show_text_shadow' => false, // Il campo ombreggiatura testo non viene mostrato 'default' => array ('font-family' => 'Arial', // valore predefinito di font-family 'color' => 'red', // valore predefinito del colore del carattere ' line-height '=>' 2em ', // Valore predefinito di line-height' font-w eight '=>' 500 '// Valore predefinito di font-weight))); Questa volta sto aggiungendo un font digita l'opzione ma ne consente solo alcuni campi di stile apparire. L'ID univoco di questa opzione è aa_font_in_tab1_panel2. Guarda l'elenco dei parametri e scoprirai cosa rende questo codice diverso da quello precedente.
Ho cambiato il predefinito valori di diversi parametri basati su check in falso. Ciò significa che non verranno visualizzati tutti i campi di stile delle righe da # 13 a # 19. Si noti anche la presenza di predefinito valori per le opzioni di stile come font-family, color, line-height e font-weight.
UN font digitare l'opzione denominata La mia opzione Font esiste in Scheda 1 del pannello di amministrazione Opzioni Neat 2. Se vuoi sapere come è stata creata questa scheda di amministrazione tramite Titan Framework, sfoglia i precedenti articoli di questa serie.
Nell'immagine sopra, il menu dei caratteri appare meno dettagliato in termini di campi di stile. La ragione è abbastanza ovvia, cioè il falso stato di un numero di parametri nel mio codice. Notare un'altra cosa: i valori predefiniti delle opzioni sono impostati automaticamente, vale a dire. 'font-family' => 'Arial' e color => 'red'.
Ho saltato qualche dettaglio? Sì! Sono sicuro che ti starai chiedendo dove sono i valori predefiniti di altezza della linea e font-weight andato. Guarda di nuovo l'elenco dei parametri e troverai i valori di show_line_height e show_font_weight sono impostati su falso.
Ciò significa che, indipendentemente dalla capacità di definire un parametro, funzionerà solo una volta impostato su vero. L'unico scopo di aggiungere questi due parametri era spiegare questo concetto. Per ora, puoi omettere anche questi.
Prendiamo i valori delle opzioni salvate:
getOption ('aa_font_in_tab1_panel2'); // Controlla se il valore è stato impostato / Validazione $ aa_font2_val = (is_array ($ aa_font2_array) ||! Empty ($ aa_font2_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// // Ottieni tutti i valori necessari Abstraction di PHP e HTML // //////////////////////// ///////////////////////////////////// // Ottieni valore colore $ aa_font2_clr_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['color']: 'red'); // Ottieni il valore della famiglia di font $ aa_font2_ffm_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['font-family']: 'Arial'); // Ottieni valore dimensione carattere $ aa_font2_fsz_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['font-size']: '14px'); / ** * * Stampa valori su front-end * * /?> Valore stampato dell'opzione del tipo di carattere nella scheda. Le righe scritte per recuperare i valori delle opzioni salvate sono praticamente le stesse che ho scritto in precedenza per un metabox. Solo i nomi delle variabili e gli ID sono diversi. Quindi, sto solo riassumendo i passaggi scritti sopra:
A questo punto, se visualizzo l'anteprima del front-end, verranno visualizzate solo le impostazioni predefinite come questa:
Supponiamo che queste siano le nostre nuove impostazioni per i caratteri:
Ecco lo screenshot di questa nuova configurazione:
La differenza tra le due impostazioni è abbastanza ovvia.
Alla fine, creiamo questa opzione all'interno del customizer.
createOption (array ('id' => 'aa_sec_font', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'font', // Tipo di opzione che stiamo creando 'name' => 'My Font Option', // Nome dell'opzione che verrà visualizzata 'desc' => 'Scegli le impostazioni del font' // Descrizione dell'opzione che verrà visualizzata));UN font digitare l'opzione con ID aa_sec_font esiste all'interno di una sezione di personalizzazione del tema $ aa_section1. Appare con il nome 'La mia opzione Font'. Il resto dei parametri sono gli stessi.
È possibile trovare questa opzione nella sezione di personalizzazione del tema denominata La mia sezione.
Prendiamo i suoi valori salvati.
getOption ('aa_sec_font'); // Controlla se il valore è stato impostato / Validazione $ aa_sec_font3_val = (is_array ($ aa_sec_font3_array) ||! Empty ($ aa_sec_font3_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// // Ottieni tutti i valori necessari Abstraction di PHP e HTML // //////////////////////// ///////////////////////////////////// // Ottieni valore colore $ aa_sec_font3_clr_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['color']: 'red'); // Ottieni il valore della famiglia di caratteri $ aa_sec_font3_ffm_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['font-family']: 'Arial'); // Ottieni il valore della dimensione del carattere $ aa_sec_font3_fsz_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['font-size']: '14px'); / ** * * Stampa valori su front-end * * /?> Valore stampato dell'opzione del tipo di carattere in customizer. Ancora una volta questo codice è esattamente lo stesso che ho scritto nel caso di una scheda di amministrazione e di un metabox. Solo i nomi delle variabili e gli ID sono diversi. Quindi, fare riferimento al dettaglio scritto sopra.
Diamo un'occhiata all'anteprima dal vivo delle modifiche che ho apportato.
Nella nostra discussione sul font tipo di opzione in Titan Framework, abbiamo appreso che il suo parametro CSS si comporta in modo leggermente diverso rispetto ad altre opzioni. Oggi, in questo articolo, ti mostrerò come puoi generare automaticamente CSS del tipo di carattere in un pannello di amministrazione personalizzato o anche in una sezione di personalizzazione del tema.
Parlando in generale, css è un stringa digita parametro, quindi se lo imposti, può generare automaticamente CSS ogni volta che viene creata un'opzione Titan Framework all'interno di un pannello di amministrazione e / o sezione di personalizzazione del tema.
Sappiamo che a font l'opzione type in Titan Framework è fondamentalmente un array associativo che porta una serie di campi di stile, ad es.colore, famiglia di font, dimensione del font, ecc. Allo stesso modo, può accadere che tu usi le stesse proprietà di stile in qualche altro posto nel tuo tema o plugin. Scrivendo queste molte opzioni nel css parametro può essere un compito ripetitivo e che fa perdere tempo. Quando non stai usando alcune proprietà, allora?
Per semplificare le cose, Titan Framework ti consente di assegnare tutti gli stili ai selettori CSS tramite i font css parametro. Basta usare il termine valore all'interno di questo parametro e il tuo lavoro è finito. Lascia che ti mostri come:
'h1.site-header value'
Dal momento che sappiamo che il css parametro genera tutte le regole CSS necessarie, discutiamo quando è all'interno dei seguenti contenitori:
Nota: Lo scopo di questo articolo riguarda solo l'uso e il comportamento di css parametro con il font tipo di opzione in Titan Framework. Se vuoi sapere come sono fatti questi contenitori o come aggiungere un font digitare l'opzione in Titan Framework quindi fare riferimento ai miei articoli precedenti.
Scriviamo il suo codice.
createOption (array ('id' => 'aa_font', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'font', // Tipo di opzione che stiamo creando 'name' => 'My Font Option', // Nome dell'opzione che verrà visualizzata 'desc' => 'Scegli le impostazioni del tuo carattere', // Descrizione dell'opzione che verrà visualizzata 'show_font_style' => false, 'show_letter_spacing' => false, 'show_text_transform' => false, 'show_font_variant' => false, 'show_text_shadow' => false, 'default' => array ('font-family' => 'Exo 2', 'color' => '# 888888 ',' line-height '=>' 2em ',' font-weight '=>' 500 ',),' css '=>' .aa_site_font1 value '));Questo codice crea a font digita l'opzione in un pannello di amministrazione $ aa_panel con campi di stile limitati. L'ID di questa opzione è aa_font. Tutti i parametri (righe da # 13 a # 17) in cui sono impostati i valori falso non apparirà. Ho anche aggiunto valori predefiniti per il famiglia di font, colore, altezza della linea e font-weight impostazioni.
La linea # 24 definisce a css parametro per una classe chiamata .aa_site_font1. Nota che all'interno di questa definizione di classe, ho solo scritto valore. Ciò significa che tutti i CSS che questo campo genererà saranno posizionati dove valore è scritto. Quindi, ovunque questa classe viene utilizzata, carica automaticamente le proprietà CSS.
L'immagine sopra mostra le impostazioni correnti del carattere e rende chiaro che questa opzione è creata all'interno del mio primo pannello di amministrazione, cioè. Opzioni ordinate.
Creiamo un tag div con aa_site_font1 classe e vedere il risultato al front-end.
Valore di 'css' nella tab 2 di amdin panel2
Se si guarda il codice sopra, abbiamo fornito il css parametro del font campo una classe in cui dovrebbe produrre i risultati CSS, e quella classe era aa_site_font1. Quindi, sono andato avanti e ho creato un div con la classe aa_site_font1, per visualizzare i risultati sul front-end.
A questo punto, se guardi il front-end, sarà simile a questo:
Ora cambiamo le nostre impostazioni di default e rendiamo questo font più grande e di colore rosso.
Le nuove modifiche appaiono nel front-end in questo modo. Ricorda che è solo un div al front-end con la classe CSS aa_site_font1 in esso, che abbiamo usato all'interno del css parametro.
Ecco come puoi aggiungere un css parametro all'interno di a font tipo opzione. Titan Framework genererà automaticamente il CSS per esso nel tuo tema.
Guarda il suo codice.
createOption (array ('id' => 'aa_sec_font', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'font', // Tipo di opzione che stiamo creando 'name' => 'My Font Option', // Nome dell'opzione che verrà visualizzata 'desc' => 'Scegli le impostazioni del tuo carattere', // Descrizione dell'opzione che verrà visualizzata 'css' => '.aa_site_font2 value' ));Questa volta, ho aggiunto il css parametro con classe .aa_site_font2. È definito all'interno di a font tipo opzione che ha tutti i campi di stile al suo interno.
L'immagine sopra mostra questa opzione in una sezione di personalizzazione del tema $ aa_section1. Inoltre, guarda le imp
