Colonne dinamiche – Riccardo Fabiani (BLOG)

Shortcode wordpress per creare colonne dinamiche “in base 12”.

functions.php

# RIK - COLONNE 12
        function rik_col12_func($atts, $content="") {
            extract(shortcode_atts(array(
                  'style' =&gt; '',
                  'class' =&gt; '',
                  'w' =&gt; '', # DA 1 a 12
                  'id' =&gt; '',
             ), $atts));
            
#            if(!$sfondo){$sfondo = " ";}
            if(!$style){$style = " ";}
            if(!$class){$class = " ";}
            if(!$id){$id = " ";}
            
            
            
            $styledefault = ' ';
            
            if(!$w){ 
                $w = ' width:100%; ';
                $styledefault = ' float:none; ';
            }else{
                $calcola = ($w*100)/12;
                $w = ' width:'.$calcola.'%; ';
                $styledefault = ' float:left; ';
            }
            
            
            return     '
                    &lt;div id="'.$id.'"  class=" col12 '.$class.'" style=" '.$w.' '.$styledefault.' '.$style.' "&gt;
                        '.do_shortcode($content).'
                    &lt;/div&gt;
                    ';
        }
        add_shortcode( 'col12', 'rik_col12_func' );
        # es: [ col12 w="4" ][ /col12 ]

# RIK - COLONNE 12

function rik_col12_func($atts, $content="") {

extract(shortcode_atts(array(

'style' => '',

'class' => '',

'w' => '', # DA 1 a 12

'id' => '',

), $atts));

# if(!$sfondo){$sfondo = " ";}

if(!$style){$style = " ";}

if(!$class){$class = " ";}

if(!$id){$id = " ";}

$styledefault = ' ';

if(!$w){

$w = ' width:100%; ';

$styledefault = ' float:none; ';

}else{

$calcola = ($w*100)/12;

$w = ' width:'.$calcola.'%; ';

$styledefault = ' float:left; ';

}

return '

'.do_shortcode($content).'

</div>

}

add_shortcode( 'col12', 'rik_col12_func' );

# es: [ col12 w="4" ][ /col12 ]

css

/* RIK SHORTCODE COLL12*/
.col12{}
@media screen and (max-width: 900px) {
    .col12{ width:100% !important;}
}

/* RIK SHORTCODE COLL12*/

.col12{}

@media screen and (max-width: 900px) {

.col12{ width:100% !important;}

}

fonte: okbackup