Installazione starter theme con framework Bootstrap

Questo è il primo di una serie di articoli nei quali vedremo come creare un tema per WordPress da zero. Per il nostro progetto useremo uno starter theme e il famosissimo framework Bootstrap. Potremmo anche partire da una pagina bianca, ma per ottimizzare i tempi è preferibile (a mio avviso) utilizzare il tema di base sviluppato dalla stessa Automatic, la società proprietaria di WordPress. Lo starter theme che utilizzeremo si chiama Underscores, costantemente aggiornato dal team di WordPress.

Underscores è veramente povero di personalizzazioni, sia per quanto riguarda la struttura HTML sia per lo stile CSS. Per non parlare di JavaScript… In ogni modo è un’ottima base di partenza perché fornisce l’assetto completo di un tema WordPress con una discreta gestione della gerarchia dei files. Utilizzeremo come detto Bootstrap , il framework più utilizzato dagli sviluppatori che permette di creare interfacce moderne ed estremamente funzionali.

La prima operazione da fare è collegarsi a underscores.me e dare un nome al nostro tema. Inseriamo la denominazione nel campo di testo e clicchiamo su generate.

In questo tutorial useremo il termine webfool per la denominazione del tema. Il sistema genererà un archivio che dovremmo scompattare all’interno della cartella themes, contenuta all’interno della macro-cartella wp-content. Come vediamo dall’immagine allegato, all’interno della directory themes abbiamo ora una nuova cartella denominata webfool che contiene tutti i files su cui dovremmo lavorare.

Installazione tema WordPress

Se state lavorando su Linux, dobbiamo attribuire la proprietà della cartella al server, aprendo il terminale (assumendo come posizione di partenza quella visualizzata nell’immagine) e digitando questo comando:

sudo chown -R www-data:www-data webfool

Assicuriamoci anche i permessi di lettura e scrittura digitando questa ulteriore istruzione:

sudo chmod -R 0777 webfool

A questo punto possiamo entrare all’interno del pannello di amministrazione, selezionare Aspetto → Temi e attivare il tema WebFool. Tornati nel frontend avremo di fronte una tema veramente brutto seppure con qualche formattazione di stile. Apriamo il file style.css e cancelliamo tutte le dichiarazioni, lasciando solo i commenti iniziali. I commenti vanno mantenuti perché servono a WordPress per gestire correttamente il tema.

Configurazione e installazione Bootstrap

Adesso scarichiamo Bootstrap collegandoci a questo indirizzo dove possiamo includere tutti i componenti che ci servono ed escludere quelli che non rientrano nel nostro progetto. Possiamo tornare sui nostri passi in qualsiasi momento, grazie ad un file di configurazione che contiene tutte le impostazioni selezionate. Per il momento lasciamo tutto abilitato e clicchiamo sul pulsante finale, Compile and Download.

Scarichiamo l’archivio generato dal sistema e salviamolo all’interno della cartella del nostro starter theme. Una volta scompattato l’archivio ci troveremo di fronte una directory chiamata bootstrap nella quale sono contenute ulteriori tre cartelle: css, fonts e JS, oltre al file di configurazione in json.

A questo punto dobbiamo includere Bootstrap all’interno del tema. Apriamo il file functions.php e diamo un’occhiata alle dichiarazioni in PHP contenute al suo interno. Noteremo una funzione utilizzata più volte, add action che permette d’inserire istruzioni personalizzate all’interno di specifici punti nevralgici di WordPress, denominati hooks (ganci).

Il gancio nel quale iniettare CSS e Javascript è wp_enqueue_scripts, per tanto cerchiamo la stringa:

add_action('wp_enqueue_scripts', 'webfool_scripts');

Il secondo parametro rappresenta la funzione che si aggancia all’hook, in questo caso webfool_scripts. Dobbiamo andare a lavorare all’interno di questa funzione. Cominciamo includendo il foglio di stile di Boostap, attraverso questa semplice dichiarazione:

wp_enqueue_style('boot-main', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');

La funzione di WP wp_enqueue_style permette di attivare un nuovo foglio di stile che avrà l’identificativo specificato nel primo parametro (handle). Il secondo parametro rappresenta il percorso del file. Per creare il path ho utilizzato la funzione get_template_directory_uri() che restituisce il percorso assoluto del tema attivo. Nel caso stessimo utilizzando un child theme dovremmo utilizzare la funzione get stylesheet directory(), ma non è questo il caso.

Ora dobbiamo includere il JavaScript operando sempre all’interno della stessa funzione. Considerando che gli script di Bootstrap sono dipendenti da jQuery dovremmo essere certi d’includerli dopo la libreria principale. Personalmente ho anche fatto un ulteriore operazione cioè spostare jQuery dall’header al footer, in modo da dare la priorità ai contenuti durante il caricamento.

Visto che jQuery è utilizzato anche all’interno del pannello di amministrazione ci potrebbero essere dei problemi, per cui dobbiamo specificare un’eccezione, applicando la modifica solo nel frontend:

if(!is_admin())
{
 // elimino jQuery
 wp_deregister_script('jquery');
 // registro nuovamente jQuery
 wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), array(), false, true);
 // includo nuovamente jQuery, ma questa volta nel footer
 wp_enqueue_script('jquery');
 // includo gli scripts di Bootstrap
 wp_register_script('boot-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', 'jquery', false, true);
 wp_enqueue_script('boot-script');
}

Le operazioni compiute all’interno del blocco condizionale sono facilmente intuibili attraverso la lettura dei commenti. Soffermiamoci solamente sulla funzione wp_register_script. Il primo parametro definisce l’handle cioè l’identificativo del file, il secondo parametro ne fornisce il percorso, il terzo parametro specifica una dipendenza. Come vediamo. quando ho utilizzato la funzione la seconda volta, ho specificato l’handle di jQuery, in questo modo WordPress includerà lo script solo dopo il caricamento della sua dipendenza. Il quarto parametro stabilisce la versione dello script mentre il quinto, impostato su true, include il file nel footer.

Ora dobbiamo includere lo stile del tema utilizzando la funzione wp_enqueue_style()

wp_enqueue_style( 'webfool-style', get_stylesheet_uri());

Al termine di queste operazioni, la funzione dovrebbe presentarsi più o meno così:

function webfool_scripts()
{
 wp_enqueue_style('boot-main', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
 if(!is_admin())
 {
  // elimino jQuery
  wp_deregister_script('jquery');
  // registro nuovamente jQuery
  wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), array(), false, true);
  // includo nuovamente jQuery, ma questa volta nel footer
  wp_enqueue_script('jquery');
  // includo gli scripts di Bootstrap
  wp_register_script('boot-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', 'jquery', false, true);
  wp_enqueue_script('boot-script');
 }
 wp_enqueue_style( 'webfool-style', get_stylesheet_uri() );
 wp_enqueue_script( 'webfool-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
 wp_enqueue_script( 'webfool-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
 if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 wp_enqueue_script( 'comment-reply' );
 }
}

Torniamo sul frontend e vediamo se abbiamo operato correttamente. Le modifiche dovrebbero essere già visibili ad occhio nudo ma un’ispezione con Firebug, ricercando gli handle specificati nella funzione precedente, chiariranno ogni dubbio.

Ok, abbiamo fatto il primo passo per la costruzione del nostro tema. Nel capitolo successivo vedremo come strutturare il layout del tema attraverso la griglia di Bootstrap.

[responsive_video url=”https://www.youtube.com/watch?v=ut3n5MZeoAY”]Guarda il videotutorial[/responsive_video]

Lascia un commento

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