Share
Una delle funzionalità più interessanti di Titan Framework è che può generare automaticamente CSS per tutti i tipi di opzioni. Esiste anche un compilatore Sass che non solo compila, ma anche minimizza il CSS. Sono stati definiti due diversi modi per generare CSS. Creiamo automaticamente CSS per le tue opzioni.
Esistono fondamentalmente due modi attraverso i quali è possibile generare automaticamente CSS con TF (Titan Framework):
Accentsconagua
css parametrocreateCSS funzioneIn tutta la serie, ti sei imbattuto nel css parametro per la definizione delle regole CSS nella maggior parte delle opzioni. Nella documentazione viene indicato che ogni volta che si crea un'opzione in una pagina di amministrazione e / o in una sezione di personalizzazione del tema, il file css parametro genera automaticamente CSS (solo se stai usando quel parametro). Elenchiamo tutte le opzioni che supportano questo parametro:
Impariamo come css parametro genera proprietà CSS tramite un esempio.
Qui, creerò un colore digita l'opzione in un pannello di amministrazione. Usa il seguente codice:
createAdminPanel (array (// Assegna un nome al menu delle opzioni 'name' => 'Neat Options')); / ** * * Crea le opzioni relative al tipo di colore in un pannello di amministrazione * * / $ aa_panel-> createOption (array ('id' => 'aa_bg_color', // L'ID che verrà utilizzato per ottenere il valore di questa opzione ' digita '=>' color ', // Tipo di opzione che stiamo creando' name '=>' Imposta colore di sfondo ', // Nome dell'opzione che verrà visualizzata nel pannello di amministrazione' desc '=>' Questa è la nostra opzione ', // Descrizione dell'opzione che verrà visualizzata nel pannello di amministrazione' css '=>' .aa_bg_class background-color: value; ')); Ho creato un colore digita un'opzione alla riga n. 19 che imposta il valore del colore. Ho definito il css parametro alla riga n. 25. Ho definito una classe e quindi al suo interno ho definito la proprietà CSS dove voglio che venga stampato il valore del colore. Quindi ho aggiunto una lezione aa_bg_class, e al suo interno ho aggiunto una proprietà CSS background-color: valore;. Ecco la parola chiave valore sarà scambiato con l'output di questa opzione, ad esempio, qualsiasi colore selezionato dall'utente lo scambierà.
Titan genera automaticamente un file CSS che contiene tutte le tue regole CSS per te. Crea il file all'interno di WordPress uploads cartella nel formato: titan-quadro-. Nel mio caso lo è titan-quadro-pulito-css.css.
Usiamo questa opzione per generare automaticamente CSS.
Ho aggiunto un tag div con la classe aa_bg_class e qualche testo fittizio sulla mia pagina.
Abitante di Pellentes morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Ulteriormente la vita mia estis Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Fermenta di Aenean, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Dapibus pregato, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Selezioniamo un colore demo dall'amministratore.
Guarda, il colore di sfondo è stato applicato automaticamente.
C'è un altro modo per generare CSS con TF. Questo è via il createCSS funzione, che dichiara tutti i tuoi stili CSS.
Spieghiamo come funziona con un esempio.
Sto usando lo stesso colore tipo opzione che è stata spiegata in precedenza.
createAdminPanel (array (// Assegna un nome al menu delle opzioni 'name' => 'Neat Options')); / ** * * Crea l'opzione per il tipo di colore in $ aa_panel * * / $ aa_panel-> createOption (array ('id' => 'aa_color_opt', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'tipo '=>' color ', // Tipo di opzione che stiamo creando' name '=>' Scegli Color Settings ', // Nome dell'opzione che verrà visualizzata nel pannello di amministrazione' desc '=>' Questa è la nostra opzione '// Descrizione dell'opzione che verrà visualizzata nel pannello di amministrazione)); / ** * * Utilizzare la funzione createCSS per generare CSS * * / $ titan-> createCSS ('h1 color: $ aa_color_opt;'); Qui, ho creato un pannello di amministrazione chiamato Opzioni ordinate alla linea # 7. Poi ho aggiunto a colore tipo opzione alla riga n. 18. Successivamente ho definito il createCSS funzione alla riga n. 33 che riprende la variabile $ aa_color_opt. Questo è fondamentalmente l'ID della stessa colore tipo opzione ho appena definito sopra, e questa variabile ha il valore del colore che l'utente finale ha selezionato nel pannello di amministrazione.
Ancora una volta si noti che questa è una variabile Sass (Syntactically Awesome Style Sheets) che corrisponde all'ID dell'opzione a cui si desidera ottenere il valore. Quindi non confonderlo con una normale variabile PHP.
Ho aggiunto le virgolette singole per evitare di sfuggire al segno $ della variabile. All'interno di CSS ho come target le intestazioni h1. Ho impostato il valore dell'opzione colore rispetto alla proprietà color del CSS alla riga n. 34.
A questo punto, se si visualizza l'anteprima del front-end, visualizza la direzione 1 nel colore predefinito.
Scegli qualsiasi colore demo e salvalo. Supponiamo che io scelga # ed3325.
Il colore dell'intestazione ora cambia in questo nuovo valore. Ecco lo screenshot:
Puoi leggere ulteriori informazioni sulla funzione createCSS.
Divertiti a creare CSS con Titan Framework. Assicurati di utilizzare la versione più recente di Titan Framework.
Secondo me, il createCSS la funzione funziona molto bene quando è necessario aggiungere più valori CSS dinamicamente, in modo più controllato e modulare.
Se avete domande, commentate qui o contattatemi su Twitter.
