In questa lezione inizierai a imparare come WordPress carica i contenuti a seconda della pagina in cui ti trovi e della gerarchia dei file del modello del tema. Imparerai anche cosa è necessario per un tema valido. E alla fine creeremo finalmente il nostro tema e lo attiveremo.
File modello tema
Dietro il cofano, WordPress capisce quale modello caricare in base all’URL in cui ti trovi. Se il tuo WordPress è installato nel dominio "example.com/wordpress/" dovresti vedere il modello di prima pagina. Andando su "example.com/wordpress/categoria/news/" ti darà di default un elenco di post assegnati alla categoria News utilizzando un modello di categoria.
WordPress segue una gerarchia di quale modello caricare e quale sceglie dipende da quali modelli hai a disposizione nel tuo tema. Ad esempio "example.com/wordpress/categoria/news" WordPress cercherà prima un modello specifico per la categoria "notizie". Se non è stato trovato, WordPress cercherà un modello specifico per l’ID categoria. Anche in questo caso, se non è stato trovato, WordPress cerca il modello di categoria generale. Se non è stato trovato, WordPress cercherà un modello ancora più generale per gli archivi. E così via e così via.
WordPress Codex, che è il sito di documentazione di WordPress, mantiene un’immagine utile e aggiornata che illustra la gerarchia dei file dei modelli dei temi; https://codex.wordpress.org/File:Template_Hierarchy.png#file
Non preoccuparti se all’inizio l’immagine sembra troppo confusa! Man mano che procediamo nel tutorial, ti ritroverai a fare riferimento a questa immagine per trovare i modelli che desideri implementare nel tuo tema.
Il modo in cui leggi l’immagine è andando da sinistra verso destra. In base alla pagina in cui ti trovi, i modelli sono molto specifici e più avanzi verso il lato destro, più generali diventano i modelli. L’ultimo fallback è quello più a destra; index.php, che verrà caricato se non sono stati trovati altri modelli di adattamento.
Tutti i file modello elencati nell’immagine sopra devono risiedere nella cartella principale del tema e devono essere nominati esattamente come indicato. Non puoi inserire i tuoi modelli in sottocartelle per scopi organizzativi perché WordPress non sarà in grado di trovarli!
Inizieremo in modo semplice! Oggi creeremo gli unici pochi file necessari affinché WordPress lo riconosca come tema, per poi espanderci da lì.
Anatomia di un tema WordPress
Hai solo bisogno di due file per creare un tema WordPress valido.
Nell’illustrazione della gerarchia dei modelli, hai notato quella all’estrema destra; chiamato index.php? Questo è il modello di fallback finale se WordPress non riesce a trovare alcun modello. Questo è uno dei file richiesti. L’altro file è un foglio di stile (.css). Non è necessario che contenga alcun CSS, ma deve contenere un blocco di commenti che fornisca informazioni su WordPress sul tuo tema. Queste due cose sono tutto ciò di cui hai bisogno per un tema WordPress valido.
Creiamo il nostro tema creando questi due file!
Creazione del tuo primo tema
Tutti i temi devono trovarsi nelle rispettive cartelle separate all’interno della sottocartella /wp-content/themes/. Se accedi a questa cartella nel tuo navigatore di file, probabilmente vedrai già alcune cartelle di temi qui; ventinove, ventidiciassette, ecc. Questi sono temi inclusi con WordPress come impostazione predefinita.
In /wp-content/themes/, crea una nuova cartella. Assegna un nome appropriato (minuscolo, senza spazi, non uguale a qualsiasi altra cartella). Di solito il nome della cartella è una versione slug del nome del tuo tema. Per questo tutorial, chiamerò la mia cartella del tema " wptutorial".
Entra nella cartella del tuo tema e crea un nuovo file vuoto denominato index.php. Ho modificato il file e ho appena aggiunto del testo casuale, così possiamo vedere più facilmente quando è in uso:
Siamo già a metà strada! Creiamo il secondo file richiesto. All’interno della cartella del tema crea un nuovo file vuoto denominato style.css.
Apri il style.cssfile e avvia immediatamente un blocco di commenti (/*e chiudilo con */). All’interno di questo blocco di commenti dobbiamo seguire alcune regole di WordPress su come definire il nostro tema. Come minimo dobbiamo definire il nome del nostro tema. Ma possiamo anche aggiungere informazioni su chi è l’autore, homepage, numero di versione, informazioni sulla licenza e molto altro. Consulta la documentazione di WordPress su cosa puoi aggiungere.
In questo tutorial lo manterremo semplice; aggiungeremo il nome del tema e tu scriverai il tuo nome come autore. Puoi andare avanti e usare qualsiasi nome tu voglia, questo è quello che ho inserito nel mio style.css:
/*
Theme Name: A White Pixel Theme
Author: Alex White
*/Salva e chiudi il file (questo tutorial non toccherà più questo file), a meno che tu non voglia scrivere CSS per il tuo tema mentre procedi.
Congratulazioni! Ora hai creato un tema WordPress valido!
Attivazione del tuo tema
Entriamo nel pannello di amministrazione di WordPress e andiamo su "Aspetto> Temi" e vediamo se riusciamo a trovare il nostro tema lì.
Fai clic sul pulsante Attiva e visita il tuo sito. Dovresti vedere quello che hai scritto index.php!
Questo index.phpmodello verrà utilizzato indipendentemente dalla pagina in cui ti trovi. Prova a visualizzare un singolo post e vedrai lo stesso. Un tema dovrebbe avere almeno 5-10 modelli per gestire contenuti diversi. Non preoccuparti, ci arriveremo.
Fantastico, abbiamo un tema! Nella prossima lezione inizieremo effettivamente a codificare e faremo in modo che faccia delle cose.