Personnaliser la galerie de WordPress

Personnaliser la galerie de WordPress

La galerie de WordPress est très bien en l’état. Elle est claire et simple.

Vous pouvez toutefois la personnaliser. Voici comment.

La galerie de WordPress ?

La galerie de WordPress permet d’ajouter une série d’images et de configurer l’affichage, comme le nombre de colonnes et la taille des images, le tout graphiquement.

Pour cela, il suffit de cliquer sur Ajouter un média, Créer une galerie, sélectionner les images et de suivre les instructions.

Aussi, depuis peu la galerie est visible directement dans l’éditeur, mais au final, en édition en mode texte, il s’agit d’un shortcode, sous cette forme :

[ gallery columns="6" ids="9,10,11,12,13,14" ]

Un peu de code

Voyons comment modifier la galerie par défaut, pour changer son apparence.

Tout se passe, comme d’habitude, dans le fichier functions.php de votre thème enfant en déclarant un nouveau filtre pour post_gallery.

Les options des galeries

Cette partie là est presque obligatoire. Elle est copiée de la fonction de galerie de WordPress et permet de récupérer et d’interpréter les options définies dans l’interface graphique.

function customGalleryOutput($output = "", $attr) {
	// This part is globally copied from the WordPress gallery function
	$return = $output; // fallback
	$post = get_post();

	if ( ! empty( $attr['ids'] ) ) {
		// 'ids' is explicitly ordered, unless you specify otherwise.
		if ( empty( $attr['orderby'] ) )
			$attr['orderby'] = 'post__in';
		$attr['include'] = $attr['ids'];
	}

	// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
	if ( isset( $attr['orderby'] ) ) {
		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
		if ( !$attr['orderby'] )
			unset( $attr['orderby'] );
	}

	extract(shortcode_atts(array(
		'order'      => 'ASC',
		'orderby'    => 'menu_order ID',
		'id'         => $post ? $post->ID : 0,
		//'itemtag'    => $html5 ? 'figure'     : 'dl',
		//'icontag'    => $html5 ? 'div'        : 'dt',
		//'captiontag' => $html5 ? 'figcaption' : 'dd',
		//'columns'    => 3,
		'size'       => 'thumbnail',
		'include'    => '',
		'exclude'    => '',
		//'link'       => '',
		// This parameter is added to keep the default behaviour:
		'usedefault' => 0
	), $attr, 'gallery'));

	if ($usedefault) return $output;

	$id = intval($id);
	if ( 'RAND' == $order )
		$orderby = 'none';

	if ( !empty($include) ) {
		$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

		$attachments = array();
		foreach ( $_attachments as $key => $val ) {
			$attachments[$val->ID] = $_attachments[$key];
		}
	} elseif ( !empty($exclude) ) {
		$attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
	} else {
		$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
	}

	if (empty($attachments))
		return '';

D’ailleurs toutes les options ne sont pas utiles ici, par exemple le nombre de colonnes, itemtag, … Elles sont utiles à la version par défaut de la galerie, mais vous pouvez choisir de ne pas toutes les utiliser.

Vous pouvez aussi en ajouter. D’ailleurs c’est ce que j’ai fait, nous y reviendrons.

La partie intéressante

C’est à cet endroit que vous pouvez ajouter vos personnalisations.

	$return = '<div class="row">';

	foreach ($attachments as $attachment) {
		$return .= '<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">';
		$return .= wp_get_attachment_image($attachment->ID, $size);
		$return .= '</div>';
	}

	$return .= '</div>';
	$return .= '<div class="clearfix"></div>';

Ici, chaque entrée dans le tableau des images sélectionnées dans le code précédent est affichée dans une grille responsive de Bootstrap, dans la taille demandée dans l’éditeur de galerie.

Et pour choisir de conserver le comportement par défaut ?

En guise de cerise sur le gâteau, voyons comment ajouter un nouveau paramètre permettant d’activer le changement d’apparence de la galerie directement dans le shortcode.

Vous l’aviez peut-être remarqué, le nouveau paramètre de shortcode :

	extract(shortcode_atts(array(
		'order'      => 'ASC',
		'orderby'    => 'menu_order ID',
		'id'         => $post ? $post->ID : 0,
		//'itemtag'    => $html5 ? 'figure'     : 'dl',
		//'icontag'    => $html5 ? 'div'        : 'dt',
		//'captiontag' => $html5 ? 'figcaption' : 'dd',
		//'columns'    => 3,
		'size'       => 'thumbnail',
		'include'    => '',
		'exclude'    => '',
		//'link'       => '',
		// This parameter is added to keep the default behaviour:
		'usedefault' => 0
	), $attr, 'gallery'));

	if ($usedefault) return $output;

Il est utilisable comme ceci :

[ gallery columns="6" ids="9,10,11,12,13,14" usedefault="1"]

Si usedefault vaut 0, votre galerie sera affichée sur la page de votre site, sinon ce sera la galerie par défaut de WordPress qui s’affichera.

Par défaut, usedefault est défini à 0, c’est-à-dire que si le paramètre usedefault n’est pas fourni au shortcode, c’est votre galerie qui sera affichée. Vous pouvez faire l’inverse en changeant la valeur par défaut :

'usedefault' => 1

Le mot de la fin

Vous avez certainement noté que l’apparence de la galerie ne change pas dans l’éditeur d’articles de WordPress. Elle change seulement dans les pages et les articles.

Aussi, vous pouvez modifier le comportement de la galerie comme vous le souhaitez.

En l’occurrence, j’ai affiché les images dans une grille responsive avec Bootstrap, mais vous pouvez très bien intégrer les images sélectionnées pour les afficher dans un carrousel.

L'illustration de cet article est une image sous licence domaine publique par Abasaa

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

5 réflexions au sujet de « Personnaliser la galerie de WordPress »

  1. Bonjour, merci pour le partage. En effet, la galerie de WordPress offre déjà un meilleur affichage mais comme chacun a son goût, il est toujours mieux d’avoir la possibilité de le personnaliser. J’espère seulement ne pas me perdre sur les étapes à suivre pour y parvenir.

  2. Bonjour et merci pour votre article !

    c’est vraiment une bonne idée de garder le système de galerie de base et de le customiser,

    J’ai une petite question relative aux options affichées dans le Panneau « RÉGLAGES DE LA GALERIE »,
    comment y accéder pour ajouter par exemple le choix du type de Gallerie (on pourrait envisager d’avoir des galeries par defaut, slider, isotope, owl, …)
    auriez vous quelques pistes ? merci !

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.