Una guida alla personalizzazione del tema WordPress sezioni, impostazioni e controlli

Nell'ultimo articolo, abbiamo creato un molto tema di base che includeva il Theme Customizer in modo che potessimo vedere come appare nel contesto di WordPress Dashboard.

Dopo aver armeggiato con le opzioni fornite, è facile vedere quanto sia potente questa particolare caratteristica. In generale, questa singola funzione può consentirci di allontanare gli utenti dalle pagine di opzioni complicate e consentire loro di vedere il risultato delle loro modifiche non appena le fanno, senza dover saltare avanti e indietro tra la dashboard e il lato pubblico di il sito.

E per quanto sia divertente iniziare a scrivere il codice per dare vita a nuove funzionalità, è importante capire che cosa lavoriamo con noi prima di iniziare effettivamente a lavorare con esso, giusto?

Quindi, in questo articolo, faremo un sondaggio su ciò che funziona con il Customizer Theme di WordPress. Quando finisci questo articolo, dovresti avere una chiara comprensione del Customizer del tema e come iniziare a introdurre le tue impostazioni nelle sezioni esistenti, creare nuove sezioni e alcuni dei controlli integrati che sono disponibili per noi da usare nel nostro lavoro.


Componenti del personalizzatore del tema

In breve, ci sono tre componenti che vanno a creare l'interfaccia del Theme Customizer. Questi sono:

  1. sezioni
  2. controlli
  3. impostazioni

Daremo un'occhiata a ciascuno di questi approfondimenti in un momento, ma è importante capire che non è così completamente diverso dall'API Impostazioni.

In effetti, ti consiglio di tornare indietro e di leggere quella serie, soprattutto se introdurrai il Personalizzatore del tema in un tema che utilizza l'API Impostazioni.

Ne parlo perché, mentre iniziamo a dare un'occhiata al Customizer del tema, verranno illustrate alcune informazioni che mostrano come è possibile legare il Customizer del tema alle opzioni esistenti.

D'altra parte, se lo sei non attualmente usando l'API Settings - non preoccuparti! Il Customizzatore di temi si prenderà cura di serializzare tutte le opzioni per te in modo tale che sarai in grado di recuperarle a livello di programmazione altrove nel tuo tema.

Componenti di personalizzazione del tema

Ma prima di discutere di tutto ciò, parliamo dei componenti del Customizer tema.

sezioni

Notate nella figura sopra, abbiamo tre diverse sezioni, una delle quali è espansa:

  1. Titolo del sito
  2. Colori
  3. disposizione

Ovviamente, il tuo chilometraggio può variare a seconda di come è impostato il tuo tema o di come stai costruendo il tuo tema. Ma il punto è che le sezioni sono composte da controlli e impostazioni ciascuna delle quali parleremo in modo più dettagliato momentaneamente.

Forse la cosa più importante da notare quando aggiungi le impostazioni alle sezioni è che WordPress ha in realtà diverse sezioni che già fornisce. Per esempio:

  • title_tagline - questa sezione è utilizzata per contenere il titolo del sito e la tagline (a volte indicato come il nome del blog o la descrizione).
  • colori - è una sezione utilizzata per contenere le impostazioni di controlli specifici relativi alle impostazioni per il colore del testo, i colori dei collegamenti e così via.
  • header_image - viene utilizzato per contenere i controlli responsabili per consentire agli utenti di specificare un'immagine di intestazione.
  • immagine di sfondo - questa sezione è utilizzata per contenere i controlli responsabili per l'impostazione di un'immagine di sfondo.
  • nav - è la sezione che darà agli utenti la possibilità di personalizzare i loro menu.
  • static_front_page - offre agli utenti le opzioni necessarie per impostare una prima pagina statica o una pagina del blog, quando necessario.

Anche se è completamente possibile - e comune - creare il tuo proprio sezioni (che faremo in seguito in questa serie), le menziono qui in modo che quando arriva il momento di iniziare a introdurre Impostazioni, non si reinventa la ruota di averne una già fornita.

Caso in questione: supponiamo che vogliate introdurre una funzionalità che consenta agli utenti di cambiare i colori dei collegamenti nel proprio blog. Avrebbe senso collocarlo nel colori sezione che è già fornita piuttosto che, diciamo, creare la tua sezione.

