Questo è il terzo articolo della serie e finora ho discusso l'importanza e le caratteristiche di Titan Framework insieme alla configurazione di base. Nel primo articolo, ho discusso la configurazione in tre fasi di Titan Framework che si presenta così:
Ho spiegato il primo passo nell'articolo precedente, in cui abbiamo appreso che Titan Framework è un framework plug and play, cioè è un plug-in, sebbene possa anche essere integrato includendolo nel tuo progetto di sviluppo web. Quindi, continuiamo da dove avevo interrotto e procedo con i prossimi due passaggi.
Qui, ti spiegherò come e in che misura Titan Framework funziona nel tuo progetto di sviluppo web. Poi passerò al concetto di creazione istanze e Opzioni da cui otterrò i salvati Valori al front-end. Quindi, iniziamo!
Prima di tutto, scopriamo cosa è necessario per implementare il tutorial di oggi. Creeremo un semplice tema WordPress con il quale utilizzeremo Titan Framework per esplorare il diverso set di opzioni che può creare. Avrai bisogno:
Poiché userò il tema Neat WordPress, è importante che io spieghi prima la sua struttura. Apri la cartella del tema nel tuo editor di testo dove si trova all'interno risorse directory Ho creato una nuova cartella chiamata Admin. Il suo scopo è quello di gestire tutto il codice pertinente per le opzioni di amministrazione. Al suo interno c'è un'altra directory, titanframework,e un file PHP, admin-init.php
.
admin-init.php
FileQuesto file PHP gestirà tutta l'attività relativa all'amministrazione. Se si scorre il suo codice, scoprirai che ho usato il get_template_directory ()
funzione per includere quattro file dal titanframework
directory. Il seguente codice è piuttosto auto-esplicativo, ma spiegherò brevemente lo scopo di ognuno di questi file.
Ecco il codice per admin-init.php:
Directory chiamata
titanframework
Ho già discusso in precedenza che Titan Framework ti aiuta a creare Pannelli di amministrazione e schede, Metabox e Personalizzazione del tema sezioni e pannelli. Quindi ho creato file separati per ognuno di essi. Ovviamente possono essere creati con linee di codice separate. Discuterò ciascuno di questi nei miei prossimi articoli, ma per ora tutto ciò che devi capire è a cosa servono questi file.
titan-quadro-checker.php
: è responsabile per includere Titan Framework nel tuo tema.AdminPanel-opzioni-init.php
: contiene il codice per creare il pannello di amministrazione e le schede con una serie di opzioni.METABOX-opzioni-init.php
: Contiene il codice per creare i metabox per i tipi di post con un set di opzioni al loro interno.customizer-opzioni-init.php
: Contiene il codice per la creazione di pannelli e sezioni di personalizzazione di temi con una serie di opzioni.admin-init.php
FileFino ad ora ti starai chiedendo perché ho creato tanti nuovi file. Perché non ho solo aggiunto tutto il codice in functions.php
file? Beh, non ritengo che sia un buon approccio all'architettura. Per costruire un prodotto manutenibile, è necessario definire un buon modello di progettazione.
Qual è il punto di incasinare il tuo functions.php
file con così tante righe di codice? L'ho sperimentato personalmente: verso la fine di qualsiasi progetto di sviluppo, il codice diventa così massiccio che diventa difficile gestirlo tutto in un singolo file, specialmente quando si tratta di eseguire il debug e correggere eventuali errori. È sempre meglio creare file separati, quindi pensa a questi file come moduli.
Includiamo admin-init.php
nel nostro functions.php
file.
Qui ho aggiunto il
admin-init.php
file tramite lo stessoget_template_directory ()
erequire_once ()
funzioni.A questo punto, abbiamo dato uno sguardo alla configurazione di base di un tema che userò per spiegare come funziona Titan Framework. Abbiamo completato la configurazione e incorporato Titan Framework nel nostro tema WordPress. Creiamo un pannello di amministrazione con opzioni e ottieni i valori per il front-end.
Lavorare con Titan Framework
Per lavorare con Titan Framework è necessario seguire un determinato flusso di lavoro che è:
- Creare un'istanza di Titan Framework per file.
- Crea Pannello di Amministrazione / Tabulazioni, Metaboxes o Sezioni / Pannelli di Personalizzazione temi.
- Crea opzioni in loro.
- Ottieni i valori.
Vorrei prima scrivere il codice che userò per questo scopo. Questo è il codice per il
adminpanels-opzioni-init.php
file che è presente all'interno dibeni / admin / titanframwork /
elenco.createAdminPanel (array ('name' => 'Neat Options' // Nomina il menu delle opzioni)); / ** * Crea le opzioni. * * Ora creeremo le opzioni per il nostro pannello che abbiamo appena creato chiamato '$ aa_panel'. * / $ aa_panel-> createOption (array ('id' => 'aa_txt', // L'ID che verrà usato per ottenere il valore di questa opzione. 'type' => 'text', // Type of option we 'name' => 'My Text Option', // 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.)); / ** * Pulsante Salva per opzioni. * * Quando si creano le opzioni del pannello di amministrazione, utilizzare questo codice per aggiungere un'opzione pulsante "Salva" * poiché non c'è altro modo per l'utente di salvare le opzioni. Ora gli utenti possono salvare * (e ripristinare) le opzioni che abbiamo appena creato. * / $ aa_panel-> createOption (array ('type' => 'save'));All'inizio ho aggiunto alcuni collegamenti utili dalla documentazione di Titan Framework. Ora ho intenzione di spiegare questo codice riga per riga.
Linea 17
Qui abbiamo un gancio chiamato
tf_create_options
, che viene utilizzato per creare opzioni tramite Titan Framework utilizzando ilaa_options_creating_function ()
funzione.Righe 19
Abbiamo creato una funzione chiamata
aa_options_creating_function ()
, che sarà responsabile della creazione di queste opzioni.Riga 22
Alla riga 22, ho creato un esempio per Titan Framework. La creazione di un'istanza è parte integrante di questo framework e deve essere creata in ogni file, ovunque sia necessario interagire con Titan Framework. Per rendere unica la tua istanza, puoi aggiungere il nome del tuo prodotto. Ad esempio, ho aggiunto "pulito" come parametro.
Ottieni un'istanza di Titan Framework
Creare un'istanza di Titan Framework è piuttosto semplice. Otteniamo un'istanza unica per evitare qualsiasi confusione nel caso in cui un altro plugin utilizzi Titan Framework per creare opzioni. L'autore afferma che:
La funzione getInstance crea / ottiene un'istanza unica di Titan Framework specifica per "mytheme". Questo è ilnamespace
utilizzeremo per garantire che le nostre impostazioni non siano in conflitto con altri plug-in che utilizzano Titan Framework. Assicurati di cambiarlo con il tuo tema o il nome del plugin.Ecco un esempio di codice per ottenere un'istanza con Titan.
$ titan = TitanFramework :: getInstance ('my-theme');Nel caso del mio Neattema userò il parametro di
pulito
invece dimy-tema
per rendere il mio codice unico, cioè.$ titan = TitanFramework :: getInstance ('neat');Creazione di un pannello di amministrazione; Righe 33-35
Queste linee creeranno un pannello di amministrazione che ho chiamato "$ aa_panel". Titan Framework aiuta a creare sezioni come pannello di amministrazione, schede di amministrazione, metabox e pannelli di personalizzazione di temi all'interno del progetto. Ma per ora creerò solo un pannello di amministrazione come esempio per spiegare le cose.
Queste linee di codice chiamano il nostro
createAdminPanel ()
funzione in Titan Framework che forma una matrice. Questa funzione aggiungerà una nuova sezione nella dashboard di WordPress chiamata Opzioni ordinate.L'immagine sopra è uno screenshot del dashboard di WordPress in cui è possibile trovare una nuova sezione aggiunta nel Pannello di amministrazione.
Solo per riassumere quello che ho fatto finora: ho impostato il mio progetto di sviluppo web, e poi ho aggiunto un'istanza ad esso, dopo di che ho creato un pannello di amministrazione.
Proprio a questo punto, se clicco sul Opzioni ordinatepulsante, quindi questa sezione è vuota. Quindi, ora creerò le opzioni all'interno di questo pannello di amministrazione appena creato.
Creazione di opzioni in Titan Framework
I temi personalizzabili di WordPress sono preferiti perché gli utenti finali preferiscono per lo più progettare temi senza scrivere una singola riga di codice. Ciò è reso possibile aggiungendo opzioni flessibili durante lo sviluppo del tema.
Possiamo aggiungere tali opzioni in un pannello di amministrazione separato, o in forma di metaboxes o pannelli di opzioni all'interno del customizer del tema. Le opzioni hanno lo scopo di memorizzare i valori che verranno successivamente recuperati dal front-end.
Righe 42-47
Ora dai un'occhiata a queste righe di codice. Questi verranno utilizzati per creare opzioni all'interno di un pannello o di una scheda di amministrazione. La linea 42 definisce il
createOption ()
funzione per il$ aa_panel
. Questa funzione è ancora una volta una matrice che sopporta determinati parametri come id, tipo, nome, descrizione, ecc. Secondo queste righe ho creato un'opzione che è un campo di testo ed è nominata La mia opzione di testo.Questa è la schermata che mostra l'opzione creata all'interno di Opzioni ordinate pannello.
Righe 56-58
Le ultime due righe del codice creano un'altra opzione all'interno di questo pannello. Ma il suo scopo è salvare le impostazioni. Ad esempio, nel La mia opzione di testo campo, l'utente lo riempie
John Doe
. Ciò significa che l'utente desidera modificare l'impostazione predefinita, che è possibile solo se l'utente salva le impostazioni personalizzate.Quindi, ho usato di nuovo il
createOption ()
funzione e assegnato il valore del parametro "type = salva".Questo è l'ultimo screenshot dello sviluppo che ho fatto finora.
A questo punto, hai impostato tutto su Titan Framework, hai creato alcune opzioni per ottenere risultati dinamici e ora tutto ciò che resta da fare è ottenere i valori dalle opzioni che hai impostato in primo luogo. Fuori dalla tagline in tre fasi, ho discusso i primi due nei due articoli precedenti. Quindi, passiamo all'ultima e in effetti la parte più importante di come funziona Titan Framework.
Ottenere valori
Le opzioni di creazione sono fatte al back-end, e ora abbiamo bisogno di recuperare i valori rispetto a quelle opzioni, impostate da un utente finale, per usarle nel front-end. Possiamo recuperare i valori impostati rispetto alle opzioni tramite una semplice funzione, ad es.
getOption ()
.La seguente è la struttura di base del codice per recuperare i valori salvati:
getOption ('my_text_option'); // Fai cose qui.Quindi, ho creato una funzione chiamata
myFunction
dove ho registrato per la prima volta un'istanza di Titan. La registrazione di un'istanza è un passaggio importante, perché ottiene l'oggetto creato da Titan Framework per le tue impostazioni registrate in una variabile, vale a dire.$ titan
. Puoi vedere che la nostra istanza è specifica del nostro tema, cioè.my-tema
, che dovrebbe essere il nostro nome di tema o qualcosa di unico.Recupero dei valori sul front-end
Usiamo i valori impostati rispetto alle opzioni nel front-end. Ho creato un modello di pagina personalizzato vuoto. Se si fa riferimento al pulito cartella dei temi, troverai un file chiamato
aa_titanframework.php
nella radice. Puoi fare lo stesso anche con il tuo tema.Creare un nuovo file nel tuo editor di testo e copia e incolla le seguenti righe di codice.
getOption ('aa_txt'); ?>Prima di spiegare il codice di cui sopra, fare riferimento al codice del mio articolo precedente in cui ho creato un pannello di amministrazione e le sue opzioni, perché sto usando gli stessi nomi, ID, ecc., Anche qui.
Le prime quattro righe del codice sono per WordPress per registrare questo modello di pagina personalizzato, che è piuttosto standard, non esiste scienza missilistica.
Ottenere i valori delle opzioni
Otterrò i valori delle opzioni che ho creato nel
AdminPanel-opzioni-init.php
file (fare riferimento per il suo codice al mio precedente articolo) qui. Sono necessari due passaggi per ottenere questo:
- Ottieni un'istanza di Titan Framework unica e salvala in una variabile.
- Ottieni il valore tramite ID usando il
getOption ()
funzione.Linea 12
Dopo il primo passo, ho inizializzato un'istanza unica contro la variabile
$ titan
, solo una volta per ogni file in cui lo uso. La mia istanza è unica dal momento che l'ho chiamatapulito
, vale a dire il nome del pacchetto per il mio tema, puoi chiamarlo qualcosa di unico. È necessario che se un plug-in utilizza Titan e il tuo tema lo stia utilizzando, dovrebbe esserci un modo per distinguere tra le opzioni impostate da quel plugin e il tema.$ titan = TitanFramework :: getInstance ('neat');Linea 14
Il secondo passaggio consiste nell'utilizzare l'ID e ottenere il valore salvato per tale opzione. Il codice per questa linea è:
$ aa_txt_val = $ titan-> getOption ('aa_txt');Ho recuperato il valore per
aa_txt
che viene salvato rispetto alla variabile$ aa_txt_val
. Ilaa_txt
parametro si riferisce all'ID dell'opzione che ho creato all'interno del mio primo pannello di amministrazione (fare riferimento al mio precedente articolo).Quindi, ho impostato la struttura di base per ottenere i valori salvati. Ora usiamo i valori salvati sul front-end.
Righe 22-35
Queste linee di codice vengono utilizzate per visualizzare i valori salvati sul front-end. Dai un'occhiata alla riga 29 dove ho usato il
eco
comando per ottenere l'output. Lo stesso è fatto sulla linea 35, ma questa volta sto visualizzando l'output per$ aa_txt_val
in un formato H3 (titolo 3). Quindi, qualunque sia il valore che l'utente finale imposta per questa opzione, verrà visualizzato sul front-end.risultati
Per visualizzare i risultati per il codice che ho spiegato sopra, attenersi alla seguente procedura:
L'immagine sopra mostra la pagina che ho creato. Allo stesso tempo, puoi anche trovare il nuovo menu del pannello di amministrazione, ad es. Opzioni ordinate, dove abbiamo creato le opzioni.
Quindi scegli il modello di pagina, ad es. Titan Framework, per questa pagina prima di pubblicarla.
Il aa_titanframework.php
il file aggiunge una nuova pagina Modello chiamato "Titan Framework" che appare nell'elenco a discesa. Scegli quel modello.
L'immagine mostra che ho riempito questo campo con AA-Text-Option e poi ho cliccato Salva I Cambiamenti.
L'immagine sopra mostra il risultato finale. Questo è ilTitan Framework pagina. Il valore dell'opzione salvata (cioè Opzione-testo AA) per aa_txt
viene visualizzato in due diverse forme. Il primo è in paragrafo formato mentre il secondo è in h3 formato.
Ormai devi avere una certa comprensione di Titan Framework e del suo funzionamento. Questa è l'impostazione di base che deve essere seguita ogni volta che sviluppi qualcosa con Titan Framework.
Ora che sai come configurarlo, crea alcune opzioni e ottieni i valori salvati; provalo e fammi sapere in caso di domande tramite commenti o contattami su Twitter.
Successivamente in questa serie esploreremo il set di opzioni che possiamo creare con Titan Framework e come usarle.