Oggi prendo spunto da un video di un workshop di Piero Bellomo registrato alla WordPress Conference del 2013, per scrivere questo tutorial per creare un tema WordPress personalizzato, utilizzando _s e Bootstrap.

Questo tutorial verrà diviso in diverse puntate, man mano che vado avanti con il lavoro:

1. Operazioni preliminari di installazione;
2. Progettazione del tema;
3. Less e Bootstrap;
4. Aggiungere le pagine portfolio;

OBIETTIVO che mi sono prefissata: passare da configuratrice di temi preconfezionati a vera sviluppatrice in WordPress, utilizzando un mio tema fatto a mano.

==> Vuoi invece usare un tema già fatto per WordPress? Scopri qui i miei consigli

Prima o poi, qualsiasi web designer sente l’esigenza di creare un tema proprio. Vuoi perchè molti temi sono lenti, vuoi per smanettare, vuoi per avere padronanza completa del proprio codice, prima o poi si sente l’esigenza per lo meno di sperimentare la creazione di un tema WordPress personalizzato.
Io sentivo questa esigenza fin da subito, quando mi sono resa conto di aver acquistato un tema abbastanza lento, e comunque ritengo sia opportuno saper progettare un tema da soli, senza dover dipendere da altri.

Mi sono accorta che la maggior parte dei temi offrono miriadi di opzioni non necessarie, un sacco di font incluse, editor avanzati per costruire le pagine, miriadi di shortcodes, che vanno solo ad appesantire il caricamento di tutto.

Il mio tema aveva un editor visuale per gli articoli, e mi sono resa conto subito che andavo molto ma molto meglio a scrivermi l’HTML da sola, inoltre aveva dei problemi in alcune parti, insomma ero da subito insofferente.

Perchè Underscore

Come suggerito nel video, ho scelto un tema base tra i più funzionali e allo stesso tempo appunto “base”, cioè senza fronzoli che magari potremmo aggiungere dopo. Si tratta di _s, o Underscore,  tema base sviluppato da Automattic, open source.

In questo articolo trovi una interessante intervista a uno degli sviluppatori di Automattic, Konstantin Obenland, che spiega perchè usare Underscore. In particolare si legge che Underscore è perfettamente in linea con gli standard di WordPress, non è un Framework o un parent theme, ma un un Base theme, pronto per essere elaborato e stilizzato, per poi diventare esso stesso un tema.

Qualche esempio di temi sviluppati su base _s? Si parte da Twenty Fourteen, l’ultimo tema di default prodotto da WordPress, il sito della Western University, e molti altri.

Viene posto grande risalto al fatto che usanto Underscore si risparmiano le prime 1000 ore di lavoro che si impiegherebbero partendo a sviluppare un tema da zero.

Come framework CSS ho utilizzato Bootstrap, con Less, di cui spiegherò il funzionamento qui.
Ho seguito con profitto questo tutorial in inglese, molto ben fatto, proprio da Automattic, per una infarinatura sulla struttura dei temi e delle pagine di WordPress, funzioni comprese.

Fasi di installazione

Ti riassumo qui le fasi operative della creazione di un tema personalizzato con _s e Bootstrap, come ho proceduto io:

1. Creazione di un sottodominio del sito principale;
2. Installazione WordPress;
3. Installazione _s;
4. Installazione Bootstrap e Less;

1. Creazione di un sottodominio

Io ho scelto di lavorare direttamente sul server, su un sottodominio di questo sito. Ho quindi configurato sul mio host di Netsons un nuovo dominio di terzo livello ed un nuovo database.

2. Installazione di WordPress

Ovviamente andremo ad installare WordPress. In questo caso ho scelto di fare tutto a mano via FTP, e di non usufruire di installazioni pre-confezionate del mio hosting, per evitare di aggiungere sporcizia al sito. Ho installato direttamente la versione italiana di WordPress.

Dopo aver completato l’installazione di WordPress, ho esportato i contenuti del mio blog con il comando Strumenti > Esporta, da questo sito, e li ho caricati sulla nuova installazione con Strumenti > Importa, nel sottodominio. Questo per avere dei contenuti reali su cui lavorare, ovviamente evitando di far indicizzare il sito, mediante il comando <meta name=’robots’ content=’noindex,follow’ />.

