Una guida per principianti a Titan Framework Creazione di un pannello di amministrazione con Titan

Il pannello di amministrazione di WordPress è abbastanza aperto per le modifiche e gli sviluppatori web ne hanno tratto il massimo. Queste modifiche sono più comuni nei temi a causa del livello esteso di funzionalità, ma è possibile trovare un set completo di framework di opzioni anche in alcuni importanti plug-in. Esaminiamo cosa possiamo fare all'interno del pannello di amministrazione quando si tratta di creare opzioni con Titan Framework.

Titan, essendo un framework di opzioni, aiuta ad aggiungere pannelli di amministrazione per il tuo progetto di sviluppo scrivendo solo poche righe di codice. Oggi spiegherò come è possibile creare pannelli di amministrazione in Titan Framework. Non solo, recupererò anche i valori salvati sul front-end. Quindi, iniziamo!    

A questo punto, presumo che tu abbia impostato quanto segue:

  • una demo WordPress installata su una macchina locale per il test
  • Plugin Titan Framework installato e attivato o incorporato nel tuo tema
  • titan-quadro-checker.php file incluso nel tuo progetto, sia esso un plugin o un tema

Creazione di un pannello di amministrazione

Prima di tutto creerò un semplice pannello di amministrazione, aggiungo opzioni e ottengo i loro valori nella parte frontale. Ecco il codice per questo.

