Ouvrir vos images dans une fenêtre modale sur WordPress

Les fenêtres modales sont devenues monnaie courante : pratique par exemple pour afficher en grand des images en cliquant sur leurs miniatures, il en existe une multitude avec un fonctionnement, un style et des options différentes. Pour WordPress, de nombreuses extensions remplissent cette fonction, mais il est moins connu que celui-ci embarque par défaut Thickbox, un script javascript de fenêtre modale.

Il a d’ailleurs été utilisé jusqu’à la version 3.5 pour afficher les fenêtres d’insertion de média par exemple, avant d’être remplacé par une solution interne. Mais il reste exploitable par les développeurs qui le souhaitent, et c’est ce que je vais vous montrer dans cet article avec son utilisation pour les images.

Ajouter Thickbox sur votre site

Le code sera à ajouter soit dans le functions.php de votre thème, soit dans le plugin de site (dans mu-plugins ou autre) que vous avez déjà créé (voir cet article de Julio pour en savoir plus) :

add_action( 'init', 'add_thickbox' );
add_filter( 'the_content', 'rp_auto_thickbox', 10, 1 );
function rp_auto_thickbox( $content ) {
 $pattern = "/<a(.*?)href=('|\")([^>]*)('|\")(.*?)><img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)\/><\/a>/i";
 $replacement = '<a$1class="thickbox" href=$2$3$4$5><img$6src=$7$8.$9$10$11/></a>';
 $content = preg_replace($pattern, $replacement, $content);
 return $content;
}

Explication :

add_thickbox() est une fonction fournie par WP qui ajoute automatiquement le script js et le style css intégrés au core. Pratique, tout est fait à notre place. Seulement pour que cela fonctionne, tous les liens qui doivent s’ouvrir dans une fenêtre modale, doivent avoir une classe “thickbox”, pour pouvoir être repérés par le script.

Pour ne pas faire l’ajout manuellement à chaque fois, on filtre le contenu renvoyé (par the_content()) avec une fonction qui va rechercher les images avec lien, et ajouter la classe automatiquement.

Les images avec lien de vos articles/pages/etc s’ouvriront dorénavant dans la fenêtre modale, qui reprend la mise en forme de l’admin WordPress.

Amélioration ?

J’ai testé ce bout de code sur un thème que je suis en train de faire, mais il est sans doute possible de l’améliorer. Mon niveau en regex est léger, et peut-être faudrait-il aussi filtrer get_the_content ? Si vous avez des suggestions, je suis preneur !