Tutorial sul tema WordPress per principianti – Parte 2: Modelli
Questa lezione del tutorial sul tema WordPress per principianti ti insegnerà come strutturare i principali elementi costitutivi di un tema e come iniziare a creare modelli. Inizieremo a creare un output HTML e come includere i blocchi di costruzione nei modelli del nostro tema. Nel passaggio precedente abbiamo impostato il minimo indispensabile di un tema WordPress e l’abbiamo attivato. Ma al momento non sta facendo molto e non contiene nemmeno HTML valido per una pagina web. Risolviamolo.
Blocchi costitutivi di intestazione e piè di pagina (e barra laterale).
Nei nostri file modello abbiamo bisogno di HTML valido. Potremmo scrivere la struttura HTML completa (iniziando con <html>, <head>e full <body>) in index.php, ma questo diventa impraticabile quando si mantengono più file modello nel tema. Immagina di aver creato una serie di modelli e poi di aver bisogno di una piccola modifica nella parte dell’intestazione; dovresti quindi modificare tutti i modelli in modo che rimangano coerenti. Questo non è intelligente.
La soluzione è dividere l’intera struttura HTML in parti sensibili; costruzioni. Ogni blocco risiede nel proprio file e ogni volta che ne abbiamo bisogno in un modello, lo includiamo. I blocchi più comuni e sensati sono uno per l’intestazione, uno per il piè di pagina e uno per il contenuto, ma se il tuo tema presenta una barra laterale, anche la barra laterale dovrebbe essere un edificio separato.
Quelli di voi che hanno più familiarità con PHP probabilmente hanno familiarità con i metodi include()o require(). Questo è esattamente ciò che faremo, tuttavia utilizzeremo le funzioni di WordPress per includere altri file poiché offrono vantaggi aggiuntivi.
In questa lezione creeremo l’intestazione, il piè di pagina e la barra laterale come elementi costitutivi. Le barre laterali sono tuttavia diventate sempre meno comuni nelle pagine Web, ma implementeremo comunque una barra laterale destra nel nostro tema. Questi tre elementi costitutivi sono una pratica comune in tutti i temi di WordPress ed è in realtà così comune che WordPress offre l’automazione per queste tre cose.
Creazione dei modelli di intestazione, piè di pagina e barra laterale
Creiamo un nuovo file vuoto chiamato header.phpnella nostra cartella del tema. Per ora aggiungeremo un codice HTML molto semplice (non preoccuparti, aggiungeremo un codice HTML più appropriato in seguito).
Crea un nuovo file denominato footer.phpnella directory del tuo tema. Tutto ciò di cui abbiamo bisogno (per ora) in questo file è la chiusura della nostra struttura HTML.
E infine, crea un nuovo file vuoto chiamato sidebar.php. Aggiungiamo solo il tag HTML <aside>all’interno.
Compresi gli elementi costitutivi
Torniamo al nostro index.phpfascicolo. Tutto quello che dobbiamo fare ora è dire a WordPress dove vogliamo includere il file di intestazione e piè di pagina. Ovviamente vogliamo caricare l’intestazione proprio all’inizio e il piè di pagina proprio alla fine di questo file.
WordPress offre semplici funzioni per includere questi blocchi costitutivi; get_header()e get_footer()rispettivamente per il file di intestazione e piè di pagina. Abbastanza intuitivo vero? Aggiungiamo quelli nel nostro index.php e vediamo cosa succede.
Aggiorna il tuo frontend e ispeziona o visualizza il sorgente HTML per vedere che abbiamo combinato più elementi costitutivi per creare una struttura HTML completa.
Ora sei libero di modificare il contenuto di index.phpindipendentemente dall’intestazione e dal piè di pagina!
Includiamo anche la barra laterale. Tieni presente che nel tuo tema potresti voler considerare casi e modelli in cui non desideri la barra laterale, ad esempio la prima pagina.
Includere la barra laterale è facile come l’intestazione e il piè di pagina; per questo usiamo get_sidebar(). Aggiungiamolo a index.php, subito prima di ottenere il footer.
Aggiorna e dovresti vedere il sorgente HTML incluso il nostro <aside>. Non preoccuparti, in un passaggio successivo impareremo come convertirlo in una vera e propria area della barra laterale in cui puoi posizionare i widget.
Il nostro tema è piuttosto statico in questo momento. Nella prossima lezione di questa serie di tutorial sul tema WordPress inizieremo finalmente a immergerci correttamente nelle funzioni di WordPress per caricare contenuti e informazioni da WordPress in modo dinamico nei nostri modelli.