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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/** * Bootstrap row shortcode */ function bsrow_shortcode($atts, $content = null) { extract( shortcode_atts( array( 'classes' => '' ), $atts ) ); $open = "<div class='row $classes'>"; $close = "</div>"; return $open . do_shortcode($content) . $close; } /** * Bootstrap column shortcode */ function bscol_shortcode($atts, $content = null) { extract( shortcode_atts( array( 'type' => 'md', 'size' => '12', 'classes' => '' ), $atts ) ); $open = "<div class='col-$type-$size $classes'>"; $close = "</div>"; return $open . do_shortcode($content) . $close; } add_shortcode('bsrow', 'bsrow_shortcode'); add_shortcode('bscol', 'bscol_shortcode'); |
Con questi shortcode sarà possibile creare questo layout html
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="row"> <div class="col-md-4"> prezzo 1 </div> <div class="col-md-4"> prezzo 2 </div> <div class="col-md-4"> prezzo 3 </div> </div> |
nel vostro editor scrivendo
|
1 2 3 4 5 6 7 8 9 10 11 |
[bsrow] [bscols size="4"] prezzo 1 [/bscol] [bscols size="4"] prezzo 2 [/bscol] [bscols size="4"] prezzo 3 [/bscol] [/bsrow] |
prestate attenzione che in alcuni casi, per specifiche esigenze responsive, potremmo avere la necessità di attribuire più classi col-* allo stesso div, ad esempio:
|
1 2 3 4 |
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">...</div> <div class="col-xs-6 col-md-4">...</div> </div> |
in questo caso dovremo utilizzare l’attributo “classes” per gestire le classi aggiuntive
|
1 |
[bscol type="md" size="8" classes="col-xs-12 col-sm-6"] |