[AUTOMATIQUE] Cet article a plus de 5 ans.
Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.

Nous allons voir comment modifier la galerie photos générée par WordPress (sans plugin). Nous allons ainsi pouvoir la mettre en forme et y ajouter une class ou une rel pour ajouter un effet lightbox avec votre plugin de lightbox préféré.

 

La galerie de base

WordPress vous permet d’ajouter à vos articles des photos via son interface Ajouter un média. Vos photos sont ensuite associées à l’article en question et apparaissent dans Galerie.

Vous avez juste à côté le nombre d’image associées à cet article.

En allant dans cet onglet, tout en bas, vous devriez voir Réglages de galerie, à condition que vous ayez plus d’une image associées à l’article en question.

Vous obtenez ainsi les options suivantes :

  • Lier les miniatures à : Fichier image (le lien de l’image pointe vers l’image) / Page de fichier attaché (pointe vers le lien associé à l’image dans les options de celle-ci)
  • Ranger les images par : Ordre du menu (vous pouvez ordonner vos photos en les faisant glisser dans le menu galerie), Titre, Horodatage (par date), Au hasard.
  • Ordre : Croissant / Décroissant
  • Colonnes de galerie : 1 à X

Validez et vous allez voir apparaitre dans le code de votre page un shortcode ce type :

[galerie link="file" columns="4" orderby="rand"]

Publiez votre article et regardez le résultat. Vous pouvez constater que ça n’est pas terrible, et surtout pas du tout assorti à votre charte graphique.

 

La galerie personalisée

Nous allons maintenant nous rendre dans le fichier functions.php pour y ajouter le code suivant :

Nota : documentation add_image_size

<?php
// La résolution de vos miniatures dans la galerie
add_image_size( 'galpics', largeur_miniature, hauteur_miniature, true );
 
