Share
L'API di personalizzazione del tema, aggiunta in WordPress 3.4, consente agli sviluppatori di personalizzare e aggiungere controlli a Aspetto> Personalizza schermata di amministrazione. Titan Framework consente di estendere e utilizzare un buon numero di campi / impostazioni per creare un tema basato su Live Theme Customizer.
Titan Framework è un framework di opzioni che aiuta a creare più tipi di opzioni scrivendo solo poche righe di codice. Vediamo come possiamo sfruttare le opzioni di Custom Theme tramite Titan Framework.
Accentsconagua
titan-quadro-checker.php file incluso nel tuo progetto Il codice che userò appartiene al mio tema personalizzato Neat. Neat contiene un file chiamato customizer-opzioni-init.php che è presente in beni / admin /titanframework/customizer-options-init.php. È qui che ho implementato Titan Framework per registrare tutte le impostazioni, i pannelli e le sezioni di questo tutorial.
Ecco il codice per aggiungere una sezione di personalizzazione nel tema WP.
createThemeCustomizerSection (array (// Nome del menu opzioni 'name' => 'My Section', // Nome del pannello in cui saranno presenti tutte le sezioni 'panel' => 'My Panel'));
Ho inserito alcuni link utili alla documentazione di Titan Framework all'inizio di questo file. Ti raccomando di passare attraverso questi link.
Avanti (riga # 14) è un add_action () funzione che porta a tf_create_options amo e un aa_customizer_options funzione come i suoi parametri. Questo hook aiuta a creare opzioni all'interno della sezione customizer.
aa_customizer_options è una funzione personalizzata per la registrazione di impostazioni, sezioni o pannelli. Se hai letto i miei articoli precedenti, ho discusso una regola per lavorare con Titan Framework:
Chiama il getInstance () funzione ogni volta che è necessario interagire con Titan Framework.Proprio come sulla linea # 19 del codice sopra. Ciò significa che viene chiamata un'istanza associata alla variabile $ titane assume un parametro unico, preferibilmente il nome del tema. sto usandopulito, quale è il nome del mio tema.
Dopo aver chiamato un'istanza, aggiungi una sezione all'interno del customizer usando createThemeCustomizerSection () funzione. Le righe da # 26 a # 34 creano una sezione in $ titan chiamato $ aa_section1. Il createThemeCustomizerSection () prende una serie di parametri come nome, pannello, disc, eccetera.
Sto usando due di questi parametri (nome e pannello) per creare il pannello di personalizzazione del tema e poi una sezione al suo interno. Un pannello è un gruppo di sezioni, mentre una sezione contiene impostazioni al suo interno.
Ho creato un pannello chiamato 'Il mio pannello'e una sezione chiamata'La mia sezione ' menu all'interno del pannello.
Lo screenshot sopra mostra il customizer del tema appena modificato. Qui puoi trovare il nuovo pannello, ad es. Il mio pannello.
Dentro Il mio pannello c'è una sezione chiamata La mia sezione.
Nell'articolo precedente, ho spiegato come creare una sezione personalizzata all'interno di un pannello personalizzato del customizer di temi con Titan Framework. Creiamo alcune opzioni / impostazioni all'interno della sezione che abbiamo creato e implementiamo il nostro tema nel front-end.
Incolla le seguenti righe subito sotto il codice scritto nel precedente articolo all'interno del customizer-opzioni-init.php file. Questo file è incluso nel functions.php del nostro tema tramite il admin-init.php file.
createOption (array ('id' => 'aa_sec_body_bg_clr', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'color', // Tipo di opzione che stiamo creando 'name' => 'Colore sfondo del sito', // Nome dell'opzione che verrà visualizzata nel pannello di amministrazione 'default' => '#fff' // Valore predefinito della nostra opzione)); // Colore testo corpo $ aa_section1-> createOption (array ('id' => 'aa_sec_body_txt_clr', // L'ID che verrà utilizzato per ottenere il valore di questa opzione 'type' => 'color', // Type of opzione stiamo creando 'name' => 'Site Text Color', // Nome dell'opzione che verrà visualizzata nel pannello di amministrazione 'default' => '# 000' // Valore predefinito della nostra opzione)); Sto usando il createOption () funzione di Titan Framework per creare opzioni. Dal momento che ho bisogno di creare questa opzione all'interno della sezione personalizzata chiamata $ aa_section1, Ho chiamato la funzione di creazione delle opzioni attraverso la variabile di sezione nella riga n.
Ho registrato due impostazioni. Entrambe sono opzioni di tipo di colore in cui la prima opzione aiuta a configurare il colore di sfondo del corpo (riga da # 10 a # 13).
Ho impostato diversi parametri per questa impostazione del colore, ID e nome essendo i più importanti. Il ID, che dovrebbe essere unico, viene usato per ottenere il valore di questa opzione, mentre il nome è ciò che appare all'interno del customizer.
Successivamente ho creato un'altra opzione per il colore del testo del corpo (riga da 18 a 25). Poiché è lo stesso tipo di opzione, è simile al precedente con valori diversi nei parametri. Vediamo cosa succede nel customizer.
Il colore di sfondo del corpo e le impostazioni del colore del corpo sono visualizzate con i nomi Colore di sfondo del sito e Colore del testo del sito all'interno della nostra sezione chiamata La mia sezione.
Finora, ho aggiunto opzioni nel customizer del tema. Permettimi ora di mostrarti come recuperare i valori da questi.
Prima di tutto, recupererò i valori salvati di entrambe le opzioni e li salverò in due diverse variabili. Quindi userò queste due variabili all'interno di un file CSS per modificare i valori dei colori nel nostro tema. Per fare ciò, incolla le seguenti righe di codice nella parte superiore del header.php file.
getOption ('aa_sec_body_bg_clr'); // Body txt color $ aa_sec_body_txt_clr_val = $ titan-> getOption ('aa_sec_body_txt_clr'); ?>Usando questo codice, otterrò i valori delle opzioni che sono state create nel customizer-opzioni-init.php file. Sono necessari due passaggi per ottenere questo:
getOption () funzione.La linea # 17 è dove ho registrato l'istanza. Le linee # 20 e # 23 sono dove ho recuperato i valori di queste opzioni, che era il secondo passo. Il getOption () la funzione in queste due linee ottiene i valori da aa_sec_body_bg_clr e aa_sec_body_txt_clr, quali sono gli ID univoci per le opzioni Colore sfondo del sito e Colore del testo del sito.
I valori di colore recuperati vengono salvati nelle variabili $ aa_sec_body_bg_clr_val e $ aa_sec_body_txt_clr_val.
Usiamo queste due variabili, che contengono i valori di colore selezionati dall'utente, nel front-end:
Incolla questo codice sotto il wp-testa () funzione in modo che i nostri stili siano inclusi dopo il foglio di stile originale del nostro tema. Guarda attraverso la riga 7 e 20 per ognuno di questi tag: il eco il comando viene utilizzato per stampare l'output per il colore di sfondo e il colore del testo.
Si noti che le proprietà CSS sono state contrassegnate come !importante, che garantisce la priorità CSS.
Segui questi passaggi per visualizzare in anteprima le modifiche.
Una volta impostati i colori, puoi vedere un'anteprima dal vivo di queste modifiche sul tuo sito.
Ho scelto # 000000 come il mio colore di sfondo del sito e #bfbfbfcome il colore del testo del sito, puoi controllare l'immagine di anteprima sopra.
Al termine, fai clic su Salva e pubblica pulsante.
Quindi, questo è tutto. Ora puoi facilmente creare opzioni all'interno di Theme Customizer con Titan Framework. È stato facile? Non esitare a contattare Twitter o commentare qui sotto se hai qualche domanda.
Ormai sai come creare qualsiasi tipo di contenitore con Titan Framework. Non posso sottolineare abbastanza l'importanza degli ultimi articoli. Se non sai come creare questi contenitori, sarà difficile per te capire uno dei prossimi articoli. Quindi, torna indietro e rivedi i concetti su come creare diversi tipi di contenitori con Titan Framework. Dovresti sapere come creare:
Dal prossimo articolo in poi, discuterò ogni possibile tipo di opzione che può essere aggiunto con Titan Framework. Quindi rimanete sintonizzati!
