Creare un tema WordPress personalizzato con _s e Bootstrap

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.

 

Anteprima dati css 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.

 

Risultato installazione _s

 

 

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:

PageSpeed risultati

 

 

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!

 

 

Creare un tema WordPress personalizzato con _s e Bootstrap
4.7 (93.33%) 3 votes
6 commenti
  1. Raptor
    Raptor dice:

    beh che dire cercando e ricercando qualcosa ho trovato,mi spiego io sono uno a cui piace metter mano d’appertutto (suona male) intendo in ambito informatico,anni fa mi studiai l’html,e da sempre ho pasticciato con tutto cio fosse di tecnologico,ora xo volevo provarmi a fare un blog tutto mio (sulla mia 3 grande passione ovvero le auto modificate) cosi mi son detto ne faccio uno da 0 scrivendomi da me il codice,ed ho provato sia wp che joomla,in entrambi qualcosa ho combinato,ma ,,,mi trovo in un vicolo cieco,mi piace molto bootstrap (qualcosa lo conosco) e volevo integrarlo in wp ma non sapevo come fare (joomla son riuscito a farlo andare) e che joomla lo trovo “dispersivo” vuoi che io sono alle prime armi,vuoi che non ci siano tantissime guide rispetto wp in giro,sta di fatto mi sono imbattuto nella tua guida proprio ora che stavo (dopo un mese che leggo codici sopra codici) per demoralizzarmi,spero leggerai e magari che ne so potresti aiutrami u.u by Roby

    Rispondi
    • Elisa Bertoldi
      Elisa Bertoldi dice:

      Ciao Raptor,
      mi fa piacere se la mia guida ti è d’aiuto.
      Anch’io ho girato un bel po’ prima di trovare qualcosa per integrare bootstrap in in tema WordPress, comunque ti consiglio di studiarti bene i temi di base già forniti con WordPRess, ed il Codex di WordPress, così da capire bene la struttura delle pagine.
      Se vuoi contattami pure e sarò lieta di aiutarti.

      Rispondi
      • Raptor
        Raptor dice:

        beh che dire in sto periodo mi son dato molto da fare,mi son studiato un pò di html5/css php e derivati vari…e mi ero creato un pò di cosette tanto per imparare purtroppo sul mio linux ho messo mano (manacce mie) dove non dovevo xD ed ho perso tutto mo xo che ho le basi mi rimetterò al lavoro,ho voluto impararmi un pò di cose x almeno sapermi muovere comunque ti ringrazio della tua disponibiltà ,sto pensando di farmi un corso …

        Rispondi

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.