add_filter( 'post_gallery', 'my_post_gallery', 10, 2 );
function my_post_gallery( $output, $attr) {
	global $post, $wp_locale;
	 
	static $instance = 0;
	$instance++;
	 
	// on écrase la mise en forme de la galery d'origine pour utiliser la nouvelle définie ci-dessous
	if ( isset( $attr['orderby'] ) ) {
		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
	if ( !$attr['orderby'] )
		unset( $attr['orderby'] );
	}
	 
	extract(shortcode_atts(array(
		'order' => 'DESC',
		'orderby' => 'rand',
		'id' => $post->ID,
		'itemtag' => 'dl',
		'icontag' => 'dt',
		'captiontag' => 'dd',
		'columns' => 4,
		'size' => 'galpics', // la taille de nos miniatures définie en première ligne
		'include' => '',
		'exclude' => '',
	), $attr));
	 
	$id = intval($id);
	if ( 'RAND' == $order )
		$orderby = 'none';
	 
	if ( !empty($include) ) {
		$include = preg_replace( '/[^0-9,]+/', '', $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) ) {
		$exclude = preg_replace( '/[^0-9,]+/', '', $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 '';
	 
	if ( is_feed() ) {
		$output = "n";
		foreach ( $attachments as $att_id => $attachment )
			$output .= wp_get_attachment_link($att_id, $size, true) . "n";
		return $output;
	}
	 
	$itemtag = tag_escape($itemtag);
	$captiontag = tag_escape($captiontag);
	$columns = intval($columns);
	$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
	$float = is_rtl() ? 'right' : 'left';
	 
	$selector = "gallery-{$instance}";
	 
	$output = apply_filters('gallery_style', "<div id='$selector' class='gallery galleryid-{$id}'>");
	 
	$i = 0;
	foreach ( $attachments as $id => $attachment ) {
		$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
		$titre = $title= get_the_title($id);
		$link = str_replace('><img','class="votre_class_lightbox" rel="votre_rel_lightbox"><img',$link);
		// Le lien et l'image du lien étant généré directement dans la chaine, on utilise srt_replace pour pouvoir couper la chaine et ajouter notre class et/ou notre rel à l'url de l'image dans la galerie.
		// On pourra ainsi avoir notre effet lightbox sur toutes nos images.
		 
		// C'est ici que commence la structure de la boucle de la galerie, ajoutez vos div et autre pour personnaliser la structure.
		$output .= " 
			<div class='ma_galerie'>
			<span class='ma_photo'>
				<{$itemtag} class='gallery-item'>
					<{$icontag}>
						$link
				</{$icontag}>";			
				if ( $captiontag && trim($attachment->post_excerpt) ) {
					$output .= "
						<{$captiontag}>
							" . wptexturize($attachment->post_excerpt) . "
						</{$captiontag}>";
				}
		$output .= " 
				</{$itemtag}>
			</span>
				<h2 class='le_titre_de_ma_photo'>
					$titre
				</h2>
			</div>
		";
		if ( $columns > 0 && ++$i % $columns == 0 )
			$output .= ' <div class="clear-both"></div>';
	}
	 
	$output .= "
		<div class='clear-both'></div>
	</div>";
	 
	return $output;
}
?>

Voilà, c’est terminé, cette fonction est une bonne de personnalisation. A vous de jouer pour la mettre à votre goût.

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

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

Afficher les 7 commentaires

7 commentaires

  1. ok brice j’avais bien compris ce que tu me dit la mais il faut bien inclure quelque part dans ton script pour le cas d’une liigthtbox jquery
    1 il faut appeler jquery
    2 il faut appeler le plugin liigthtbox en question

    non ?

    c’est dans ce sens que je disais que le script paraît incomplet ….enfin il me semble

    par exemple toi tu utilise quel plugin liigthtbox
    et comment
    c’est pas seulement une histoire de classe à associer aux images qu’il faut faire?

    ( pas eu le temp de regarde la source de ta page sur mon poste fixe suis sur tablette la )

    • Bonjour Thierry,
      Encore une fois, non, l’explication présentée ci-dessus n’a pas vocation à présenter comment installer un plugin lightbox ou jquery sur son thème WordPress, mais à rendre la galerie WordPress compatible avec un plugin de type lighbox.

      Si tu souhaites installer un plugin jquery sur ton thème, tu auras en effet besoin d’employer enqueue script pour appeler le JS ainsi que l’éventuel CSS lié.
      Jquery est chargé nativement dans WordPress, mais si tu souhaites le chargé via CDN, ce petit snippet pourrait t’intéresser : Charger jQuery via CDN dans WordPress

      Personnellement, j’utilise le plugin « Responsive Lightbox » sur pas mal de projets responsifs, et pour le configurer, il réclame le marqueur « Sélectionnez à quel sélecteur rel l’effet Lightbox sera appliqué. ».
      Certains plugins ne demande que de saisir une classe pour les images, il n’est donc pas toujours nécessaire d’utiliser le filtre PHP présenté ci-dessus.

      Voici un autre article qui pourrait t’intéresser si tu ne l’as pas déjà vu (parcours les commentaires également) : Ajouter un effet lightbox dans WordPress (avec ou sans plugin)

      A+

  2. je comprend pas bien ton code à savoir: la ligne
    $link = str_replace(‘><img',$link);

    fonctionne avec quelle light box ??
    et comment l'intégrer ? je vois nulle par d'enqueue script
    il me semble que t'es explication sont incomplètes ? non

    • Bonjour Thierry,
      La ligne que tu ne sembles ne pas comprendre est pourtant documentée. Il s’agit de remplacer une chaîne de caractères par une autre. Et dans ce cas précis, d’ajouter les class et rel souhaités sur les images d’une galerie.

      Cette méthode te permet de faire fonctionner ta galerie avec n’importe quelle plugin de lightbox. Il suffit de préciser un REL ou en CLASS d’image (en fonction de ce que te propose le plugin) et le tour est joué.
      Il n’y a pas d’enqueue script nécessaire dans le cas de cette démonstration car on rend la galerie « compatible » avec un plugin de lighbox (un plugin WordPress ou jQuery par ex)… Enqueue sert à charger du CSS/JS, ici il n’est question que de PHP.

      Enfin, comme toujours lorsque l’on présente des snippets ou petit tutoriaux, le code présenter est à coller quelque part dans son thème, par défaut dans functions.php.

      A noter que ce post date d’il y a plus de 2 ans, et qu’il n’est de ce fait pas forcément à jour compte tenu des nombreuses évolutions de WordPress et des nouvelle bibliothèques et plugins dispo sur la toile.

    • Salut Thibaud,
      les paramètres que j’ai utilisé te permettent déjà d’afficher 4 photos par colone.
      'columns' => 4,
      C’est exactement ce code que j’utilise pour ma galerie de portfolio 😉