Créez facilement un système de colonnes responsives par shortcode pour WordPress

Créez facilement un système de colonnes responsives par shortcode pour WordPress

Vous souhaitez donner un aspect plus ‘magazine’ à votre site sous WordPress, ou simplement mieux agencer son contenu ?
Nous allons voir comment mettre en place un système de colonnes en utilisant la grille responsive de Bootstrap, et pouvoir l’utiliser directement dans le contenu des pages grâce à des shortcodes.

La grille responsive de Bootstrap ?

Je vous en ai déjà parlé, c’est le système qui permet d’agencer le contenu par colonnes, en indiquant combien de colonnes sont affichées pour chaque type d’équipement : du smartphone avec un petit écran à la télévision 4K.

Le principe est simple à mettre en place dans du code HTML, mais c’est un peu moins évident avec le contenu à saisir dans WordPress. D’où l’intérêt de transformer ces balises en shortcodes.

Les shortcodes

Oui, les shortcodes, parce qu’ils sont au nombre de trois, pour coller aux différentes fonctionnalités proposées par la grille responsive de Bootstrap : la ligne, la colonne et… le clearfix.

La ligne

La ligne, ici [row] permet de regrouper des colonnes, quelle que soit leur taille.

Voilà le code :

function bootstrapRow($attributes, $content) {
	extract(shortcode_atts(array(
	"classes" => null,
	"element" => "div"
	), $attributes));
	$result = "<$element class=\"row";
	if ($classes) $result .= " $classes";
	$result .= "\">" . do_shortcode($content) . "</$element>";
	return $result;
}
add_shortcode("row", "bootstrapRow");

La colonne responsive

Le shortcode [col] crée la colonne, en indiquant sa taille pour chaque type de résolution si c’est nécessaire.

Il permet aussi de créer un offset, c’est-à-dire un espace vide pour décaler les véritables colonnes, en indiquant, ici aussi, quelles résolutions sont impactées.

function bootstrapColumn($attributes, $content) {
	extract(shortcode_atts(array(
	"all" => null,
	"xs" => null,
	"sm" => null,
	"md" => null,
	"lg" => null,
	"offsetall" => null,
	"offsetxs" => null,
	"offsetsm" => null,
	"offsetmd" => null,
	"offsetlg" => null,
	"classes" => null,
	"element" => "div"
	), $attributes));
	$result = "<$element class=\"";
	if ($all) {
		$result .= "col-xs-$all col-sm-$all col-md-$all col-lg-$all";
	} else {
		if ($xs) $result .= " col-xs-$xs";
		if ($sm) $result .= " col-sm-$sm";
		if ($md) $result .= " col-md-$md";
		if ($lg) $result .= " col-lg-$lg";
	}
	if ($offsetall) {
		$result .= " col-xs-offset-$offsetall col-sm-offset-$offsetall col-md-offset-$offsetall col-lg-offset-$offsetall";
	} else {
		if ($offsetxs) $result .= " col-xs-offset-$offsetxs";
		if ($offsetsm) $result .= " col-sm-offset-$offsetsm";
		if ($offsetmd) $result .= " col-md-offset-$offsetmd";
		if ($offsetlg) $result .= " col-lg-offset-$offsetlg";
	}
	if ($classes) $result .= " $classes";
	$result .= "\">" . do_shortcode($content) . "</$element>";
	return $result;
}
add_shortcode("col", "bootstrapColumn");

Le clearfix

Le shortcode [clearfix] permet de recaler tout à gauche les colonnes dont une colonne de la ligne du dessus est trop grande.

function bootstrapClearfix($attributes, $content) {
	extract(shortcode_atts(array(
	"xs" => null,
	"sm" => null,
	"md" => null,
	"lg" => null,
	"classes" => null,
	"element" => "div"
	), $attributes));
	$result = "<$element class=\"clearfix";
	if ($xs) $result .= " visible-xs";
	if ($sm) $result .= " visible-sm";
	if ($md) $result .= " visible-md";
	if ($lg) $result .= " visible-lg";
	if ($classes) $result .= " $classes";
	$result .= "\">" . do_shortcode($content) . "</$element>";
	return $result;
}
add_shortcode("clearfix", "bootstrapClearfix");

Exemples d’utilisation

Deux colonnes, quelle que soit la résolution

[row][col all="6"]Colonne de gauche
Ceci est le contenu[/col][col all="6"]Colonne de droite
Ceci est le contenu[/col][/row]

Pour rappel, la largeur totale vaut douze colonnes.

Notez qu’il est préférable, comme d’habitude avec les shortcodes, de ne pas insérer de saut de ligne entre le contenu et le shortcode (ici, entre [col all="6"] et Colonne de gauche).

Deux colonnes sur ordinateur, une seule sur smartphone et tablette

[row][col xs="12" md="6"]Colonne de gauche
Ceci est le contenu[/col][col xs="12" md="6"]Colonne de droite
Ceci est le contenu[/col][/row]

