Supporter les galeries d’images WordPress en HTML5

WordPress ajoute des styles par défaut sur les galeries d'images de vos articles pour les thèmes qui ne gèrent pas le support en HTML5 de ce type d'élément. À l'aide d'un bout de code, vous pourrez désactiver ces styles et ainsi avoir à nouveau la possibilité d'appliquer vos propres styles CSS.

Un thème bien codé doit disposer de la ligne de code suivante pour un support efficace des galeries d’images :

add_theme_support('html5', array('gallery'));

La présence de cette ligne aura pour effet d’utiliser la balise figure. En cas d’absence, WordPress utilisera des balises dl et dt et ajoutera en inline le bout de code suivant :

<style type='text/css'>
	#gallery-1 {
		margin: auto;
	}
	#gallery-1 .gallery-item {
		float: left;
		margin-top: 10px;
		text-align: center;
		width: 33%;
	}
	#gallery-1 img {
		border: 2px solid #cfcfcf;
	}
	#gallery-1 .gallery-caption {
		margin-left: 0;
	}
	/* see gallery_shortcode() in wp-includes/media.php */
</style>

Autrement dit, ce n’est pas très optimal ! Si vous développez vos propres thèmes, respectez ces bonnes pratiques mais si vous reprenez un thème premium vous pouvez tout simplement filtrer l’ensemble pour désactiver l’ajout de CSS en inline avec :

/* Removing Default WordPress Syles for Galleries */
add_filter('use_default_gallery_style', '__return_false');

Pour ma part, voici le code CSS que j’inclus dans mon thème de base :

.gallery {
	margin: 0 -1.1666667% 1.75em;
}
.gallery-item {
	display: inline-block;
	max-width: 33.33%;
	padding: 0 1.1400652% 2.2801304%;
	text-align: center;
	vertical-align: top;
	width: 100%;
}
.gallery-item a {
	display: inline-block;
}
.gallery-columns-1 .gallery-item {
	max-width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 50%;
}
.gallery-columns-4 .gallery-item {
	max-width: 25%;
}
.gallery-columns-5 .gallery-item {
	max-width: 20%;
}
.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}
.gallery-icon img {
	margin: 0 auto;
}
.gallery-caption {
	color: #686868;
	display: block;
	font-size: 13px;
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.6153846154;
	padding-top: 0.5384615385em;
}
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

Bien qu’elles ne soient pas toujours très utilisées dans un projet, les galeries d’images de WordPress constituent un élément obligatoire à prendre en charge dans le développement d’un thème – au même titre que les commentaires, les widgets, les menus, et tout ce qui est disponible sur ce système de gestion de contenu.

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX