Per chi non conoscesse Twitter Bootstrap, si tratta del più famoso frontend framework responsive per lo sviluppo di siti e applicazioni per il web. Molti temi di WordPress utilizzano questo framework come base di partenza per il proprio design. In questo breve articolo voglio spiegare come usare dei semplici shortcodes per organizzare il layout del proprio articolo usando il grid system di Bootstrap. Con Bootstrap possiamo appunto organizzare i nostri contenuti in righe e colonne e per i dettagli su questo argomento vi rimando alla documentazione ufficiale. Per utilizzare questa “griglia” nei nostri articoli necessitiamo di 2 shortcodes, bsrow per le righe e bscol per le colonne. Le righe non necessitano di parametri, però potremmo avere la necessità di aggiungere delle classi CSS aggiuntive, quindi lo shortcode bsrow accetterà un parametro “classes”. Le colonne invece possono essere di vario tipo (md, xs, sd…) e di diversa grandezza (2,3,6,12 etc.). Per questo motivo bscol accetterà 3 parametri, ovvero “type”, “size” e sempre “classes” per eventuali classi css aggiuntive. Di seguito il codice da aggiungere al file functions.php del vostro tema:

Con questi shortcode sarà possibile creare questo layout html

nel vostro editor scrivendo

prestate attenzione che in alcuni casi, per specifiche esigenze responsive, potremmo avere la necessità di attribuire più classi col-* allo stesso div, ad esempio:

in questo caso dovremo utilizzare l’attributo “classes” per gestire le classi aggiuntive

 

 

Leave a Reply