Come creare un tema per WordPress partendo da zero?
Nelle prime due lezioni di questa guida su come creare un tema per wordPress abbiamo preso confidenza con la piattaforma WordPress: nella prima abbiamo visto come installarlo su un PC domestico trasformato per l’occasione in un ambiente di sviluppo, mentre nella seconda abbiamo dato un rapido sguardo a quello che è il Pannello di Amministrazione di WordPress, centro nevralgico per la gestione di un blog/sito.
Con la lezione di oggi entreremo nel vivo della creazione di un tema per WordPress; vedremo in particolare com’è organizzata la struttura di un tema e inizieremo a sviluppare il nostro personale template iniziando dalle fondamenta: la pagina principale e il foglio di stile principale.
Indice dell’articolo
- Ritorno Alle Origini: Un Po’ Di Storia
- Quali Sono I File Necessari Per Il Funzionamento Di Un Tema Di WordPress?
- Come Creare la struttura del nostro tema?
- Come Aggiungere Ulteriori Dettagli Riguardanti il Nostro Tema?
- Attiviamo il nostro Tema
- Conclusioni
1. Ritorno Alle Origini: Un Po’ Di Storia
Prima dell’avvento dei Temi, WordPress generava tutti i contenuti utilizzando un singolo file denominato “index.php” e alcuni file che permettevano di visualizzare e inviare i commenti. Un unico foglio di stile si occupava invece di controllare la presentazione dei contenuti. Tutte le altre pagine, comprese le categorie e le pagine archivio erano generate passando dei parametri alla pagina “index.php”.
Il nuovo modello – introdotto per la prima volta dalla versione 1.5 – prevedeva la separazione fisica delle varie parti (file php) che componevano la struttura del tema. Questo sistema ha reso semplice la creazione di template personalizzati per ogni singolo elemento che compone il sito/blog: pagine, pagine di archivio, categorie, pagine degli articoli, ecc.
2. Quali Sono I File Necessari Per Il Funzionamento Di Un Tema Di WordPress?
I file necessari per il funzionamento di un tema di WordPress sono due: “index.php” e “style.css”.
Com’è facile dedurre, il primo file (“index.php”) si occupa di fornire i contenuti da visualizzare mentre è compito del secondo (“style.css”) stabilire il modo in cui questi contenuti saranno mostrati sullo schermo.
Vedremo in seguito che è possibile creare dei template personalizzati per ogni singolo elemento del blog/sito (pagine, categorie, archivio, ecc), e per fare questo basterà aggiungere ulteriori file alla struttura principale del template appena descritta. Esiste infatti una gerarchia di nomi di file già stabilita e ben precisa cui fare riferimento per creare nuovi template da destinare ai principali elementi che compongono un blog/sito. Tali file assumono generalmente il nome destinato all’elemento che si desidera personalizzare. Per esempio: aggiungendo alla struttura del nostro tema un file denominato “single.php” e personalizzandone il markup sarà possibile creare un template che sarà utilizzato per mostrare tutti gli articoli del blog. Un file denominato “single.php” all’interno della struttura del tema serve ad assegnare un template personalizzato per la pagina che mostra il contenuto di un singolo articolo.
Lo stesso si può ottenere aggiungendo un file denominato “page.php” che sarà il template predefinito applicato per tutte le pagine create sul sito/blog. (In futuro analizzeremo dettagliatamente com’è possibile aggiungere e personalizzare ancora più minuziosamente un template e assegnarlo a una pagina ben specifica piuttosto che a tutte le pagine).
Nel caso in cui questi file appena menzionati (“single.php” e/o “page.php”) non fossero presenti nella struttura del nostro tema, WordPress utilizzerà il file principale del tema: “index.php” per mostrare il contenuto dei singoli articoli o le pagine del sito/blog, così come mostrato dalla Figura 1.
Figura 1 - Gerarchia dei Template di WordPress
Per chi volesse approfondire l’argomento consiglio di prendere visione della gerarchia dei template che si trova sulla documentazione ufficiale di WordPress.
3. Come Creare La Struttura Del Nostro Tema?
Tutti i file che compongono un tema di WordPress vanno inseriti all’interno di una cartella che – per essere installata e attivata – dovrà essere in seguito caricata sulla piattaforma e posta sotto la cartella riguardante i temi, al seguente percorso:
wp-content/themes/
3.1 Passo Uno: Creiamo la Cartella Che Conterrà Il Nostro Tema
Tutti i file del tema devono stare all’interno di una cartella, creiamo quindi una nuova cartella nel percorso indicato sopra e denominiamola “YIW”.
3.2 Passo Due: Creiamo I Due File Necessari Per Il Funzionamento Del Tema
Abbiamo detto che i file necessari per la creazione di un tema sono “index.php” e “style.css”, creiamo dunque i due file – per il momento vuoti – all’interno della cartella del nostro tema che abbiamo chiamato “YIW”. La struttura del nostro tema a questo punto dovrà presentarsi così come mostrata in Figura 2.
Figura 2 - Struttura Tema YIW
Se adesso proviamo a caricare il Pannello di Amministrazione del nostro Blog (installato nelle lezioni precedenti), e proviamo a visualizzare i Temi disponibili per la nostra piattaforma cliccando sul menù “Aspetto->Temi” possiamo notare che oltre ai due temi disponibili di default dopo l’installazione di WordPress, adesso è presente anche un terzo tema chiamato YIW di Anonimo, come mostrato nella Figura 3.
Figura 3 - Pannello di Amministrazione: Gestione Temi
Come puoi notare – nel riquadro rappresentante il nostro tema – manca lo screenshot (miniatura) del tema e i dati informativi relativi all’autore e a una breve descrizione riguardante il tema.
3.3 Passo Tre: Come Aggiungere Uno ScreenShot Del Nostro Tema?
Per mostrare uno screenshot del nostro tema all’interno del proprio riquadro, bisogna aggiungere lo screenshot in questione all’interno della struttura del tema e denominare il file in “screenshot.png”, come mostrato nella Figura 4.
Figura 4 - Struttura del Tema con l'aggiunta dello screenshot
Adesso se provi a ricaricare la pagina riguardante la gestione dei temi, puoi vedere che lo screenshot appena aggiunto è presente sopra il nome del tema (Figura 5).
Figura 5 - Gestione Temi
4. Come Aggiungere Ulteriori Dettagli Riguardanti il Nostro Tema?
Per aggiungere altri dettagli riguardanti il nostro Tema (visualizzabili sempre sul Pannello di Amministrazione nella gestione dei Temi) dobbiamo aprire il nostro foglio di stile denominato “style.css” e aggiungere all’inizio del documento le seguenti informazioni sottoforma di commento:
/* Theme name: Your Inspiration WordPress Theme url: http://www.yourinspirationweb.com Description: Tema sviluppato per il Corso di YIW Version: 1.0 Author: <a href="http://www.yourinspirationweb.com" title="Website Nando Pappalardo">Nando Pappalardo</a> Author url: http://www.yourinspirationweb.com Tags: 2 colonne, clean, minimal */
Se adesso andiamo a rivedere la solita pagina di gestione dei Temi, notiamo che sotto lo screenshot adesso sono presenti ulteriori dati rappresentativi del tema (Figura 6), come il nome del tema, l’autore, link al sito dell’autore, ecc.
Figura 6 - Gestione Temi con screenshot del Tema e altri dettagli appena aggiunti
5. Attiviamo il nostro Tema
A questo punto è possibile attivare il nostro tema e iniziare a lavorare seriamente sulla sua personalizzazione. Per attivarlo, basta cliccare sul collegamento denominato “Attiva” presente subito sotto il nome del Tema all’interno della pagina di gestione.
Dopo aver attivato il Tema, quest’ultimo sarà visualizzato come Tema corrente occupando il posto del precedente (figura 7).
Figura 7 - Gestione Temi: tema YIW attivato
Se provi a visualizzare la pagina riguardante il tuo blog/sito ti accorgerai che adesso al suo posto è caricata una pagina tutta bianca. Perché avviene questo? Nulla di preoccupante, abbiamo appena attivato il nostro tema il qualche contiene ancora un unico template (“index.php”) tutto vuoto. La vera personalizzazione deve ancora avere inizio.
6. Conclusioni
Per questa settimana possiamo anche fermarci qui: abbiamo visto un po’ di storia riguardante l’evoluzione dei temi e iniziato il processo di personalizzazione di un tema per WordPress.
Nella prossima lezione ci addentreremo ancora di più nel processo di personalizzazione, inizieremo a scrivere il markup principale relativo al nostro template nel file “index.php”, collegheremo a questo documento il foglio di stile (“style.css”) e cominceremo a definire tutti gli elementi che ne comporranno l’header (la parte superiore). Non perderti dunque il prossimo appuntamento.
Creare un tema per WordPress: Indice degli articoli trattati in questa guida
Per agevolarti la consultazione della guida “Creare un tema per WordPress“, alla fine di ogni articolo riporterò l’indice comprendente tutti gli argomenti trattati.
- Come Installare WordPress in Locale?
- WordPress: Diamo Uno Sguardo al Pannello di Amministrazione
- Come Creare un Tema per WordPress Partendo da Zero?
- WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2)
- Diamo Uno Sguardo al Loop di WordPress
- Aggiungiamo la Sidebar al nostro tema
- WordPress: come rendere dinamici Header e Sidebar del template?
- Gerarchia dei template e loro utilizzo: come creare un template per gli articoli?
- Come Creare Template Personalizzati per le Pagine di WordPress?
- WordPress: predisporre la sidebar per l’uso di widget
- Personalizzare il Template dei Commenti di WordPress (Parte 1) | (Parte 2)
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
50 commenti
Trackback e pingback
-
Come installare Wordpress in locale? | Your Inspiration Web
[...] Come Creare un Template per WordPress Partendo da Zero? [...] -
WordPress: Diamo Uno Sguardo al Pannello di Amministrazione | Your Inspiration Web
[...] Come Creare un Template per WordPress Partendo da Zero? [...] -
WordPress: Come Realizzare L’Header Del Tema? Parte 2 | Your Inspiration Web
[...] Come Creare un Template per WordPress Partendo da Zero? [...] -
WordPress: Come Realizzare l’Header Del Tema? Parte 1 | Your Inspiration Web
[...] Come Creare un Template per WordPress Partendo da Zero? [...] -
WordPress: Diamo Uno Sguardo al Loop | Your Inspiration Web
[...] Come Creare un Template per WordPress Partendo da Zero? [...] -
Aggiungiamo la Sidebar al nostro tema | Your Inspiration Web
[...] Come Creare un Template per WordPress Partendo da Zero? [...] -
WordPress: come rendere dinamici Header e Sidebar del template? | Your Inspiration Web
[...] Come Creare un Template per WordPress Partendo da Zero? [...] -
Come Creare Template Personalizzati per le Pagine di WordPress? | Your Inspiration Web
[...] Come Creare un Template per WordPress Partendo da Zero? [...] -
Gerarchia dei template e loro utilizzo: come creare un template per gli articoli? | Your Inspiration Web
[...] Come Creare un Template per WordPress Partendo da Zero? [...] -
template wordpress « Web Designer Italiani
[...] intanto potresti iniziare da qui: http://www.yourinspirationweb.com/2010/05/18/come-creare-un-tema-per-wordpress-partendo-da-zero/ Did you enjoy this article? Share [...] -
Creare un template WordPress da zero!!! - La Guida
[...] Come creare un tema per WordPress partendo da zero? | Your Inspiration Web ... -
Creare o modificare un tema per WordPress
[...] Come creare i file essenziali di un tema per WordPress: dopo una breve introduzione, in questo capitolo impari a ... -
WordPress, creare un template da zero | Guida Pagine Web
[...] Come creare un tema per WordPress partendo da zero? Fonte: yourinspirationweb.com [...]
Nando,
ti rinnovo i miei complimenti.
Gran bel post su come metter le prima mani nella costruzione di un tema per WordPress,dispiace solo che sia già finita la puntata =).
Attendo con ansia la settimana prossima e vedo di dirottare un po di utenti curiosi di questo cms qui.
Un abbraccio.
Ciao Lùca, grazie per i complimenti.
Non mi sarei voluto fermare proprio sul più bello però avevo già superato le 1300 battute e iniziare il nuovo argomento significava scriverne almeno altrettante. Purtroppo mi rendo conto di non riuscire ad essere molto sintetico, ho già dovuto lottare con me stesso in questo articolo per saltare tutta la parte riguardante la gerarchia dei template (e rimandare al sito ufficiale per approfondimenti =)
Complimenti per il tutorial! Veramente molto chiaro e ben fatto!
Paolo
complimenti anche da parte mia. articolo ben fatto.
Grazie anche a te, Claudio.
Mi sembra che tu sia stato sintetico al punto giusto. Per chi è nuovo alla creazione di temi meno testo avrebbe lasciato dei dubbi, più testo avrebbe creato confusione.
Siete i migliori
Grazie scienzedellevanghe =)
aspettavo la puntata odierna del corso ed inizia ad essere interessante ora aspettiamo il resto per poter creare il mio tema per il blog perché quello che ho non mi piace più.
Ciao Luca, intanto inizia a disegnare il tuo template che dalla prossima settimana si comincia a mettere in codice.
Out topic.
Il bello di questo argomento,come tutti gli altri scritti dagli altri autori, è proprio dal fatto che è unico.
Non esistono in rete dei manuali per la creazione di un tema per wordpress da 0 e chi chi ha provato s’è fermato alla seconda lezione.
Una cosa che ci tengo a sottolineare è che stamane,molto presto,mi collegai in questo sito per vedere se era uscita la terza puntata,sapendo che Nando è puntuale.
Non vedendo ancora il post mi son sentito come quando alla TV non trasmettono la tua fiction preferita per via delle elezioni =D.
Con questo voglio dire che i fedeli utenti come me,trovano qui un punto di riferimento che da nessun’altra parte esiste.
Avete centrato l’obiettivo!
Luca, grazie per il tuo feedback a nome di tutti gli autori di YIW!
Questi commenti non hanno davvero prezzo, valgono più di ogni altra cosa e ci stimolano a continuare sulla strada che abbiamo intrapreso.
Complimenti per l’articolo, talmente chiaro che sembra tutto facile, nn vedo l’ora arrivi il prossimo e, dopo quello, il successivo e poterli leggere, finalmente, tutti insieme… ho notato che nello screenshot avete messo il futuro template del vostro sito, devo ammettere che questo mi mancherà molto…
Ciao Marco e grazie per i complimenti.
Che vista da falco =)
Ci siamo affezionati anche noi a questo layout che con il tempo è diventato parte integrante di tutti noi. Però è normale seguire periodicamente un processo di rinnovamento (redesign) per stare a passo con i tempi.
Il nuovo layout come avete avuto modo di vedere – nell’anteprima che vi abbiamo mostrato nell’articolo del compleanno di YIW – sarà molto più minimal, poca grafica (ma buona) e molto più spazio ai contenuti (per esempio in home dovrebbero essere visualizzati gli ultimi venti articoli suddivisi in due colonne piuttosto che dieci). Soprattutto adesso che google ha confermato di prendere in considerazione la velocità di caricamento ai fini del calcolo del page rank, una home page di un megabyte e rotti (come quella attuale) è decisamente controproducente.
La puntualità di queste lezioni è spettacolare :)…….Il martedì mattina apro….e tac……..LEZIONE……
P.S. Ma davvero cambiate la grafica del sito???…..nooooo questa era veramente bella e diversa dal solito……… :(
comunque se c’è la mano di Sara anche in quello nuovo…..sarà sicuramente altrettanto bello…….
Si parla del diavolo….:D
Il layout attuale e’ stato realizzato di getto, sulla base dell’ispirazione del momento. Quello nuovo e’ meglio strutturato, sulla base delle nuove esigenze che sono emerse nel tempo, di facile consultazione, leggibile (con una tipografia diversa e piu’ mirata) e ordinato. Cambiare e’ sempre difficile e un po’ triste, ma credo che nel web le tendenze e i gusti cambino in modo estremamente rapido e cristallizzarsi in una forma non rappresenta l’evoluzione che desideriamo per YIW. Cresciamo con voi e per voi, questo lo sapete ;)
come per tutti gli elementi grafici che girano intorno a YIW, anche qui c’è la mano di sara.
siamo in una botte di ferro!
L’unica pecca attuale del sito è la velocità di caricamento del sito… se migliorerà con la nuova grafica, non rimarrà che riconoscere la
perfezionedello stesso. Non che mi dispiaccia aver trovato un sito così interessante, anzi… soprattutto con quello che circola in rete al giorno d’oggi… beh che aggiungere… complimenti e continuate così… ;-)Ciao Cardy, grazie per i complimenti.
Con il nuovo redesign del sito stiamo cercando di sopperire proprio a questo inconveniente. Dove possiamo cerchiamo di migliorare costantemente il nostro operato.
A presto
Ragazzi, l’idea di questa guida è fantastica. Complimenti!
Grazie Andrea e benvenuto su YIW!
Mi aggiungo ai complimenti. peccato che ci sia solo una lezione alla settimana! cercherò di sopravvivere!
Grazie anche a te, Gloria! E dai che una settimana fa in fretta a passare =)
Complimenti, ben spiegato e senza molti rigiri, oseri dire perfetta.
Fino adesso le guide che avevo trovato erano molto generiche e forse un po confusionarie per chi come me non si intende di php e wordpress, ho conoscenza solo di xhtml e css, ma di come usarle per una struttura così non ne avevo idea.
Grazie e attendo la prossima.
Ciao Paolo, grazie per i complimenti e benvenuto su YIW!
Il codice php deve ancora fare il suo ingresso in questa guida, lo inizieremo a intravedere dalla prossima lezione in poi. Appuntamento a martedì!
a martedì, nel frattempo mi leggo gli altri post ; )
Fantastica questa guida,non ci sono cosi’ ben fatte in giro. garazie
Ciao Katy, benvenuta su YIW e grazie per i complimenti.
Finalmente! Ci voleva qualcuno che avesse la foglia di spiegare approfonditamente e in italiano ;) come creare un template per wordpress!
Ciao Nicolò, benvenuto anche a te su YIW e grazie per le belle parole!
Complimenti per questo utilissimo tutorial.
Complimenti per il magnifico blog ricco di risorse davvero interessante e soprattutto spiegate con una bellissima semplicità e chiarezza diffilcilmente rintracciabile in genere.
L’unico limite, parlo da utente visitatore è la difficoltà nel seguire gli articoli in senso cronologico. Dal blog sembra essere stato rimosso il tradizionale calendario di pubblcazione degli articoli, credo per dare spazio ad altro tipo di contenuti più importanti.. ma vorrei seguire ad esempio gli articoli successivi a
http://www.yourinspirationweb.com/2010/07/13/come-creare-template-personalizzati-per-le-pagine-di-wordpress/ dove in conclusione si riferisce “Non perderti dunque il prossimo appuntamento.” ma non riesco a trovare il seguito..
Ho letto comunque a fine articolo quanto segue
Indice degli articoli trattati in questa guida
Per agevolarti la consultazione della guida alla fine di ogni articolo riporterò l’indice comprendente tutti gli argomenti trattati.
Quindi gli articoli sono riportati tutti qui ?
Sicuro che non è sfuggito qualcuno ?
Grazie ancora per lo splendido lavoro :)
Ciao Francesco, sì, l’elenco degli articoli che compone l’intera guida è riportato sempre alla fine di ciascun articolo e comprendere proprio tutti gli articoli, nessuno escluso :)
Su questa guida sto per pubblicare un libro che comprenderà anche lo sviluppo di widget, plugin e pannello di amministrazione di un tema.
ottimo post ora ci provo e vi faccio sapere
buono studio, giulio… e facci sapere ;)
Molto utile come guida, sto’ spostando il mio blog da blogger a WordPress per ovvi motivi e ora mi sto creando il template :)
Ottima guida! Potrebbe essere di aiuto anche questa per molti..
http://cloux.it/cms/disegnare-un-template-wordpress-13/
Salve,
Grazie per il tutorial che io ho provato tutto e mi sento sodisfato per che ho imparato.
Vorrei dirti che quando uso la tema Your Inspiration WordPress si nasconde Barra strumenti wordpress del ADMIN.
Non capisco perche sucede solo con questa tema ,invece tramite altri temi Barra Istrument Wordpres e visibile.Uso WP version 3,5 e nel mio profilo e configurato per esere visibile…
GRAZIE