WordPress et HTML5, le shortcode [ gallery]

Après avoir vu la structure globale d’un thème WordPress en HTML5, après avoir modifier le shortcode [ caption], nous allons maintenant nous attarder sur le shortcode [ gallery], pour le rendre, lui aussi, plus conforme à HTML 5, en utilisant notamment les balises <figure>, et <figcaption>.

Solution 1: saisie manuelle des balises

Le shortcode standard de WordPress accepte les paramètres itemtag, icontag, et captiontag, avec les valeurs par défaut: dl, dt, et dd. Pour être plus conforme à HTML5, il suffit donc de saisir le shortcode, avec de nouvelles valeurs pour ces paramètres:

1
[ gallery link=file ... ... itemtag="figure" captiontag="figcaption" icontag="span"]

Le code HTML généré ressemblerait à cela:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="gallery galleryid-xxx gallery-columns-3 gallery-size-thumbnail" id="gallery-1">
	<figure class="gallery-item">
		<span class="gallery-icon">
			<a title="... ..." href="... ...">
				<img height="100" width="100" title="... ..." class="attachment-thumbnail" src="... ..." />
			</a>
		</span>
		<figcaption class="wp-caption-text gallery-caption">
			... ...
		</figcaption>
	</figure>
	<figure class="gallery-item">
		<span class="gallery-icon">
			<a title="... ..." href="... ...">
				<img height="100" width="100" title="... ..." class="attachment-thumbnail" src="... ..." />
			</a>
		</span>
		<figcaption class="wp-caption-text gallery-caption">
			... ...
		</figcaption>
	</figure>
	<br style="clear: both">
	<figure class="gallery-item">
		<span class="gallery-icon">
			<a title="... ..." href="... ...">
				<img height="100" width="100" title="... ..." class="attachment-thumbnail" src="... ..." />
			</a>
		</span>
		<figcaption class="wp-caption-text gallery-caption">
			... ...
		</figcaption>
	</figure>
</div>
<br style="clear: both;">

Cette méthode fonctionne, mais impose de saisir systématiquement tous les paramètres lors de la saisie du shortcode, ce qui n’est pas très pratique.

Solution 2: modification du shortcode

Une solution plus automatisée consiste à modifier le shortcode. Sans toucher au shortcode d’origine, nous pouvons le « surcharger »:

1
2
3
4
5
6
7
8
9
10
11
remove_shortcode('gallery');
add_shortcode('gallery', 'my_own_gallery_shortcode');
 
function my_own_gallery_shortcode($attr) {
    $attr['itemtag']      = 'figure';
    $attr['icontag']      = 'span';
    $attr['captiontag']   = 'figcaption';
 
   return ( gallery_shortcode($attr) );
 
}

Le code HTML généré par le shortcode est le même qu’avec la méthode manuelle.

Balise aside

La méthode précédente gère les balises contenant les images. Il reste à traiter le cas de la balise div qui contient la galerie.

1
2
3
4
5
6
7
8
9
10
11
12
13
remove_shortcode('gallery');
add_shortcode('gallery', 'my_own_gallery_shortcode');
 
function my_own_gallery_shortcode($attr) {
    $attr['itemtag']      = 'figure';
    $attr['icontag']      = 'span';
    $attr['captiontag']   = 'figcaption';
 
   $html = gallery_shortcode($attr);
 
   return (str_replace('<div ', '<aside ', str_replace('</div>', '</aside>', $html) ) );
 
}

La méthode est « brutale », mais elle fiable.

Conclusion

Quelle que soit la méthode utilisée, nous avons maintenant une galerie d’images, plus conforme à HTML 5 que celle proposée en standard par WordPress. Prochaine étape: rendre cette galerie fluide et responsive.

1 thought on “WordPress et HTML5, le shortcode [ gallery]”

Laisser un commentaire

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