Créer des colonnes dans vos articles avec un shortcode

Diviser son contenu en deux colonnes grâce aux shortcodes

Aujourd’hui on va voir une fonction hyper pratique, notamment pour créer des colonnes dans son contenu:

Voici un exemple de shortcode:

function cc_one_half( $atts, $content = null ) { 
	return '


</p>
<div class="one_half">' . do_shortcode($content) . '</div>
<p>


'; 
} 

add_shortcode('one_half', 'cc_one_half');

function cc_one_half_last( $atts, $content = null ) { 
		return '


</p>
<div class="one_half last">' . do_shortcode($content) . '</div>
<p>


'; 
} 
add_shortcode('one_half_last', 'cc_one_half_last');

Je créer deux fonctions d’ouverture et fermeture: ‘one_half’, et ‘one_half_last’.Maintenant lorsque l’utilisateur insérera du contenu entre [one_half]…[/one_half] et [one_half_last]…[/one_half_last] cela va automatiquement encapsuler votre contenu dans des bloc dont la largeur est définie dans le css. Voici un exemple simple:

.one_half { float:left; max-width:490px; }
 .one_half.last { float:left; margin-left:50px ;  }

Aller au plus simple en créant un seul shortcode

Autrement on peut faire encore plus simple: en créant des blocs de même largeur, on a besoin d’un seul shortcode: Ici j’utilise du bootstrap

function ravel_one_half($atts, $content = null) {
    return '




</p>
<div class="col-lg-4 col-xs-12">' . do_shortcode($content) . '</div>
<p>




';
}

add_shortcode('one_half', 'ravel_one_half');

Profitant des classes bootstrap, maintenant il suffit d’entourer son contenu des shortcodes [one_half] ..[/one_half] pour avoir des blocs alignés et de même taille.