Layout del tema WordPress con griglia Bootstrap

Nel tutorial precedente abbiamo visto come creare un tema per WordPress utilizzando uno starter theme e il framework Bootstrap. In questo articolo vedremo come impostare efficacemente il layout utilizzando uno dei componenti più importanti di Bootstrap: la griglia.

La griglia di Bootstrap permette di suddividere la pagina fino a 12 colonne. Il valore 12 è impostato di default ma attraverso il configuratore possiamo suddividere la griglia in quante colonne desideriamo. La griglia è completamente responsive, con le colonne che si organizzano in base alle dimensioni dello schermo. Inoltre è possibile utilizzare una combinazione di attributi CSS per suddividere il layout con un numero diverso di colonne a seconda del dispositivo con il quale si visualizza il sito. Ad esempio su uno schermo più grande potrebbe essere più conveniente organizzare i contenuti in tre in colonne mentre con schermi più piccoli ne possiamo impostare due.

Bootstrap Grid

Il sistema della griglia dispone di quattro classi:

  • xs (smartphone)
  • sm (tablet)
  • md (desktop)
  • lg (desktop grandi)

Esempio struttura di base

<div class="container">
  <div class="row">
    <div class="col-md-12"></div>
  </div>
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>

L’elemento container specifica un contenitore con dimensioni impostate nel configuratore che racchiude tutti gli altri elementi. L’elemento .row definisce la riga dove inserire le colonne che compongono la griglia.

Vediamo adesso come impostare il layout del nostro tema. Apriamo il file header.php e inseriamo il .container subito dopo il tag di apertura del body.

<body <?php body_class(); ?>>
<!-- inseriamo l’elemento container -->
<div class="container">

Apriamo il file footer.php e chiudiamo il container prima del tag di chiusura del body. È utile inserire un commento in modo da ricordare quale elemento chiude il tag.

</div><!-- /container -->
</body>

In questo modo abbiamo definito il contenitore principale del layout come possiamo notare dall’immagine di seguito.

Container

Se volessimo mostrare qualche elemento a tutta pagina, come ad esempio header e footer, ma delimitando gli elementi al loro interno nel container, possiamo adottare una struttura come nell’esempio di seguito. Come vediamo non abbiamo racchiuso tutto il sito all’interno del container, ma abbiamo utilizzato la classe entro i blocchi principali.

<!DOCTYPE html>
<html>
<head>
<title>Il mio sito</title>
</head>
<body>
 <div class="site-content">
 <header>
  <div class="container">
   // elementi qui
  </div>
 </header>
 <main>
  <div class="container">
  	// elementi qui
  </div>
 </main>
 <footer>
  <div class="container">
   // elementi qui
  </div>
 </footer>
 </div>
</body>
</html>

Adesso passiamo alla suddivisione del layout nell’impostazione classica di un blog: contenuto centrale e sidebar laterale. Possiamo anche suddividere il layout in tre sezioni, basterà utilizzare tre colonne nella griglia.

Le modifiche andranno fatte in più file, prendiamo come esempio il file index.php e poi replicheremo tutte le operazioni sugli altri files. Cerchiamo questa stringa:

get_header(); ?>
<div id="primary" class="content-area">

Sostituiamola con:

get_header(); ?>
<div class="row">
<div id="primary" class="content-area col-md-9">

Come vedete ho semplicemente inserito una riga prima del corpo principale e a quest’ultimo ho aggiunto una classe .col-md-9 per suddividerlo in nove colonne. Ora dobbiamo chiudere la riga per cui cerchiamo la stringa:

<?php
get_sidebar();
get_footer();

E sostituiamola con:

<?php get_sidebar(); ?>
</div> <!-- /row -->
<?php get_footer();

L’operazione non è completa perché dobbiamo ancora lavorare sulla sidebar. Dato che al copro principale abbiamo assegnato nove colonne, per completare la griglia dobbiamo assegnare le restanti tre alla sidebar. Apriamo il file sidebar.php e cerchiamo questa stringa:

<aside id="secondary" class="widget-area" role="complementary">

E sostituiamola con:

<aside id="secondary" class="widget-area col-md-3" role="complementary">

Ora la griglia è completa. Le colonne collasseranno nei dispositivi inferiori ai desktop, vale a dire tablet e smartphone. Se vogliamo mantenere le colonne allineate anche sui tablet, invece della classe .col-md-* dobbiamo utilizzare .col-sm-*. Se invece vogliamo mostrare un numero diverso di colonne a seconda del dispositivo usato dobbiamo combinare le classi in questo modo:

<div class="row">
    <div class="col-md-9 col-sm-8"></div>
    <div class="col-md-3 col-sm-4"></div>
</div>

Le operazioni descritte per il file index.php vanno replicate nei seguenti files:

  • archive.php
  • single.php
  • page.php
  • search.php

Prima di editare il file page.php fatene una copia e salvatelo con un nome diverso, ad esempio template-full.php. Ci servirà in seguito per costruire una pagina senza sidebar, da usare magari per visualizzare la privacy o un modulo di contatto.

Ok, in questo tutorial abbiamo visto come impostare il layout principale del blog, ma la griglia di Bootstrap ci tornerà utile anche nei prossimi tutorial dove andremo a strutturare le pagine delle tassonomie e degli articoli.

[responsive_video url=”https://www.youtube.com/watch?v=75ynFZbr39U”]Creazione layout con la griglia di Bootstrap[/responsive_video]

Lascia un commento

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