Trois colonnes sur ordinateur, deux + une centrée sur les autres équipements

[row][col xs="6" md="4"]Première colonne
Ceci est le contenu[/col][col xs="6" md="4"]Deuxième colonne
Ceci est le contenu[/col][col xs="6" md="4" offset-xs="3" offset-md="0"]Troisième colonne
Ceci est le contenu[/col][/row]

Les colonnes destinées à un ordinateur font 4 unités de large (4 + 4 + 4 = 12).

La troisième colonne qui fait 6 unités passe automatiquement à la ligne, mais nécessite d’être décalée de 3 unités pour être centrée (3 + 6 + 3).

L’offset à 0 est nécessaire pour l’affichage sur les ordinateurs.

Deux colonnes sur ordinateur, une seule sur smartphone et tablette, avec résolution du problème de hauteur

[row][col xs="12" md="6"]Colonne de gauche
Première ligne
Avec plus de contenu que les autres lignes
Et donc plus haute[/col][col xs="12" md="6"]Colonne de droite
Première ligne[/col][clearfix md="1"][col xs="12" md="6"]Colonne de gauche
Deuxième ligne
Sans clearfix, cette cellule se trouverait sous la cellule de droite, 
calée sur le bord qui dépasse de la cellule de gauche de la ligne précédente.[/col][/row]

Ici, la valeur importe peu, il s’agit d’activer le [clearfix] pour la résolution md (et supérieures).

Le mot de la fin

Ces shortcodes peuvent sembler un peu verbeux. En fait ils le sont. Mais c’est tout de même plus pratique que de les écrire directement dans l’éditeur HTML.

Enfin, une astuce : si vous avez besoin d’imbriquer des colonnes dans des colonnes, ce n’est pas possible en l’état, il s’agit d’une limitation des shortcodes de WordPress.
Il existe tout de même une astuce, qui pourrait même vous aider pour la lisibilité : dupliquer les shortcodes, avec un nom différent, mais en pointant toujours sur la même fonction :

add_shortcode("row2", "bootstrapRow");


L'illustration de cet article est une image sous licence CC BY-SA 2.0 par Gr1st

Cet article vous a été utile ? Partage it !

2 réflexions au sujet de « Créez facilement un système de colonnes responsives par shortcode pour WordPress »

  1. Salut !
    Je découvre le blog ainsi que cet article, sans doute un peu tardivement. Je me demande juste à quoi tiend la limitation interdisant l’ajout de colonnes aux colonnes ? Ne suffit-il pas d’inclure une ligne Bootstrap dans la colonne pour y insérer les sous-colonnes ?

    J’utilise moi-même fréquemment les shortcodes WordPress pour créer des layout internes aux pages, mais je fais cela avec Compass et son module Breakpoint, ce qui présente l’avantage de ne pas avoir à charger de CSS externe comme Bootstrap pour bénéficier d’un layout responsive 😉

    Bien sûr, le travail d’assignation des classes se rapportant au layout reste à faire au niveau du préprocesseur CSS contrairement à Boostrap qui est prêt à l’emploi …

    Enfin, je trouve l’exemple final de shortcodes assez parlant et franchement peu verbeux. Le nombre de variables passées au callback n’étant pas limité, les options possibles peuvent engendrer un code parfois bien plus lourd.

    En revanche, je pense qu’on peut gagner en visibilité dans l’éditeur en imbriquant (en empilant) les shortcodes, et en prenant juste soin de filtrer le contenu, en « hookant » (oui je sais un peu limite l’anglicisme là) sur « the_content » (au niveau du fichier functions.php ou d’un plugin global fournissant tous les shortcodes du site) pour éviter les sauts de ligne et fin de paragraphes intempestifs :

    function my_shortcode_remove_breaklines( $content ){
    $transpose = array(
    ‘[‘ =>  »,
    ‘]’ =>  »,
    ’]’=>  »
    );
    return strtr( $content, $transpose );
    }
    add_filter( ‘the_content’, ‘my_shortcode_remove_breaklines’ );

    Bon en tout cas, l’article est très bien détaillé, bravo !

    Sébastien

    1. Bonjour Sébastien,
      Désolé pour le délai de réponse, ton commentaire était tombé dans les quelques spams.

      J’utilise aussi un préprocesseur CSS pour gérer les break points quand je n’utilise pas Bootstrap.
      Et quand je dois l’utiliser, je l’optimise en supprimant les fonctionnalités que je n’utilise pas : http://www.partage-it.com/utilisation-optimisation-bootstrap-wordpress-less/

      Ta méthode pour rendre l’utilisation des shortcodes plus lisibles est intéressante, merci 🙂

      Enfin, à propos des shortcodes imbriqués, voilà la page du codex qui explique tout : https://codex.wordpress.org/Shortcode_API#Nested_Shortcodes

      David

Laisser un commentaire

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

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.