Creazione di opzioni per i temi di WordPress con l'API di personalizzazione dei temi

La creazione di opzioni per i temi di WordPress con l'API di personalizzazione dei temi è facile da fare. Questo articolo ti mostra come è fatto.

L'API di personalizzazione dei temi di WordPress è stata rilasciata con WordPress 3.4, nel 2012. Ha promesso agli sviluppatori un modo standardizzato per aggiungere temi ricchi di opzioni e agli utenti un modo per modificare il proprio sito Web in modo facile da usare.

Per gli utenti, il personalizzatore del tema front-end ti consente di cambiare rapidamente l'aspetto del tuo sito e persino di ottenere un'anteprima dal vivo.

Il successo di questo progetto è discutibile, ma è in fase di miglioramento e sta prendendo piede. È stato costruito su solide fondamenta e non c'è motivo per non iniziare con esso.

Diamo quindi un'occhiata a come possiamo facilmente aggiungere impostazioni ai temi utilizzando l'API.

Ecco cosa tratteremo oggi:

• Costruire le nostre fondamenta
• I componenti di un'ambientazione a tema
• Utilizzo dei valori di impostazione
• Anteprime dal vivo
• Incapsulamento in una classe
• Ulteriori opzioni

Costruire le nostre fondamenta

La chiave dell'API di personalizzazione è la classe WP_Customize_Manager , a cui è possibile accedere tramite l'oggetto $wp_customize . Utilizzeremo vari metodi definiti in questa classe per aggiungere sezioni e controlli delle impostazioni al loro interno.

Il modo consigliato per creare le impostazioni del tema consiste nell'incapsularle in una classe. Nei nostri esempi iniziali, non aderirò a questa raccomandazione per assicurarmi che sia chiaro cosa fa parte dell'API di personalizzazione e cosa no. Completerò l'articolo con un'implementazione basata su classi.

Iniziamo creando una funzione nel file functions.php del nostro tema, che ci permetterà di includere le nostre aggiunte nel personalizzatore. Questa funzione deve essere agganciata per customize_register.

I componenti di un'ambientazione a tema

Come accennato nell'esempio, ogni elemento che aggiungi al personalizzatore è composto da tre parti:

• È necessario creare una sezione in cui inserirlo. Questa sezione può essere ovviamente una di quelle preesistenti
• Un'impostazione deve essere registrata nel database e
• È necessario creare un controllo che venga utilizzato per manipolare l'impostazione definita

Se la separazione tra un controllo e un'impostazione sembra confusa, pensala in questo modo: quando crei un'impostazione, dici a WordPress che esiste effettivamente un'impostazione per il colore del carattere e il valore predefinito per questo è #444444. Di per sé, questo significa già che questa impostazione può essere utilizzata.

Tuttavia, il personalizzatore del tema deve sapere come manipolare questa impostazione. È possibile creare un campo di testo in cui l'utente inserisce nuovi colori manualmente come "#ff9900", ma è anche possibile specificare un controllo del colore, che genererebbe un selettore di colore. A livello di database, tutto si ridurrà ancora a un colore esadecimale, ma il lato rivolto all'utente è diverso.

Creazione di una sezione

add_section() viene utilizzato per creare sezioni. Richiede due parametri, uno slug di sezione e un array di argomenti. Ecco un esempio di come ho impostato una sezione per le opzioni del piè di pagina in un tema.

La maggior parte di questo è abbastanza autoesplicativo. Nota la priorità, però! Questo determina l'ordine della sezione sullo schermo. Mi piace aumentare le mie opzioni in decine. Se devo inserire una sezione tra due sezioni esistenti non avrò bisogno di reindicizzare tutto, posso semplicemente assegnare la nuova 95.

Nota che le sezioni non verranno visualizzate quando sono vuote. È necessario aggiungere un'impostazione e un controllo prima che vengano visualizzati.

Aggiunta di impostazioni

Le impostazioni vengono create con il metodo add_setting() . Anche loro prendono uno slug come primo parametro e un array di argomenti come secondo. Dai un'occhiata di seguito per un esempio di aggiunta di un colore di sfondo alla nostra sezione sopra.

