Share
Quando si tratta di sviluppare temi e plug-in di WordPress, ci sono diversi modi in cui gli sviluppatori creano i loro menu, opzioni e funzionalità di convalida. Il fatto è che c'è davvero un solo modo per farlo correttamente all'interno di WordPress: l'API delle impostazioni.
Questa serie intende essere la guida definitiva su come sfruttare le API di impostazioni di WordPress in modo da avere un unico punto di riferimento per lo sviluppo corretto di temi e plug-in.
Nel primo articolo di questa serie abbiamo esaminato l'API delle impostazioni e il motivo per cui è importante. Qui, inizieremo a immergerci nell'API e come sfruttare tutto ciò che offre.
Daremo un'occhiata alle unità fondamentali delle opzioni di WordPress - sezioni, campi e impostazioni - e come includerle nella Dashboard nativa di WordPress.
Prima di scrivere qualsiasi codice, è importante comprendere i tre componenti principali dell'API delle impostazioni di WordPress.
A questo punto, non ti preoccupare se non sei ancora chiaro su nessuno dei componenti principali. Daremo un'occhiata approfondita a ciascun componente insieme al codice sorgente di esempio che lega tutto insieme.
Per iniziare a programmare sull'API Impostazioni, impostiamo un tema di base che possa essere utilizzato in questo articolo e nel resto della serie. Tutto il codice sorgente è disponibile anche su GitHub.
Nella tua installazione locale di WordPress, accedi alla directory "temi" e crea una nuova directory vuota e chiamala "WordPress-Settings-Sandbox". Aggiungi i seguenti tre file:
Aggiungi il seguente codice a style.css:
/ * Nome del tema: Impostazioni di WordPress URI di Sandbox Tema: IL TUO URI Descrizione: Un tema semplice utilizzato per mostrare l'API delle impostazioni di WordPress. Autore: IL TUO NOME Autore URI: IL TUO SITO WEB Versione: 0.1 Licenza: Copyright 2012 IL TUO NOME (IL TUO INDIRIZZO E-MAIL) Questo programma è software libero; è possibile ridistribuirlo e / o modificarlo secondo i termini della GNU General Public License, versione 2, pubblicata dalla Free Software Foundation. Questo programma è distribuito nella speranza che sia utile, ma SENZA ALCUNA GARANZIA; senza nemmeno la garanzia implicita di COMMERCIABILITÀ o IDONEITÀ PER UN PARTICOLARE SCOPO. Vedi la GNU General Public License per maggiori dettagli. Dovresti aver ricevuto una copia della GNU General Public License insieme a questo programma; in caso contrario, scrivere alla Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA * /
Successivamente, aggiungi il seguente codice a index.php:
La guida completa alle impostazioni API | Tema Sandbox Intestazione sandbox
Questo è il contenuto del tema.
© Tutti i diritti riservati.
Si noti che il markup sopra è straordinariamente semplice e lo faccio non consiglia di utilizzare questo come base per lo sviluppo del tema. È su misura per questa serie di articoli e fornisce semplicemente i mezzi con cui leggere i valori dall'API Impostazioni.
Nel Temi schermata di amministrazione, aggiorna la pagina e dovresti vedere apparire il nuovo tema Sandbox. Vai avanti e attivalo.
A questo punto, siamo pronti per iniziare.
Nota nel modello di indice sopra, abbiamo definito tre aree di contenuto specifiche: intestazione, contenuto e piè di pagina. Utilizzando l'API Impostazioni, creiamo una sezione "Generale" contenente tre campi, ognuno dei quali corrisponde a una delle regioni di contenuti specifici che abbiamo appena definito.
Prima di scrivere qualsiasi codice, trovo sempre utile elencare esattamente ciò che devo fare. In questo caso, dobbiamo fare quanto segue:
Per evitare massicci blocchi di codice e assicurarci di coprire tutte le nostre basi, prenderemo ciascuno degli elementi sopra elencati punto per punto.
Per trovare la nostra sezione "Generale" di opzioni, avremo bisogno di utilizzare la funzione add_settings_section dell'API Settings. Secondo il codice WordPress, add_settings_section richiede tre argomenti:
Con quello, andiamo avanti e definiamo la nostra sezione. Dai un'occhiata al seguente codice commentato. Stiamo aggiungendo questo al nostro file functions.php.
Una parola sui frammenti di codice in questa serie: non copiare e incollare semplicemente questo codice. Prenditi del tempo per leggere ogni riga, vedi come gli argomenti corrispondono a ciascuna funzione API che trattiamo e segui i commenti corrispondenti per assicurarti di capire cosa stiamo facendo:
Seleziona le aree di contenuto che desideri visualizzare.'; // termina sandbox_general_options_callback?>
Ha senso? In generale, non sembra molto ma naviga verso il tuo impostazioni menu e fare clic su Generale. Scorri fino alla fine della pagina e dovresti vedere la tua nuova sezione di opzioni.
È possibile aggiungere questa sezione a qualsiasi pagina sotto il impostazioni menu. Nell'esempio precedente, abbiamo passato "generale" come ultimo parametro a add_settings_section, ma se desideri aggiungerlo a una pagina diversa, puoi fornire un titolo di pagina diverso. Ecco un riferimento per ciascuno dei impostazioni pagine e la loro chiave corrispondente:
Ora che abbiamo definito una sezione, possiamo introdurre alcune opzioni. Ricorda che nel nostro modello di indice abbiamo definito tre elementi specifici del contenitore: intestazione, contenuto e piè di pagina.
Anche se introdurremo più opzioni nel corso di questa serie, oggi introdurremo un modo per attivare la visibilità di ciascuno degli elementi sopra.
Simile a quello che abbiamo fatto con la sezione impostazioni, mi piace elencare esattamente cosa dobbiamo fare prima di scrivere qualsiasi codice. Dal momento che stiamo per alternare ciascuna delle aree di contenuto ...
A questo punto, siamo pronti per introdurre il primo campo delle impostazioni. Per fare ciò, useremo la funzione add_settings_field. Questa funzione richiede sei parametri (quattro richiesti, due facoltativi). Sono come segue:
Detto questo, andiamo avanti e definiamo il nostro primo campo di impostazione. Nello specifico, introdurremo un'opzione per attivare la visibilità dell'intestazione.
Per prima cosa, effettuiamo una chiamata a add_settings_field appena sotto la chiamata alla funzione add_settings_section nella funzione di inizializzazione che abbiamo scritto nella prima parte del tutorial. Controlla ogni riga e i commenti per ciascuna opzione:
Accentsconagua
// Successivamente, introdurremo i campi per attivare la visibilità degli elementi di contenuto. add_settings_field ('show_header', // ID utilizzato per identificare il campo in tutto il tema 'Intestazione', // L'etichetta a sinistra dell'elemento dell'interfaccia opzione 'sandbox_toggle_header_callback', // Il nome della funzione responsabile per il rendering dell'interfaccia opzione 'general', // La pagina in cui verrà visualizzata questa opzione 'general_settings_section', // Il nome della sezione a cui questo campo appartiene array (// L'array di argomenti da passare al callback. In questo caso, solo una descrizione. 'Attivare questa impostazione per visualizzare l'intestazione.')); Successivamente, definiamo la richiamata a cui si fa riferimento nella funzione sopra. Questo callback è utilizzato per rendere la casella di controllo e la descrizione sulla pagina di amministrazione:
/ ** * Questa funzione esegue il rendering degli elementi dell'interfaccia per attivare la visibilità dell'elemento di intestazione. * * Accetta un array di argomenti e si aspetta che il primo elemento dell'array sia la descrizione * da visualizzare accanto alla casella di controllo. * / function sandbox_toggle_header_callback ($ args) // Nota l'ID e l'attributo name dell'elemento deve corrispondere a quello dell'ID nella chiamata a add_settings_field $ html = ''; // Qui, prenderemo il primo argomento dell'array e lo aggiungeremo a un'etichetta accanto alla casella di controllo $ html. = ''; echo $ html; // termina sandbox_toggle_header_callback
Per quanto riguarda la casella di controllo, fai attenzione ai commenti, ma non preoccuparti troppo di alcuni degli attributi che non riconosci (come una chiamata alla funzione checked ()). Più avanti in questa serie, daremo un'occhiata a ciascun elemento di input e alle corrispondenti funzioni di aiuto.
A questo punto, il tuo file functions.php dovrebbe apparire così:
Seleziona le aree di contenuto che desideri visualizzare.'; // end sandbox_general_options_callback / * ------------------------------------------- ----------------------------- * * Callback Field * ---------------- -------------------------------------------------- ------ * / / ** * Questa funzione esegue il rendering degli elementi dell'interfaccia per attivare la visibilità dell'elemento di intestazione. * * Accetta un array di argomenti e si aspetta che il primo elemento dell'array sia la descrizione * da visualizzare accanto alla casella di controllo. * / function sandbox_toggle_header_callback ($ args) // Nota l'ID e l'attributo name dell'elemento corrispondono a quello dell'ID nella chiamata a add_settings_field $ html = ''; // Qui, prenderemo il primo argomento dell'array e lo aggiungeremo a un'etichetta accanto alla casella di controllo $ html. = ''; echo $ html; // termina sandbox_toggle_header_callback?>
A questo punto, aggiorna il impostazioni generali pagina. Dovresti vedere la tua casella di controllo con l'etichetta "Intestazione" e una descrizione accanto alla casella di controllo.
Sfortunatamente, in realtà non sta ancora salvando il valore nel database.
Per fare in modo che i nostri campi salvino effettivamente nel database, dobbiamo registrarli con WordPress. Fare ciò è relativamente facile: dobbiamo solo sfruttare la funzione register_setting.
Questa funzione accetta tre argomenti (due richiesti, uno facoltativo):
A questo punto, registriamo l'impostazione che abbiamo appena creato. Dai un'occhiata al codice qui sotto. Aggiungi questa riga di codice direttamente sotto la chiamata a add_settings_field nella funzione di inizializzazione definita in precedenza nell'articolo. È indubbiamente il modo più semplice per seguire tutti i frammenti di questo articolo:
// Infine, registriamo i campi con WordPress register_setting ('general', 'show_header'); Provalo: seleziona la casella di controllo, fai clic su "Salva modifiche" e nota che quando la pagina si aggiorna, l'opzione è cambiata. Deseleziona la casella di controllo, salva e guardala salvata.
Abbastanza facile, giusto?
Dobbiamo ancora introdurre le opzioni per attivare la visibilità dell'area del contenuto e dell'area del piè di pagina. È quasi esattamente lo stesso di come configuriamo l'opzione per attivare l'intestazione.
Per prima cosa, definiamo il campo per la visualizzazione dell'area del contenuto. Questo andrà sotto la prima chiamata a add_settings_field:
add_settings_field ('show_content', 'Content', 'sandbox_toggle_content_callback', 'general', 'general_settings_section', array ('Attiva questa impostazione per visualizzare il contenuto.')); E configuriamo la funzione di callback:
function sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_content_callback
Successivamente, definiamo il campo per la visualizzazione dell'area del footer:
add_settings_field ('show_footer', 'Footer', 'sandbox_toggle_footer_callback', 'general', 'general_settings_section', array ('Attiva questa impostazione per visualizzare il piè di pagina.')); E imposta anche la callback per questo campo:
function sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_footer_callback
Infine, registriamo questi due nuovi campi con WordPress. Queste due chiamate di funzione si trovano nella parte inferiore della funzione di inizializzazione definita in precedenza nell'articolo.
register_setting ('general', 'show_content'); register_setting ('general', 'show_footer'); La versione finale di functions.php dovrebbe apparire così:
Seleziona le aree di contenuto che desideri visualizzare.'; // end sandbox_general_options_callback / * ------------------------------------------- ----------------------------- * * Callback Field * ---------------- -------------------------------------------------- ------ * / / ** * Questa funzione esegue il rendering degli elementi dell'interfaccia per attivare la visibilità dell'elemento di intestazione. * * Accetta un array di argomenti e si aspetta che il primo elemento dell'array sia la descrizione * da visualizzare accanto alla casella di controllo. * / function sandbox_toggle_header_callback ($ args) // Nota l'ID e l'attributo name dell'elemento corrispondono a quello dell'ID nella chiamata a add_settings_field $ html = ''; // Qui, prenderemo il primo argomento dell'array e lo aggiungeremo a un'etichetta accanto alla casella di controllo $ html. = ''; echo $ html; // end sandbox_toggle_header_callback function sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_content_callback function sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // termina sandbox_toggle_footer_callback?>
Ora aggiorna il impostazioni generali pagina e noti che hai tutte e tre le caselle di controllo completamente funzionali.
A cosa servono le opzioni se non possiamo sfruttarle nel nostro tema o nel nostro plugin? Dobbiamo essere in grado di leggere i valori per gestire correttamente le nostre nuove opzioni.
Per fare ciò, dobbiamo usare la funzione get_option. Questa funzione accetta due argomenti (uno richiesto, uno facoltativo):
Innanzitutto, proviamo ad attivare la visibilità dell'intestazione. Nel modello di indice creato in precedenza in questo articolo, individuare l'elemento con l'ID dell'intestazione. Dovrebbe sembrare come questo:
Intestazione sandbox
Quindi, effettuiamo una chiamata a get_option nel contesto di un condizionale. Se il condizionale viene valutato su true (ovvero, l'opzione è stata verificata sul file impostazioni generali pagina), quindi verrà visualizzato l'elemento; altrimenti, l'elemento non verrà visualizzato.
Intestazione sandbox
Dopo di ciò, spera nel impostazioni generali pagina, selezionare l'opzione per nascondere l'elemento dell'intestazione e aggiornare la pagina iniziale. L'elemento di intestazione non dovrebbe più apparire.
A questo punto, si tratta semplicemente di ripetere il processo per l'elemento contenuto e il piè di pagina. Abbiamo bisogno di avvolgere il contenuto e gli elementi del piè di pagina con i condizionali che valutano il risultato delle chiamate get_option.
Guarda:
Questo è il contenuto del tema.
© Tutti i diritti riservati.
Rivisitare il impostazioni generali pagina, attiva ogni casella di controllo e aggiorna la pagina del tema. I tuoi elementi dovrebbero alternarsi indipendentemente l'uno dall'altro.
Questo è tutto, per ora! Abbiamo dato un'occhiata a tutte le funzioni richieste per l'introduzione di nuove sezioni, campi e impostazioni in WordPress. Certo, c'è molto altro da coprire.
Nel prossimo articolo, daremo un'occhiata a come aggiungere voci di menu personalizzate al menu di WordPress, e come possiamo introdurre le nostre pagine nel Dashboard di WordPress.
Abbiamo coperto molto materiale in questo articolo. Ecco un riferimento per tutto ciò che abbiamo usato in questo articolo.
