statistiche siti

Come utilizzare Bootstrap su WordPress: template ed integrazioni

bootstrap wordpress

Generalmente quessta domanda viene posta da coloro che hanno intenzione di creare un sito in wordpress e dunque hanno bisogno di sapere come integrare Bootstrap su WordPress.

Bootstrap, come probabilmente saprai, è un framework ideato dal team di sviluppo di Twitter. Si tratta di un pacchetto (una cartella) che puoi scaricare gratuitamente dal sito ufficiale getbootstrap.com
Al suo interno ci sono dei file importanti che ti consentono di sviluppare il layout di una pagina, semplicemente seguendo le loro linee guida.

Bootstrap è formato da file in formato CSS che danno un volto grafico agli elementi che comporranno la pagina su cui vuoi lavorare e file in formato .js che ti consentiranno di far in modo che degli elementi seguano delle azioni. In quest’ultimo caso prendo l’esempio di una slider con delle foto che tramite delle freccette laterali possono cambiare.

Ci sono diversi modi per integrare Bootstrap dentro WordPress. In questo articolo ti mostrerò le vie più comuni per creare un template bootstrap od in generale di integrare alcuni elementi di Bootstrap dentro il tuo sito che ha già un tema.

Bootstrap themes per WordPress

Uno dei metodi più utilizzati da chi in genere si occupa di costruire un sito web è quello di scaricare ed installare un tema bootstrap. Ce ne sono diversi e più o meno fanno tutti la stessa cosa, cioè quella di creare dei template di pagine ed archivi che di base hanno già uno stile, poi sta a te decidere se cambiare i colori ad esempio de menu, dei bottoni o dei link.

Uno dei temi bootstrap più scaricati ed utilizzati è WP Bootstrap Starter che allo stato attuale utilizza l’ultima versione Bootstrap 4. All’interno sono disponibili diversi layout come la pagina con la sidebar a destra o sinistra, le pagine full width con o senza contenitore. È compatibile con i maggiori plugin quali WooCommerce, Elementor e Visual Composer.

Quindi ti basterà installare un tema Bootstrap per accedere a tutti i componenti che di base trovi su Bootstrap.

Plugin Bootstrap

Questo metodo è valido per coloro che hanno già un sito web con tema ben preciso ed hanno bisogno di integrare bootstrap per utilizzare tutte le sue componenti.

Per esempio hai la necessità di creare una landing page e non hai intenzione di installare uno di quei plugin in stile Page Builder come ad esempio Visual Composer e compagnia bella.

Uno di questi plugin per Bootstrap che puoi installare sul tuo blog si chiama Easy Bootstrap Shortcode. Considera però che allo stato attuale questo plugin, ed anche altri, sono ancora fermi alla versione precedente di Bootstrap (versione 3) che varia sotto diversi aspetti.

Il plugin ti permette di inserire degli elementi come gli accordion, le colonne, i bottoni, le slider, ecc tramite degli shortcode molto semplici da utilizzare.

Integrare Bootstrap in un tema WordPress

Questo è sicuramente il metodo più “difficile” per coloro che non hanno mai creato un tema WordPress, ma è abbastanza semplice per chi ha già avuto modo di sviluppare dei temi partendo da zero.

Il metodo più pulito per richiamare dei file .js o .css all’interno di WordPress è quello di utilizzare la funzione wp_enqueue_scripts creando un gancio, te lo mostrerò nel dettaglio qualche riga più giù.

Utilizzando Bootstrap, oltre ad inserire il foglio di stile, ci sono 3 file .js che devi inserire secondo un ordine ben preciso per far sì che tutto funzioni correttamente:

  • jquery o jquery-slim
  • popper
  • bootstrap

Puoi scegliere se scaricare questi file ed inserirli all’interno del tuo server, oppure se utilizzare i file che linkati su bootstrap.

Generalmente i temi richiamano sempre il file jquery che si trova di default all’interno della piattaforma wordpress. Puoi decidere di utilizzare una versione più “slim” del file jquery, dovendo prima però deregistrare il jquery originale.

Il seguente script in PHP va inserito dentro il tema che stai utilizzando. Per farti un classico esempio, puoi aggiungerlo alla fine del file functions.php . Se hai realizzato tu il tema, sicuramente saprai tu dove andarlo ad incollare:

add_action( 'wp_enqueue_scripts', 'script_custom', 10 );
function script_custom() {
    
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery-slim', "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js", '', '', true );
    wp_enqueue_script( 'jquery-slim' );
    
    wp_register_script( 'popper',  'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', '', '', true );
    wp_enqueue_script( 'popper' );
    
    wp_register_script( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js', '', '', true );
    wp_enqueue_script( 'bootstrap' );
    
}

Dunque nella prima parte stiamo deregistrando il vecchio jquery e lo stiamo rimpiazzando con la registrazione dello script di jquery-slim. Nella seconda parte registriamo e “mettiamo in coda” cioè richiamiamo lo script “popper” e la stessa cosa la facciamo con la terza parte con il file bootstrap.

Alla fine di ogni funzione wp_register_script avrai notato la scritta “true”. Significa che questi script verranno posizionati in fondo alla pagina, se invece lo sostituiamo con “false”, gli script di Bootstrap verranno posizionati ad inizio pagina dentro il tag <head>.

Non dimentichiamoci di includere anche il foglio di stile in questo modo:

add_action( 'wp_enqueue_scripts', 'custom_style' );
function custom_style() {
    wp_enqueue_style( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css' );
}

In questo modo abbiamo caricato tutto lo stresso necessario affinchè bootstrap possa essere integrato su wordpress.

Lascia un commento

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