Si tratta di sapere quando utilizzare ciò che viene fornito e quando creare qualcosa che è necessario per il tuo blog.

controlli

In poche parole, un "controllo" è una parola più o meno elaborata per un elemento HTML che consente all'utente di manipolare qualcosa sul blog. Questo può essere qualsiasi cosa, da un elemento di input a una textarea, o una casella di controllo, a un selettore di colori.

WordPress ti dà la possibilità di usare facilmente uno dei controlli HTML più comuni e di creare i tuoi controlli (che non rientrano nell'ambito di questo particolare articolo).

Per quanto riguarda i controlli nel sistema generale del Personalizzatore tema, i controlli rappresentano il valore di un'impostazione e appartengono a una singola sezione.

Ad esempio, osservando l'illustrazione sopra, si nota che abbiamo un controllo di input del testo. Questo controllo è responsabile della rappresentazione del valore di titolo impostazione e appartiene alla sezione "Titolo del sito".

Abbastanza facile, giusto?

impostazioni

Infine, le impostazioni sono sinonimi delle opzioni: in breve, sono i valori che gli utenti modificano o modificano ogni volta che tentano di effettuare personalizzazioni sul proprio blog.

Nel caso in cui non sia chiaro, tieni presente che le impostazioni sono rappresentate da un controllo e possono appartenere solo a una singola sezione (poiché i controlli possono appartenere solo a una singola sezione).

Ora, qui è dove può essere un po 'complicato, specialmente se stai lavorando con l'API delle impostazioni esistente, o se stai iniziando un tema da zero usando il Customizer tema.

Per impostazione predefinita, il Customizer tema utilizza il theme_mod funzionalità per archiviare tutti i valori del tema in un'unica riga di database. Puoi leggere di più su get_theme_mod e set_theme_mod sui rispettivi articoli del Codex.

In generale, nota tutto theme_mod i registri sono tenuti nel wp_options tavolo con la chiave theme_mods_ theme-name formato. Ciò significa che è possibile cercare facilmente le opzioni serializzate utilizzando un front-end del database o eseguendo una query SQL.

Ad esempio, diciamo che stiamo usando il nostro Esempio di personalizzazione del tema che abbiamo iniziato a creare nell'ultima lezione. Per vedere i valori di impostazione memorizzati per quello tema, è possibile eseguire la seguente query:

SELECT * FROM wp_options WHERE option_name = 'theme_mods_theme-customizer-example'

Oppure, ancora, puoi sfogliare usando un front-end del database.

Se, invece, introdurrà il Customizer tema con le opzioni che sono già state utilizzate dall'API Settings, è molto facile integrarle anche nel customizer. La differenza principale è quella piuttosto che l'utilizzo theme_mod, utilizzerai l'API delle opzioni in modo che tutti i dati continuino a essere conservati nel wp_options tabella, ma saranno recuperati utilizzando get_option.

La cosa bella di questo è che tutte le impostazioni sono contenute in una singola riga nel database e che è possibile recuperare i valori in base alla loro chiave usando get_theme_mod.


Metterli tutti insieme

Ho pensato di mostrare come tutto questo si inserisca in questo articolo, ma non volevo rischiare di includere troppe informazioni nell'articolo. Come tale, ho voluto gettare le basi per i tre componenti del Customizer Theme di WordPress in modo da avere una terminologia e definizioni chiare quando iniziamo a scrivere codice.

Dopo tutto, come possiamo capire efficacemente il codice che stiamo scrivendo se non siamo nemmeno sicuri di quali siano alcuni termini? Inoltre, questo probabilmente avrebbe più senso nel contesto di alcuni codici di esempio.


Avanti il ​​prossimo…

A tal fine, nella prossima lezione, daremo un'occhiata esattamente a come implementare la nostra sezione, controllo e impostazione nel Customizer del tema.

Daremo anche uno sguardo ai vari metodi di trasporto che ci sono disponibili, che sono fondamentalmente come gli aggiornamenti vengono mostrati all'utente. In ogni caso, non è niente di troppo complicato, ma metteremo tutto in pratica nel prossimo articolo.

Quindi se non hai raggiunto la serie finora, ora è il momento in cui inizieremo a scrivere un sacco di codice nei prossimi articoli.