Creare un tema per WordPress con Bootstrap

Creare un tema per Wordpress da zero

Oggi parliamo di WordPress e di come creare un tema da 0 o quasi. Perché dico quasi? Perché utilizzeremo uno starter theme creato da Automatic, la società che gestisce WordPress. Il tema di base si chiama Underscores e potete trovarlo a questo indirizzo.

Si tratta di un tema veramente povero di personalizzazioni CSS e di tutto il resto, contiene solo le impostazioni fondamentali, ma è la base ideale per il nostro progetto. La seconda risorsa che utilizzeremo è Bootstrap, un framework potentissimo che permette di creare delle interfacce web moderne e funzionali.

Mettiamoci subito al lavoro, andiamo su underscores.me e diamo un nome al nostro nuovo tema. Per questo progetto, con un slancio di fantasia, useremo il nome “My Theme”. Aspettiamo che il sito generi l’archivio e salviamolo all’interno della cartella “themes” che si trova in “wp-content”, una delle tre macro-cartelle di WordPress. Scompattiamo l’archivio e cancelliamolo.

Ora abbiamo un nuova cartella che contiene il nuovo tema. Se state lavorando su Windows, oltre ad essere dei poveracci, potete saltare al passaggio successivo, mentre un’operazione da fare su Linux è assegnare i permessi della cartella al server:

I permessi di lettura e scrittura servono anche a noi per le modifiche, per cui lanciamo dal terminale questo ulteriore comando:

Tornati sul front-end vedrete un tema molto povero di CSS e tra poco lo sarà ancora di più. Portiamoci all’interno della cartella “my-theme”, apriamo il file “style.css” e cancelliamo tutte le dichiarazioni, cominciando subito dopo la fine dei commenti iniziali. I commenti vanno lasciati, altrimenti il tema non funziona. Questo è quello che deve rimanere nel file “style.css”:

Ora dobbiamo scaricare Bootstrap che come detto ci semplifica di molto la creazione di un nuovo tema. Bootstrap va scaricato da questa pagina perché abbiamo la possibilità di escludere, in qualsiasi momento, le funzioni e i componenti del framework che non ci servono. Inoltre possiamo personalizzare tutto lo stile: il colore di base, il tipo di font, la larghezza del layout. Tutte le impostazioni vengono compilate dal software che ci fornisce il pacchetto completo.

Facendo delle prove, possiamo tornare sui nostri passi e migliorare il risultato, riprendendo il lavoro con tutte le personalizzazioni che abbiamo fatto senza perdere niente, grazie ad un file di configurazione che ci permette modificare solo quello che serve.

Scarichiamo Bootstrap nella cartella del nostro starter theme. Scompattiamo l’archivio e ripetiamo le stesse operazioni precedenti per la nuova cartella, permessi e proprietà attraverso il terminale.

Per includere Bootstrap all’interno del nostro tema, apriamo il file “functions.php” e cerchiamo la funzione che carica CSS e Javascript. Il tool di Underscores genere i nomi delle funzioni con la denominazione che avete dato al tema. In questo caso, ripeto, il tema è stato chiamato “My Theme”, per cui la funzione che devo ricercare è my_theme_scripts(), subito dopo il commento “Enqueue scripts and styles”.

All’interno delle graffe di questa funzione, dobbiamo fare alcune operazioni. In primis spostiamo jQuery nel footer, specificando l’eccezione per il pannello di amministratore. Attraverso la funzione wp_deregister_script() smonto jQuery e lo vado ad includere nuovamente con la funzione wp_register_script() ma impostando l’ultimo parametro su true, in questo modo il file viene incluso nel footer, lasciando la priorità del caricamento ai contenuti.

Ora includiamo anche il file Javascript di Bootstrap, subito dopo l’inclusione di jQuery e rimanendo all’interno del blocco condizionale che esclude l’admin.

Adesso non ci rimane che includere i file CSS di Bootstrap. Utilizzeremo la funzione wp_enqueue_style() per entrambi i file. Ricordo che l’ordine dei fogli di stile determina il risultato finale nella pagina, per cui una dichiarazione nell’ultimo file, sovrascrive quella contenuta nel file precedente. Per cui includiamo Boostrap prima del file “style.css” del tema, dove potremo inserire le regole per modificare elementi che non ci piacciono.

Ok, ci siamo! La nostra prima funzione dovrebbe presentarsi più o meno così:

Apriamo il front-end e vediamo se tutto funziona perfettamente. Vi ricordo che possiamo cambiare le impostazioni di Bootstrap ricaricando il file config.json compreso nel pacchetto. Basterà scaricare nuovamente il pacchetto compilato e sostituire i file all’interno della cartella nel nostro starter theme.

Il primo passo è stato fatto, nel prossimo capitolo vedremo come impostare il layout del tema, utilizzando la griglia di Bootstrap.

Nel frattempo potete seguire il videotutorial relativo a questa parte

Creazione tema per WordPress – Prima parte

Lascia un commento...è gratis...

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *