Come creare un vero tema WordPress

Benvenuti alla prima parte della guida “Come creare un vero tema WordPress”. Perchè ho usato il termine “vero”? Il motivo è semplice: a differenza di altre guide dello stesso genere, che spiegano come realizzare template molto semplici creati apposta a scopo didattico, questa guida si basa su un tema reale, Mymagazine, che potete scaricare dalla directory dei temi WordPress (e vi suggerisco di farlo per seguire meglio la spiegazione, troverete i file già pronti ed il codice css incluso).

L’obiettivo da realizzare è quello di acquisire le conoscenze necessarie alla realizzazione di un tema che possa superare la procedura di revisione del team di WordPress.org, partendo da un semplice sito in HTML.

La guida si rivolge ai principianti di WordPress, tuttavia richiede una conoscenza almeno di base di html, css, jQuery e php. Pertanto darò per scontato la conoscenza del codice html e css che incontreremo nel corso di questa serie, focalizzando la vostra attenzione sulle funzioni proprie di WordPress.

Per seguire questa guida occorre una versione di WordPress già installata (se non sapete come fare date un’occhiata alla pagina del codex relativa alla sua installazione). Pronti per cominciare? Via!

La cartella del tema ed i file indispensabili

Terminata l’installazione di WordPress, dovreste trovarvi di fronte ad un’immagine del genere:

immagine bacheca WordPress
la classica bacheca di WordPress

 

questo è l’aspetto del pannello di amministrazione di WordPress aggiornato alla versione 4.4.2. Provate a cliccare su “Aspetto” -> “Temi” e troverete l’elenco dei temi già preinstallati, qualcosa di simile all’immagine che segue (ovviamente l’aspetto potrebbe cambiare nel corso del tempo, con il rilascio di versioni successive):

immagine raffigurante i temi WordPress preinstallati
i temi WordPress preinstallati con la versione 4.4.2

Naturalmente il vostro tema ancora non c’è… creiamolo subito! Accedete alla cartella del computer dove avete installato WordPress, cliccate sulla cartella “wp-content” e quindi sulla cartella “themes”. All’interno troverete altre sotto-cartelle che contengono i temi già installati, createne una nuova dove inseriremo i file del tema, come nell’immagine che segue:

immagine della cartella dei temi di WordPressSe avete intenzione di creare un tema WordPress da inserire nella directory dei temi di WordPress.org è opportuno fare una ricerca per verificare se il nome che avete scelto sia già stato utilizzato o meno. Andate sulla pagina della directory dei temi e nella casella di ricerca inserite il nome che preferite: se non vi saranno corrispondenze potrete procedere con il nome del tema che avete in mente.

 

Con il vostro editor di testo preferito, create due file vuoti e salvateli all’interno della cartella del tema nominandoli “index.php” e “style.css”. Teoricamente questi due file da soli sarebbero sufficienti al funzionamento del tema, ma nella realtà a questi se ne aggiungono molti altri. Procedete allora con la creazione di altri 3 file: functions.php, header.php e footer.php e salvateli nella cartella principale del tema. In questo momento i file appena creati sono tutti vuoti, vedremo subito quali istruzioni inserire al loro interno.

Un’anteprima del tema WordPress

Come ho detto all’inizio questa guida si basa sul tema free Mymagazine, il cui aspetto è quello rappresentato nell’immagine che segue

screenshot del tema WordPress free Mymagazine
screenshot del tema free Mymagazine

Il codice del file html è quello riportato in questa pagina. Non lasciatevi intimorire da tutto quel codice, sopratutto se siete alle prime armi, buona parte di esso viene generato dinamicamente da WordPress in modo molto più semplice di quanto potreste pensare. Ce ne occuperemo a partire dal prossimo articolo, nel frattempo se avete dubbi o altre considerazioni scrivete un commento qui sotto. A presto!