Une galerie WordPress sans saut de ligne

Je travaille en ce moment sur le site internet d’un Designer (j’ajouterais le site une fois terminé sur le site de ma société: http://www.kune-studio.com).

J’ai voulu utiliser la galerie que propose WordPress, pour créer un caroussel de photos. Le problème était simple, WP ajoute systématiquement unn saut de ligne entre les items de la galerie, et un dernier saut de ligne à la fin de la gallerie.

Voilà donc un moyen simple pour les supprimer. Ouvrez (ou créez) un fichier functions.php dans le dossier de votre thème et collez y ceci:

function my_gallery_shortcode($attr) {
	global $post;

	static $instance = 0;
	$instance++;

	// Allow plugins/themes to override the default gallery template.
	$output = apply_filters('post_gallery', '', $attr);
	if ( $output != '' )
		return $output;

	// 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->ID,
		'itemtag'    => 'div',
		'icontag'    => 'span',
		'captiontag' => 'p',
		'columns'    => 3,
		'size'       => 'full'
	), $attr));

	$id = intval($id);
	$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;

	$selector = "gallery-{$instance}";

	$output = apply_filters('gallery_style', "

			#{$selector} {
				margin: auto;
			}
			#{$selector} .gallery-item {
				float: left;
				margin-top: 10px;
				text-align: center;
				width: {$itemwidth}%;			}
			#{$selector} img {
				border: 2px solid #cfcfcf;
			}
			#{$selector} .gallery-caption {
				margin-left: 0;
			}

		
		n";

	return $output;
}

Quelques explications pour rendre plus clair les opérations.Tout d’abord on supprime le shortcode qui affiche la galery. Ensuite j’ai recopié la fonction qui génère la galerie en y apportant de petites modifications (les icontag et itentag par défaut). Enfin, j’ai supprimé le dernier saut de ligne à la fin pour ne plus avoir a l’afficher.

Pour les sauts de ligne entre les éléments de la galerie, il vous suffit de donner 0 pour le nombre de colonne.

Et voilà, le tour est joué!

Reblog this post [with Zemanta]

Mat_

Au départ on sort avec un diplôme d’ingénieur de l’ESIL (devenu Polytech’Marseille) en Informatique, réseau et multimédia, spécialisé dans les Systèmes d’Informations et Services E-Business. En même temps on bosse, on développe, on apprend. Et maintenant on entreprend.Passionné de nouvelles technologies, et évangéliste de WordPress, j’aime découvrir, tester, rechercher.

Vous aimerez aussi...

Suivez Kune.fr sur les réseaux sociaux !

Kune.fr est votre site de ressources web. Vous y trouverez de nombreux outils utiles pour le web.
Alors n'hésitez plus, aimez notre page !

  • Ressources Wordpress, tutoriels, plugins et thèmes
  • Ressources design, packs d'icônes, kits UI ...
Fermer cette popup
%d blogueurs aiment cette page :