createAdminPanel (array ('name' => 'Neat Options' // Nomina il menu delle opzioni.)); / ** * Crea le opzioni. * / $ 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. * / $ aa_panel-> createOption (array ('type' => 'save')); 

Righe 3-9

Questa è la configurazione di base di Titan che ho già trattato nei miei articoli precedenti, quindi dovresti assolutamente leggerli. Qui nel codice ho aggiunto la mia funzione come azione ad un hook chiamato  tf_create_options. Quindi ho registrato un'istanza tramite il getInstance () funzione che inizializza un'istanza Titan unica con il tuo tema / plugin / nome del pacchetto. Nel mio caso gli sto dando un parametro unico 'Pulito'. Un'istanza unica all'inizio della nostra funzione è necessaria per creare un contesto in cui verranno create le opzioni.

Righe 15-17

Questo codice aggiunge un nuovo pannello di amministrazione nel dashboard di WordPress. Il createAdminPanel () la funzione crea un nuovo pannello in Titan Framework. Quindi, ho creato un pannello di amministrazione, ad es. $ aa_panel. Apparirà contro il nome 'Neat Options' nella dashboard.  

L'immagine sopra mostra il risultato di questo codice.

Righe 23-28

Ora ho aggiunto le opzioni all'interno del pannello di amministrazione $ aa_panel. La linea 23 ha il createOption () funzione che viene utilizzata per creare opzioni all'interno del pannello di amministrazione $ aa_panel. Per ora, sto aggiungendo solo una singola opzione che è un campo di testo chiamato 'My Text Option'. Il createOption () la funzione è una matrice e trasporta diversi parametri come nome, ID, tipo, ecc.

Il parametro più importante è il 'id' , che è fondamentalmente il nome della nostra opzione e il nostro unico modo di fare riferimento quando abbiamo bisogno di usarlo. Assicurati che tutti gli ID che aggiungi siano univoci in quanto non possono essere identici due ID, il che può portare a un errore irreversibile PHP.

Lo screenshot in alto mostra l'immagineOpzione My Text ' campo che ho creato. È facile: poche righe di codice, quindi non scherzare con HMTL.

Righe 34-36

Ora è all'interno di questo campo di testo che inserirò il mio valore. Quindi, avrò bisogno di un "Salvare"qui perché non c'è altro modo per me di salvare le opzioni. Quindi, queste linee di codice aggiungeranno un Salvare e Reset pulsante nelle mie opzioni del pannello di amministrazione.

Questo è l'aspetto finale del mio sviluppo fino ad ora, in cui è possibile trovare un pannello di amministrazione Opzioni ordinateLa mia opzione di testo dentro.

Ottenere i valori salvati dal pannello delle opzioni di Neat

Ho discusso questo processo di ottenere i valori delle opzioni salvate in precedenza in dettaglio. Assicurati di leggere la serie. Quindi, sto scrivendo direttamente le righe di codice che recupereranno i valori. Puoi aggiungere queste linee in qualsiasi file del tuo progetto di sviluppo web.

Ti consiglierò di creare un nuovo modello di pagina e di aggiungere il codice al suo interno, in modo che tu possa vedere un fatto se tutto funziona come dovrebbe. 

getOption ('aa_txt'); // Stampa il valore della nostra opzione di testo. echo $ aa_txt_val;

Prima di tutto, otteniamo un'istanza specifica di Titan. Quindi ho usato il getOption () funzione che otterrà il valore salvato dal aa_txt, dove aa_txt è l'ID dell'opzione che ho creato all'interno del mio pannello di amministrazione. 

Nota ancora che devi dare un ID univoco per ogni opzione perché non è il 'nome' ma il 'Id' che distingue una opzione da un'altra. Alla fine ho usato il eco comando per stampare il valore salvato nel aa_txt opzione.

Ad esempio, ho inserito AA-Text-Option e salvato il risultato. Scopriamo cosa appare sul front-end.

L'immagine sopra mostra il risultato. Potete trovare AA-Text-Option viene visualizzato nell'area evidenziata in rosso.

Creazione di un pannello di amministrazione 

Ora, che dire di un caso più complesso? In questa sezione creerò un nuovo pannello di amministrazione all'interno del quale ci saranno schede e opzioni di amministrazione. Eccitato? Iniziamo!

Prima di tutto ho creato un pannello di amministrazione. In precedenza, ho creato un pannello chiamato 'Opzioni ordinate', quindi sto nominando questo nuovo pannello'Opzioni Neat 2'. Ecco il suo codice:

createAdminPanel (array ('name' => 'Neat Options 2' // Nomina il menu delle opzioni.));

Prima di tutto, ho registrato un'istanza unica di Titan e poi ho creato un pannello di amministrazione $ aa_panel2 via il createAdminPanel () funzione. Apparirà contro il nome Opzioni Neat 2 nella dashboard di WordPress.

L'immagine sopra mostra il risultato. Mostra anche il primo pannello di amministrazione (cioè Neat Options) che ho creato nell'articolo precedente. 

Quando si fa clic Opzioni Neat 2, sarà vuoto. Ora ci sono due approcci: o si creano le opzioni direttamente in esso, oppure si creano le schede di amministrazione per funzionalità estese e quindi si creano opzioni all'interno delle schede. Il primo è già stato discusso. Quindi, diamo un'occhiata a quest'ultimo caso.

Creazione di schede di amministrazione

Le schede sono uno dei modi migliori per organizzare le impostazioni o le opzioni del pannello di amministrazione. Per i temi WordPress che contengono molte opzioni, le schede facilitano notevolmente l'esperienza dell'utente. Pertanto, Titan è un framework di opzioni che aiuta a creare impostazioni a schede in WordPress. Scopriamo come.

createTab (array ('name' => 'Tab 1' // Assegna un nome alla scheda. Non usare nient'altro che un nome alfanumerico senza caratteri che si aspettino spazio.));

Ho fatto uso del CREATETAB () funzione in Titan Framework per la creazione di schede di amministrazione. Nel codice sopra menzionato, ho creato una scheda di amministrazione chiamata $ aa_tab1. Se guardi la riga 1 di questo codice, puoi vedere che una nuova scheda viene creata all'interno di $ aa_panel2 pannello. Questa scheda è denominata 'Scheda 1'. Quando stai creando una scheda tramite CREATETAB (), è molto importante indicare in quale pannello lo si sta creando. Puoi vedere la scheda 1 nello screenshot qui sotto.

Creazione di opzioni all'interno della "Scheda 1"

Creiamo ora un'opzione all'interno Scheda 1.

createOption (array ('id' => 'aa_txt_in_tab1_panel2', 'type' => 'text', // Tipo di opzione che stiamo creando. 'name' => 'My Text Option', // Nome dell'opzione che sarà essere visualizzati nel pannello di amministrazione. 'desc' => 'Questa è la nostra opzione' // Descrizione dell'opzione che verrà visualizzata nel pannello di amministrazione.)); / ** * Pulsante Salva per opzioni. * / $ aa_panel2-> createOption (array ('type' => 'save'));

Il createOption () la funzione aggiunge una nuova opzione all'interno $ aa_tab1. Tieni nuovamente presente che gli ID devono sempre essere unici. L'ID verrà utilizzato per ottenere il valore di questa opzione. In questo caso l'ID dell'opzione che abbiamo creato è $ aa_txt_in_tab1_panel2. Le ultime poche righe del codice creano a Salvare pulsante (lo abbiamo visto prima).

Lo screenshot mostra un campo di testo, ad es.La mia opzione di testo', che viene aggiunto all'interno Scheda 1. Puoi anche trovare il Salvare e il Reset pulsante. 

Sono sicuro che le cose spiegate finora sono abbastanza chiare. Che ne dici di creare un'altra scheda?

All'interno dello stesso pannello di amministrazione, sto creando un'altra scheda denominata 'Scheda 2 ' Allo stesso modo. Ma questa volta aggiungerò un area di testo opzione in esso. 

createTab (array ('name' => 'Tab 2' // Nome della scheda.)); // Crea opzioni all'interno di tab2. $ aa_tab2-> createOption (array ('id' => 'aa_txtarea_in_tab2_panel2', // Ids dovrebbe essere sempre univoco.Questo id verrà utilizzato per ottenere il valore di questa opzione. 'type' => 'textarea', // Type di opzione che stiamo creando. 'name' => 'My Text Area', // Nome dell'opzione che verrà visualizzata nel pannello di amministrazione. 'desc' => 'Questa è la nostra opzione' // Descrizione dell'opzione che sarà visualizzato nel pannello di amministrazione.)); / ** * Pulsante Salva per opzioni. * / $ aa_panel2-> createOption (array ('type' => 'save')); 

Nelle righe 1-12 del codice scritto sopra, ho creato una nuova scheda, vale a dire. Scheda 2, che viene salvato nella variabile  $ aa_tab2 all'interno del pannello di amministrazione $ aa_panel2 usando lo stesso CREATETAB () funzione. Quindi ho creato a textarea digitare l'opzione nella scheda 2 con ID aa_txtarea_in_tab2_panel2 (righe 12-17). E infine a Salvare e Reset pulsante alla fine.

Ecco il risultato:

Per riassumere, ho creato un nuovo pannello di amministrazione Neat Options 2, quindi ho aggiunto due schede denominate Tab 1 e Tab 2. Quindi ho inserito il tipo testo opzioni nella Scheda 1 e un tipo textarea opzione nella Tab 2.

L'immagine sopra mostra i risultati finora. Ora passiamo alla cosa reale, cioè ottenendo i valori delle opzioni salvate.

Ottenere i valori delle opzioni salvate

Le seguenti righe di codice verranno utilizzate per recuperare i valori salvati dalle due opzioni che abbiamo creato. Il getOption () la funzione viene utilizzata sulle righe 11 e 14, che sta recuperando i valori per $ aa_txt_in_tab1_panel2 e $ aa_txt_in_tab2_panel2 opzioni nel nuovo pannello di amministrazione. Ho salvato i valori in due variabili, ad es. $ aa_txt_in_tab1_panel2_val e $ aa_txt_in_tab2_panel2_val.

Poi ho creato due paragrafi (linee 23 e 24), uno per ogni scheda, e quindi usando il eco comando stamperò l'output sul front-end.

Tutto questo codice va in a nuova pagina personalizzata modello (per la procedura dettagliata per ottenere i valori salvati, consultare i miei articoli precedenti).

getOption ('aa_txt_in_tab1_panel2'); // Valore della textarea della seconda scheda. $ aa_txtarea_in_tab2_panel2_val = $ titan-> getOption ('aa_txtarea_in_tab2_panel2'); / ** * Opzioni del secondo pannello di amministrazione. * / // Usiamo questo valore in HTML?> 

Il valore della casella di testo della prima scheda è:

Il valore della textarea della seconda scheda è:

Ora supponiamo di essere entrato AA-Text-Option nel campo di testo di Scheda 1 e alcuni testi fittizi nell'area di testo di Scheda 2.   

Ho salvato le impostazioni finali e visualizzato in anteprima il risultato dopo aver pubblicato una pagina con il mio modello di pagina personalizzato.

L'output dei valori salvati può essere chiaramente osservato.

Conclusione

Questo è tutto ciò che c'è da sapere sulla creazione di pannelli di amministrazione con Titan Framework. Sono sicuro che trovi l'intero processo abbastanza semplice, e ora puoi creare facilmente i pannelli di amministrazione con le schede. 

Voglio che tu provi da quando negli articoli sulle opzioni assumerò il fatto che sai come creare i pannelli di amministrazione. Un passo fondamentale per capire cosa ci sarà dopo.

Nel prossimo articolo, discuterò su come creare una meta-box con Titan Framework. Fino ad allora in caso di domande, commentare qui sotto o contattarmi su Twitter.