Come creare un Template per WordPress – Guida parte 2

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 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 .

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