Créer des colonnes dans vos articles avec un shortcode

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 '


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


'; 
} 

add_shortcode('one_half', 'cc_one_half');

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


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


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

Je créer dans mon shortcode 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 ;  }

 

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

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




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




';
}

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 meme taille.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.