Come creare un tema WordPress: creazione della struttura di base

Andiamo avanti con la guida Come creo un tema WordPress? parlando della struttura di base che deve avere il nostro tema. Questo articolo presuppone che hai installato MAMP o XAMP sul tuo MacBook o PC. Supponiamo anche che hai già installato anche WordPress. Se non hai ancora l’ambiente pronto leggi: Come installare MAMP e WordPress su Windows e MacBook.

Quali sono i file necessari per creare un tema WordPress?

Per prima cosa devi sapere che per creare un tema WordPress è necessario avere due file fondamentalmente ed è necessario posizionarli all’interno di una cartella precisa. I file principali sono “index.php” e “style.css”. Il primo file menzionato si occupa di fornire i contenuti del nostro sito web definendo anche la struttura del contenuto in HTML. Il secondo file, “style.css”, ha lo scopo di fornire al nostro contenuto uno stile grafico più interessante.

Sono sufficienti questi 2 file?

La risposta è sì. Però come ben sai sono fissato con il codice pulito e di conseguenza non posso fermare questa guida e farti vedere tutto in due file. Così ti mostro qual’è la gerarchia dei file WordPress e come essi possono essere suddivisi:

Ho trovato questa bella grafica online che credo sia perfetta per il caso nostro. Te la spiego brevemente. Quando apri una pagina WordPress la piattaforma si chiede “che tipo di pagina devo fornire all’utente?” (quindi si legge da sinistra verso destra). A questo punto, in base alla pagina scelta, WordPress scorre il grafico fino a quando non trova una delle pagine .php con il nome appropriato.

Nel nostro caso, per qualsiasi tipo di contenuto, WordPress andrà a mostrarci il contenuto di un post, di una pagina statica, di una pagina “about”, di qualsiasi cosa, utilizzando il template definito in “index.php” perché è l’unico file che abbiamo. A breve ti insegnerò a creare una struttura più complessa e organizzata in grado di fornire il contenuto in maniera più appropriata.

Vedremo quindi che:

• Potremo creare un template php appositamente per un POST singolo del blog (single.php)
• Potremo creare un template php appositamente per una pagina statica (page.php)
• Potremo creare template php appositamente dedicati ad header e footer (header.php e footer.php)
• Potremo creare template per pagine che utilizzano un nome specifico. Per esempio la “Home”, la quale avrà lo “slug” con valore “home” (page-home.php)

Nota bene: uno slug di un post, di una pagina, ecc. non è altro che un identificativo. Utilizzando uno slug, a differenza dell’id di un post/pagina, abbiamo più chiaro quello che stiamo facendo in quanto è più “parlante”. Dirti infatti creiamo il file “page-home.php” è molto più parlante di “page-32.php”.

Da dove inizio?

Bene. Per iniziare con il nostro tema entriamo nella cartella “htdocs” che abbiamo visto nelle altre guide. Entriamo nella cartella del nostro sito (nel mio caso “sitolocale”). Dunque troverai al suo interno una cartella denominata “wp-content”, quindi entra in questa cartella. Infine entra nella cartella “themes”.

Giunti a questo percorso dovresti trovarti dei temi già pre-installati, quindi ci sono già delle cartelle.

Passaggio preliminare

Per prima cosa giunto a questo punto è necessario che abiliti le estensioni visibili sui file che sono spesso nascoste in Windows. Per farlo apri la cartella di “esplora risorse” selezionando la cartella gialla nella barra delle applicazioni. Dunque in alto a sinistra trovi “Organizza” e seleziona “Opzioni cartella e ricerca” nel menù che si apre. Dunque nella scheda “Visualizzazione” togli il segno di spunta che si trova alla voce “Nascondi le estensioni per i tipi di file conosciuti”.

Su Mac OS trovi la spunta rapidamente sotto le preferenze del finder nella scheda “Avanzate”. Per maggiori informazioni Salvatore Aranzulla può aiutarti in questo a questo indirizzo.

Creazione del tema

Nel percorso “wp-content/themes” fai quindi click con il tasto destro e crea una nuova cartella chiamandola “coursetheme”. All’interno di questa cartella è necessario creare 3 file:

• index.php – Devi chiamarlo esattamente in questo modo ed è un file obbligatorio
• style.css – Devi chiamarlo esattamente in questo modo ed è un file obbligatorio
• screenshot.png – Metti un’immagine che riconosci, una tua foto, quello che vuoi e rinominala in “screenshot.png”. Non è un file obbligatorio, ma ti aiuta a riconoscere meglio il tuo tema.

Quindi la nostra cartella si presenterà in questo modo:

Aggiungiamo dei dettagli al tema

Per aggiungere il titolo del tema ed altre informazioni apri il file “style.css” con il tuo editor di testo preferito. Io utilizzerò Sublime Text. Ti consiglio di utilizzare lo stesso perché è un editor molto utilizzato dai programmatori e nelle aziende. E’ comodo, rapido e gratuito quindi provare non costa nulla 🙂

Dunque, una volta aperto il file, copia in alto le seguenti righe di codice:

/*
Theme name: CourseTheme Theme
Theme url: https://www.paolodellaguzzo.com/
Description: Tema sviluppato da Paolo Dell'Aguzzo
Version: 1.0
Author: <a href="https://www.paolodellaguzzo.com/" title="Website Paolo Dell'Aguzzo">Paolo Dell'Aguzzo</a>
Author url: https://www.paolodellaguzzo.com/
Tags: static home, speed, sublime
*/

In queste righe vediamo l’utilizzo di un commento /* */ che racchiude le informazioni che WordPress utilizza per identificare in maniera più precisa il nostro tema:

• Theme name: Il nome del tema
• Theme url: L’url del tema, dove trovare la documentazione, ecc.
• Description: Una descrizione del tema
• Version: La versione del tema, iniziamo dalla 1.0 poi ogni volta che si apportano modifiche raggiungendo delle milestone di progetto è buono incrementare la versione
• Author: Dà informazioni sull’autore del tema
• Author url: riporta l’url al sito dell’autore del tema
• Tags: Riporta alcuni identificativi per il nostro tema, per chi lo cerca ad esempio se è in vendita (l’ho popolato con 3 cose a caso che mi piacevano)

Vediamo il nostro tema

Per vedere il tema è necessario entrare sul pannello di amministrazione del sito. Quindi digita l’url “http://localhost/sitolocale/wp-admin/”, nel tuo caso al posto di “sitolocale” potresti voler mettere il nome che hai dato tu al sito. Dunque entra in “Aspetto > Temi”:

All’interno della schermata che si apre dovresti vedere il tema che hai appena creato!

Cliccando sull’immagine del tema potrai vedere tutti i dettagli del tema che abbiamo inserito prima nel file “style.css”. Al momento se provi invece a visualizzare l’anteprima non vedrai molto poiché il nostro file “index.php” che ci fornisce il contenuto è vuoto.

Conclusione

Con questo articolo hai imparato a collocare un tema nella cartella corretta e dunque a scrivere i dettagli del tuo tema allegando uno screenshot. Hai imparato a vedere il tema su WordPress in locale. Nel prossimo articolo avrai la possibilità di imparare a sviluppare il tuo primo contenuto nel file “index.php”. Ciò vuol dire che il tuo tema inizierà a mostrare qualcosa e sarai pronto ad attivarlo.

Per rimanere sempre aggiornato ricordati di seguire Come creo un tema WordPress? e di iscriverti alla Newsletter!

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!)