Faccio felici un po' di utenti che spesso mi hanno chiesto come è possibile "creare un tema wordpress da zero". Stavo per scrivere una guida per intero, ma voglio segnalarvi questa di Claudio Corti che è davvero fantastica.
Premessa
Senza queste conoscenze di base infatti, vi conviene provare a modificare un tema già fatto oppure usare l’ottimo theme-generator che trovate a quest’indirizzo.
Non scoraggiatevi cmq, se siete qui è perchè volete imparare ed io cercherò di essere il più chiaro ed esaustivo possibile; in più, alla fine del tutorial, potrete scaricare il tema che costruirò qui con voi. Bene cominciamo!
Files che compongono un tema WordPress
Iniziamo con il dire che un tema WordPress è composto da diversi files ed una directory per le immagini; I files di base per un tema funzionante sono:
header.php
footer.php
index.php
page.php
comments.php
sidebar.php
single.php
search.php
style.css
functions.php
Tengo a precisare che questa è una linea guida a cui più o meno si attengono tutti i temi per WordPress, ma potrete trovarne molti in rete con files nominati diversamente, o con più files (ad esempio quei temi a più sidebar).
Cosa serve spezzettare il codice
Ma perchè questa divisione? Perchè rendere un template “modulare” è un grande vantaggio sia per la progettazione che per la manutenzione; infatti le pagine vere e proprie in WordPress sono 4 (index.php, page.php, single.php e search.php), gli altri files sono “inclusioni” di codice che servono a completare la pagina di volta in volta.
Header ad esempio serve a contenere la parte superiore del vostro blog; allo stesso modo footer è solo la parte finale.
Prima ho detto che questa divisione, seppur un pò “ostica” per i non avvezzi, è un grande vantaggio poi per progettare e manutenere il vostro blog: vediamo cosa intendevo.
Immaginate di voler cambiare l’header del vostro sito, aggiungendo un immagine o una scritta, o cambiare la disposizione del vostro menu; bene in questo modo dovrete farlo solo su un file e non N volte su tutte le pagine che compongono il vostro blog; allo stesso modo potete inserire lo script per le statistiche sul vostro footer, oppure un immagine sulla sidebar solamente una volta.
Ci penserà poi il php a includere dove serve il vostro file, e la vostra modifica si ripercuoterà su tutto il vostro blog senza dover fare nient’altro e con un margine d’errore molto più basso.
Funzioni dei files in dettaglio
Vediamo ora cosa servono i nostri moduli e che parte del nostro layout va messo in ciascun blocco.
header.php -> contiene la parte superiore del sito (di solito il banner ed il menù) ma più in generale tutto ciò che si deve ripetere su tutto il sito nella parte superiore.
footer.php -> è lo speculare di header e contiene la parte finale del blog (in genere i tag di chiusura html o la grafica di chiusura del vostro layout).
index.php -> è la vostra homepage, ossia la pagina che si presenta quando si accede al blog.
page.php -> è il template delle pagine interne del blog (nel mio caso ad esempio about o contacts).
comments.php -> è la porzione di codice relativa ai commenti che viene inclusa all’interno dei post; qui vengono inseriti i commenti e il form per inviarli.
sidebar.php -> qui abbiamo tutti gli strumenti di navigazione del sito (a volte vi si inserisce anche il menu) come le categorie, gli archivi dei post o in generale, i widgets per WP.
single.php -> è la pagina che contiene un singolo post, quella che si apre quando cliccate su un post dalla homepage per intenderci.
search.php -> è la pagina che si apre quando si effettua una ricerca tramite l’apposito widget search
style.css -> è il file di stile che serve a dare tutti gli attributi grafici del nostro template
functions.php -> serve a dichiarare le funzioni che vogliamo scrivere a mano per il nostro blog; se non vogliamo aggiungere niente di particolare basterà solo il codice di default che rende la nostra sidebar “widget ready”, ossia pronta a ricevere nuovi widgets dal pannello admin del blog; a riguardo vedere l’ultima parte di questo tutorial.
Iniziare a progettare un layout
A questo punto, con il know-how necessario, ci apprestiamo ad iniziare sul serio
La cosa migliore da fare è aprire il vostro bel programma di progettazione per pagine web (vi consiglio Adobe Dreamweaver a pagamento se non siete pratici, in caso contrario anche editor come PsPad vanno benissimo) ed iniziare a disegnare il vostro layout, tenendo presente che avrete bisogno di almeno un div dove inserire un bannerino, un div per il menù (a menochè non vogliate inserirlo nella sidebar), e di altri due div (uno largo e uno più stretto) dove inserire i post e la sidebar.
Se avete dubbi lasciatemi un commento. Se tutto sommato questo post vi è tornato utile allora abbonatevi al mio feed.