Share
In questa serie, diamo uno sguardo completo al Customizer del tema WordPress.
Nello specifico, stiamo capendo esattamente di cosa si tratta e del perché ci avvantaggia, come integrarlo nel nostro tema, come lavorarci nel contesto di altri temi e come introdurre le nostre sezioni, impostazioni e opzioni nel Customizer.
Come accennato nell'ultimo articolo, abbiamo dato un'occhiata al Customizer del tema negli articoli precedenti, ma volevamo rivisitarlo da quando è uscito da un po 'di tempo. Inoltre, volevamo dare un'altra occhiata a come può essere utilizzato per aiutare a colmare il divario tra ciò che l'utente si aspetta che accada contro ciò che effettivamente accade. Dopo tutto, è così è i nostri lavori per cercare di rendere l'esperienza dell'utente il più piacevole possibile.
Quindi, in questo articolo, continueremo la nostra discussione sul lavoro con il Personalizzatore del tema imparando come integrarlo in un tema che non è già disponibile.
Lo so, lo so - la maggior parte dei temi che sono attualmente sul mercato - almeno quelli che sono stati aggiornati a WordPress 3.4 in poi - includono già il customizer del tema, ed è facile approfittare di ciò che è già presente.
In effetti, mi azzarderei a dire che una parte di quelli che leggono questo articolo sono abituati a includere il Theme Customizer nel tuo lavoro facendo un po 'di copia e incolla per farlo accadere e poi andare avanti con qualsiasi attività tu abbia implementare nel tuo tema.
Lo dico non come uno scavo, né in un senso di pessimismo, ma nel riconoscere che questo è il modo in cui molti sviluppatori lavorano: trovano una soluzione che qualcun altro ha già creato, lo implementa nel loro lavoro, quindi continua a muoversi inoltrare.
Non c'è nulla di intrinsecamente sbagliato in questo - in effetti, è parte di ciò che rende l'open source così grande - ma non siamo qui per discutere "come copiare e incollare il Customizer tema". Siamo a conoscenza di come integrarlo.
Quindi, nei passaggi seguenti, daremo un'occhiata a un tema che non include in modo nativo il Customizer tema e poi guardiamo - riga per riga - a ciò che è necessario per farlo funzionare in modo che possiamo iniziare ad usarlo in i nostri temi.
L'obiettivo è che alla fine di questo articolo non solo tu lo sappia Come per integrare il Theme Customizer, ma lo sai che cosa fa ogni bit di codice.
Ai fini di questo articolo, lavoreremo con a molto tema WordPress di base. La fonte verrà fornita per intero alla fine dell'articolo ma, fino ad allora, andiamo avanti e lavoreremo alla creazione di un tema passo dopo passo.
Nota che tutto ciò che faremo è parte delle pratiche di sviluppo del tema come indicato nel rispettivo articolo del Codex WordPress.
Innanzitutto, nell'installazione locale di WordPress, crea una directory in wp-content / themes chiamato tema-customizer-example. Da qui, inizieremo ad aggiungere il nostro codice sorgente.
Per prima cosa, dobbiamo creare un foglio di stile in modo che WordPress riconosca il tema nel menu del pannello di controllo "Aspetto". Per fare questo, dobbiamo fornire style.css con un blocco di commenti nella parte superiore del file.
Ad esempio, ecco cosa sto usando:
/ * Nome tema: URI tema tema personalizzazione tema: http://github.com/tommcfarlin/theme-customizer-example/ Versione: 0.1.0 Descrizione: Un tema di base utilizzato per dimostrare come integrare il Customizer tema in un tema WordPress . Autore: Tom McFarlin Autore URI: http://tommcfarlin.com Licenza: URI licenza GPLv2: http://www.gnu.org/licenses/gpl-2.0.html * /
Successivamente, aggiungiamo un paio di file modello per dare forma al tema.
Successivamente, vogliamo definire un modello di intestazione. Questo può essere fatto usando header.php e aggiungendo il seguente codice sorgente:
><?php wp_title("); ?> >
Niente di troppo complicato, giusto? In poche parole, abbiamo definito il nostro capo elemento, l'apertura corpo tag, quindi un semplice div elemento utilizzato per rappresentare l'intestazione.
Abbiamo quindi incluso un h1 per visualizzare il titolo del blog e un h2 per visualizzare la descrizione del blog.
Per tutti gli scopi di questa serie, lavoreremo con un singolo modello per la visualizzazione del contenuto. Nello specifico, tutto ciò che mostriamo sarà fatto usando index.php.
Questo sarà un semplice modello che mostra l'intestazione, il piè di pagina e una singola riga di testo:
Questo è il contenuto.
Probabilmente, questo è il modello più semplice di tutti, non è vero??
Abbiamo quasi finito - la prossima cosa che dobbiamo fare è introdurre un template di base per il footer che servirà come luogo per, per esempio, mostrare la data del copyright del blog.
A tal fine, implementeremo il seguente codice:
© Tutti i diritti riservati
Si noti che l'output di questo modello indica "Copyright 2013 [Nome del blog] Tutti i diritti riservati." Naturalmente, se stai leggendo l'articolo in un altro anno, anche il codice sarà diverso.
Nota che se vuoi che il tuo tema abbia un'immagine carina o persino divertente nella dashboard, puoi fornire un screenshot.png file nella radice della directory del tema.
Le dimensioni dovrebbero essere 300x225 (o il doppio di quelle per i display HiDPI). Come puoi vedere nell'esempio sopra, ho scelto di usarne uno da uno dei miei fumetti preferiti, sempre.
Certo, puoi scegliere di andare con quello che vuoi - o niente del tutto.
A questo punto, siamo pronti a dare un'occhiata al tema. Quindi attiva il tema nella dashboard e dovresti vedere qualcosa di simile allo screenshot seguente:
Come ho detto - non è niente di troppo complicato, ma servirà ai nostri scopi andando avanti.
Ed ecco la cosa: il Theme Customizer è già integrato in tutti i temi predefiniti andando avanti. No, non è possibile personalizzare esattamente tutti gli aspetti del tema, ma prendiamolo per un test drive.
Dal menu "Aspetto" nella dashboard, fai clic sulla voce di menu "Temi", quindi fai clic sul link "Personalizza" visualizzato sotto la descrizione del tema.
Questo lancerà il Customizer tema e dovresti vedere qualcosa di simile a questo:
Da qui, espandere il Titolo del sito e tagline sezione e quindi modificare il contenuto di ciascuno di quei campi. Se tutto è cablato correttamente, allora dovresti vedere le tue modifiche riflesse immediatamente all'interno del riquadro di anteprima.
Abbastanza pulito, eh?
Ovviamente, stiamo iniziando appena non abbiamo nemmeno graffiato la superficie di ciò che può fare il Customizer di temi né come possiamo aggiungere ulteriori opzioni al customizer.
Ma per ora, dovresti avere le fondamenta che ti danno il tema con cui lavoreremo e le funzionalità di base del Customizer dei temi.
Faremo un tuffo molto più profondo in questo nel prossimo articolo. Per ora, puoi prendere una copia di lavoro di questo tema usando questo link al repository GitHub.
Come accennato in precedenza nell'articolo, lo scopo di questo post è quello di spiegare il Come e il perché del Customizer tema. In breve, dovresti essere in grado di descrivere a qualcun altro come integrare la Personalizzazione del tema nel loro lavoro, e cosa fa ogni riga di codice.
Ma questa è solo la metà della sfida.
Nel prossimo articolo, faremo un approfondimento su quali sezioni, impostazioni e controlli sono e su come si relazionano al Customizer tema. Ciò dovrebbe dare solide fondamenta dalle quali possiamo iniziare a costruire le nostre funzionalità nel Customizer del tema e in definitiva il nostro tema.
Accentsconagua