Impostare il layout del tema con la griglia di Bootstrap

Griglia di Bootstrap

Nella guida precedente abbiamo visto come includere i files del framework Bootstrap nel nostro starter theme per WordPress. Dando un’occhiata al front-end, il risultato non è proprio incoraggiante…. Ovvio, abbiamo incluso il framework ma non abbiamo ancora toccato il telaio del tema.

Dobbiamo assegnare le classi di Bootstrap ai vari elementi che compongono il nostro tema. Direi di cominciare dal layout principale.

Come sempre io non ho molta fantasia, per cui procedo con un layout classico: blocco centrale + sidebar a destra. Ho già parlato della griglia di Bootstrap in un articolo precedente, per cui con tutte queste informazioni sarete in grado d’impostare il layout più adatto alle vostre esigenze.

Ma bando alle ciance, vediamo come adattare la griglia di Bootstrap al tema per WordPress.

Modifiche al file header.php

Apriamo il file “header.php” e subito dopo il tag di apertura del body, inseriamo un div. A tale elemento dobbiamo assegnare la classe “container”, selettore che Bootstrap identifica come contenitore principale del layout.

Modifiche al file footer.php

Ora apriamo il file “footer.php” e chiudiamo il div, subito prima del tag di chiusura del body. Mettiamo anche un commento, così ci ricorderemo quale elemento chiude il tag.

Con questa operazione abbiamo definito il contenuto principale del blog, entro dei limiti di larghezza precisi. Come ricordo, possiamo sempre cambiare questi valori, caricando il file di configurazione nel compilatore di Bootstrap, fare le modifiche e scaricare la versione aggiornata.

Modifiche files index, archive, single, page e search

Prossimo step: dividere il layout del sito in due colonne, una per il contenuto principale e la seconda per la sidebar.

Apriamo il file “index.php” e subito dopo la stringa che include l’header dobbiamo aggiungere un div con classe “row”. Nella riga successiva abbiamo il div con id “primary”. Bene, nell’attributo “class” dobbiamo aggiungere la classe di Bootstrap riservata alle colonne che compongono la griglia.

Per questo tutorial io ho scelto di assegnare 8 colonne al corpo centrale e 4 colonne alla sidebar, per cui all’attributo class del div primary aggiungo la classe “col-md-8”.

Il risultato che dovete ottenere è il seguente:

Spostiamoci alla fine del file e completiamo l’operazione chiudendo il div con classe “row”. In parole povere cercare questo:

E sostituite il tutto con questo codice:

Queste operazioni descritte per il file “index.php” vanno ripetute per i seguenti files:

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

Modifiche file sidebar.php

Adesso dobbiamo completare la griglia, lavorando sul file “sidebar.php”. Qui c’è molto poco da fare, dobbiamo semplicemente assegnare 4 colonne all’elemento, per cui cerchiamo questa stringa:

E sostituiamola con:

Perfetto, abbiamo completato il layout principale del sito. Ricordiamoci come funziona la griglia di Bootstrap perché possiamo utilizzarla in altri elementi del blog, come ad esempio una galleria, un portfolio, articoli correlati, etc.

Creare un tema per WordPress – Layout principale

Lascia un commento...è gratis...

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