Il sito senza template acquistato era così veloce che non mi accorgevo nemmeno di quando cambiavo pagina.

Ho installato poi Developer plugin. Non essendo programmatore, non avevo bene idea di quello che andavo ad utilizzare, ma ho seguito il consiglio del tutorial di Automattic, anche per imparare qualcosa in più. Questo plugin consente l’installazione di Debug bar e altri utili plugin per developer. Mi prefiggo di imparare ad usarli.

E fino a qui, siamo arrivati ad impostare il “cuore” del nostro sito, cioè la base su cui girerà il nostro tema personalizzato.

Andiamo ora a progettare e a creare un nostro tema, in modo che sia anche riutilizzabile in futuro in altre installazioni, personalizzandolo.

3. Installazione _s

Dal sito underscore.me si può scaricare una installazione personalizzando automaticamente il nome del tema, cosa molto comoda e che consiglio di fare, per evitare di dover fare un replace nei vari file dove è richiamato il nome del tema. Il tema sarà così pronto per essere copiato nella cartella wp-content/themes/.

Prima però personalizziamo il css inserendo i nostri dati, così da “appropriarci” ufficialmente del nostro tema.

Fatto questo, carichiamo via FTP la cartella del nostro tema dentro a wp-content/themes/. Attiviamo il tema dall’admin di WordPress, e visualizziamo il risultato, che sarà tanto deprimente quanto minimale! Ma non disperiamo.

4. Installazione Bootstrap e Less

Questa parte mi ha richiesto parecchia ricerca, perchè non essendo programmatore, non sapevo quale fosse il modo migliore per integrare Bootstrap in WordPress.

Ho trovato anche un plugin che fa questo, ma ho voluto proseguire la ricerca, per riuscire a fare tutto a mano.

Qui devo dire che è cascato l’asino, anzi l’asinA, cioè IO, perchè per integrare Bootstrap e Less, non capendo come procedere, avrei dovuto copiarmi paro paro le funzioni presenti nell’esempio del tutorial di Piero Bellomo, citato ad inizio articolo, a questo punto tanto valeva scaricare il suo tema e installarlo.

Quali sono le difficoltà che mi hanno bloccato?

– non sapevo come integrare le classi di Bootstrap con le classi id WordPress;

– non sapevo cosa modificare per inserire Less, e se inserire Less con il suo js, oppure il file compilato, e dove, per lasciare pulito il codice;

– nel progetto di Piero Bellomo, ho visto che molti file erano diversi dal progetto _s, contenevano funzioni che citavano Bootstrap;

– su web ho trovato solo tutorial che partivano da Bootstrap e arrivavano a un tema WordPress, non il contrario come volevo fare io.

Così ho deciso di installare direttamente _strap, il tema base sviluppato da _s, da Piero Bellomo, e di studiarmelo per bene.

Il tema si trova su gitHub, basta scaricarlo, contiene appunto _s integrato in modo minimale con Bootstrap e Less.

Questo tema permette di creare un suo clone, già con il nome e lo slug personalizzato.

Basta seguire questi passaggi:

1. Scaricare il file .zip del tema da gitHub

2. Installarlo come tema nella cartella wp-content/themes ed attivarlo

3.  Nel menu “Aspetto” apparirà un link “Crea tema”, che consente di clonare _strap con il nome e lo slug che si desidera.

4. Attivare il nuovo tema creato. Non si tratta di un Child-theme, ma di un vero e proprio tema a sè da cui si può partire per la personalizzazione. Si può tranquillamente cancellare la cartella del tema _strap dal proprio sito.

Manco a dirlo, il tema è velocissimo essendo così minimale.

Ti mostro in questa immagine l’analisi fatta con PageSpeed:

Da questa base sono partita per personalizzare il mio tema, facendo attenzione a non appesantirlo con troppi plugin e aggiunte inutili.

Nella prossima puntata del tutorial, spiegherò come ho proceduto per progettare il mio tema graficamente, e quali strumenti ho usato, per cui “stay tuned”!

Vai alla seconda puntata: Progettare la struttura di un tema WordPress

==> Vuoi invece usare un tema già fatto per WordPress? Scopri qui i miei consigli

E tu cosa ne pensi? Hai mai creato un tema per Worpress? Metti pure il link nei commenti, sarò curiosa di vederlo!