Il tuo developer H4ck3rM4n è tornato con un nuovo articolo della saga “come creare un template per WordPress”, fatto completamente a “mano”. Ma prima di proseguire, assicurati di aver letto il mio articolo su “come creare un template per WordPress”.
Bene, ora possiamo cominciare!

Come costruire il tuo “header”.

Per il momento hai creato la struttura del template inserendo i due file principali e responsabili del suo funzionamento, hai scritto un po’ di codice css e hai dichiarato alcune delle funzioni WordPress necessarie a richiamare il foglio di stile predefinito del template.

 

Ora però il gioco si fa davvero duro e il primo passo è quello di costruire l’header, ovvero la “testa” del template che, solitamente, è composta da un menu, un logo e una barra di ricerca per gli articoli.

Per velocizzare i tempi, invece di creare gli elementi di cui hai bisogno, è possibile scaricare gratuitamente delle librerie grafiche (di sviluppo front-end) su questo sito http://materializecss.com/getting-started.html.

Una volta aperto il sito, clicca sul bottone verde MATERIALIZE e dopo potrai decidere dove salvare il file zip con le librerie. Dopo aver estratto il file è necessario inserirlo nella cartella del template (che nel mio caso ho rinominato “tutorial”), quindi su: wp-content/themes/nome-template.

Infine, per questioni di semplicità, ti consiglio di rinominare la cartella estratta in “materialize”, come puoi vedere nell’immagine poco sotto.

Template Tags

Il passo successivo è quello di “smanettare” un po’ e scrivere il codice necessario a inserire il nostro menu. Se torni all’index.php, il file principale del template, puoi vedere quello che hai scritto in precedenza.

Nell’attributo href del tag <link> hai inserito il codice php con una funzione che riporta esattamente il percorso del foglio di stile predefinito del template che ha sempre lo stesso nome: style.css. A questo punto puoi cambiare la funzione get_stylesheet_uri(); con get_template_directory_uri();.

In questo modo non solo si andrà a perdere il vecchio div colore verde acido, ma non è possibile nemmeno trovare il file del percorso scelto. Infatti se clicchi con il tasto destro del mouse e vai su “ispeziona elemento”, e dopo aver cliccato sulla scheda “console” dalla finestra uscita poco dopo, risulterà un errore di tipo 404. Si tratta del classico errore che riporta il protocollo http quando non viene trovato un file nel documento di ipertesto.

Invece se vai a cambiare la funzione utilizzando get_template_directory_uri(); potrai notare che l’errore, precedentemente riscontrato dal browser, non ci sarà più (non preoccuparti se la pagina rimane bianca, questo è dovuto al fatto che non stai utilizzando le regole del foglio di stile di default).

Bene, adesso che la console non rileva più l’errore 404, puoi continuare a sviluppare l’header.

 

Crea il tuo menu.

Per iniziare a creare il tuo menu puoi sfruttare le librerie scaricate che ti facilitano lo sviluppo dal punto di vista front-end, copiando il solo codice HTML – che il sito materialize mette completamente a disposizione – e ti permettono di risparmiare molto tempo.

Facciamo un esempio: copia il codice che trovi a questo link dopo il tag <body>.

Ricarica la pagina e guarda il risultato.

Adesso stai lavorando con il file index.php. Puoi trovare il menu in un altro file che WordPress riconosce come header.php. Il prossimo passo è quello di creare, all’interno della cartella del template, questo file a mano.

Sposta tutto il codice dall’index.php a header.php (escludendo il file tag body e html </body> </html>). Perché effettuare questo passaggio? Come spiegato nell’articolo precedente WordPress ha una sua gerarchia dei file da rispettare per il template e ogni file ha un suo ruolo. Infatti header.php gestisce l’intestazione dell’intero template.

Il passaggio successivo sarà quello di richiamare l’header.php con una funzione chiamata get_header();. Questa funziona va inserita in ogni pagina del template, in modo tale da richiamare sempre l’header (e facendo questo il menu sarà visibile in tutte le pagine dove la funzione sarà inserita).

Queste funzioni si chiamano template tag (per maggiori informazioni dai un’occhiata a questo link https://codex.wordpress.org/it:Tag_dei_template#Tag). Infine dovrai inserire questo template tag all’inizio del file, dove poi sarà importato e visualizzato l’header.php nell’index.php.

Ora dovrai fare la stessa cosa nell’index per inserire il footer richiamando il template tag get_footer();. È arrivato il momento di creare il file footer.php e inserire il seguente codice HTML (https://pastebin.com/kK0eHx1y) al suo interno:

Mentre all’interno dell’index devi inserire il template tag che richiama il footer.

Bene, per ora è tutto! Nel prossimo articolo ti parlerò di come registrare gli scripts e i fogli di stile per far interagire il template con il core di WordPress attraverso gli hook che la piattaforma mette a disposizione e attraverso il file functions.php dove ci sono tutte le informazioni del tema.

Dato che mi sento molto hacker inside, ti lascio con un pezzo musicale da urlo tratto dal film “Hackers” del 1995 (The Prodigy : Voodoo People).