Ci sono un sacco di opzioni che potremmo aggiungere qui, ma per ora andrà bene. Si noti che le impostazioni non sono legate alla sezione. Come ho già detto, le impostazioni sono semplicemente registrate con WordPress. Spetta ai controlli, che sono legati alle sezioni per manipolarli.

Creazione di un controllo

I controlli vengono messi in atto con il metodo add_control() . Questo metodo accetta uno slug e un array di argomenti oppure può anche ricevere un oggetto di controllo dedicato. Un oggetto di controllo viene utilizzato per controlli più complessi come selettori di colore o caricatori di file.

Ecco come ho creato il controllo che modifica il colore di sfondo del piè di pagina:

Ho passato un oggetto di controllo al metodo add_control() . Questo oggetto deve essere costruito passando l'oggetto $wp_customize come primo parametro, un ID univoco per il controllo come secondo e una matrice di argomenti come terzo.

Nota che il controllo è dove tutto si unisce. la section è impostata sull'id della sezione che abbiamo creato e settings sono impostate sull'id dell'impostazione.

Una volta che tutti e tre sono stati impostati, dovresti essere in grado di ricaricare il personalizzatore e vedere il tuo lavoro.

Utilizzo dei valori di impostazione

Per impostazione predefinita, le impostazioni vengono salvate in un theme_mod. Theme_mods sono un'alternativa all'API delle impostazioni, forniscono un modo semplice per gestire le impostazioni specifiche del tema. Tutto quello che devi fare per recuperare il valore di un'impostazione è usare la funzione get_theme_mod() con l'id dell'impostazione passata ad essa.

Aggiungiamo alcuni CSS dinamici al nostro sito Web collegandoci a wp_head e utilizzando le nostre impostazioni salvate:

Anteprime dal vivo

Le anteprime live per le impostazioni non sono abilitate per impostazione predefinita. Per usarli devi fare tre cose:

• Accoda un file Javascript che gestisce le anteprime
• Aggiungi il supporto per l'anteprima dal vivo per l'impostazione e
• Crea il codice Javascript per occuparti di ogni impostazione

Accodamento dello script di anteprima dal vivo

L'unica cosa irregolare in questo passaggio è che dobbiamo usare customize_preview_init e dobbiamo assicurarci che 'jquery' e 'customize-preview' siano caricati prima del nostro script. A parte questo, è una coda standard che punta a un file javascript nel nostro tema:

Aggiungi il supporto per l'anteprima dal vivo per l'impostazione

Questo è abbastanza facile. Negli argomenti per le nostre impostazioni dobbiamo definire una chiave di transport e impostarne il valore su postMessage . Rivediamo il nostro codice di prima:

Crea il codice Javascript per occuparti di ogni impostazione

Dovremo usare la funzione wp.customize() in Javascript. A questa funzione dovrebbe essere assegnato l'id dell'impostazione come primo parametro, il secondo è una funzione di callback. All'interno leghiamo una funzione alla modifica dell'impostazione e scriviamo il nostro codice che si occuperà della modifica.

Tra tutto ciò di cui abbiamo solo bisogno per scrivere una riga, usa questo modello copia-incolla per la velocità di scrittura dell'anteprima dal vivo:

Incapsulamento in una classe

L'incapsulamento in una classe è una buona idea perché ti consente di scrivere nomi di funzioni migliori e di rendere il tuo codice più conforme a più temi, se hai più temi in lavorazione. Ecco come l'ho fatto per il nostro esempio sopra.

Nota che tutto è esattamente lo stesso, tutto ciò che è cambiato è il nome di alcune funzioni e ci riferiamo a metodi all'interno della classe invece che a funzioni sparse nel nostro file functions.php .

Ulteriori opzioni

Consiglio vivamente di leggere la documentazione sull'API di personalizzazione del tema nel codice di WordPress. Contiene molte impostazioni aggiuntive e modi per lavorare con l'API.

• temi gratuiti
• temi premium