7 Crédits +d'infos

Tuto Créer une galerie d'images avec pagination sur WordPress avec WordPress, CSS


7 Crédits +d'infos
  • Téléchargement et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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!


Formateur : Adrien Gazaix

Adrien Gazaix a publié 74 tutoriels et obtenu une note moyenne de 4,8/5 sur 17 588 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com

Voir les autres formations de Adrien Gazaix

  • 5
    avis de BLONDIN laissé le 13/09/2013
    Tres bon tuto bravo, j'aurais juste eu besoin de savoir comment faire pour integrer ces pages de galeries photos à un theme WP déjà existant que j'utilise. merci pour le retour.
  • 5
    avis de loloden laissé le 26/09/2012
    Excellent tuto, toujours aussi didactique et facile à suivre.
  • 5
    avis de maissoum laissé le 10/09/2012
    Juste une questions : il y a t il une grande différence entre 'stylesheet directory' et 'template directory' pour appeler les fichiers js et css dans le header et/ou le footer ?

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    WordPress 3.9.2, WordPress 3.9.1, WordPress 3.9, WordPress 3.8, WordPress 3.7, WordPress 3.6, WordPress 3.5.1, WordPress 3.4, WordPress 3.5, WordPress 4, CSS 2
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire