Dans ce tuto WordPress, nous allons voir comment ajouter une galerie d'images à un article de votre blog ou votre site créé avec le CMS WordPress. Je vous invite à regarder l'extrait vidéo pour voir ce que l'on va réaliser ensemble. Étapes de ce tuto :
- Créer un fichier single.php à partir d'index.php pour avoir un template qui servira à l'affichage de l'intérieur d'un article
- Ajouter de nouvelles tailles d'images dans function.php
- Envoyer et relier des images à un article
- Mise en place d'une méthode en PHP pour récupérer ces images attachées
- Affichage des images dans une liste ul
- Stylisation de cette galerie en CSS3 avec un effet d'échelle sur le hover
- Télécharger et lier un plugin jquery
- A l'aide du plugin, créer la pagination automatique pour la galerie d'images
- Stylisation de la pagination (bouton, current, flèche desactivée...)
- Ajout d'un bouton permettant, au click, de supprimer la pagination et montrer toutes les images d'un coup pour avoir un effet mur d'images
- Configuration du plugin Colorbox, et mise en place d'une classe supplémentaire sur nos images pour qu'elle soient groupées et donc ajouter le fait de pouvoir naviguer entre nos images (précédent/suivant)
- Récupérer l'image à la une ainsi que l'url de la version large de celle-ci pour la voir en plus grand dans la colorbox
- Exclure cette image à la une de la galerie automatiquement
A la fin de ce tutoriel, vous saurez comment ajouter une galerie dynamiquement à vos articles sans ajouter le shortcode prévu par WordPress. Il faudra juste uploader des images et les attacher à l'article choisi pour voir apparaître la galerie ou vous avez prévu de la mettre dans votre template.
Tout le thème utilisé dans cette formation est inclus dans les sources.
Bon tuto!
Avis des apprenants