7,00

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

7,00

  • Une formation vidéo de 1h26m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Créer une galerie d'images avec pagination sur WordPress

ajouter ce cours aux favoris retirer ce cours des favoris

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é 201 tutoriels et obtenu une note moyenne de 4,8/5 sur 61 889 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

7
avis laissés
5 étoiles
7
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de grif51 laissé le 01/07/2016
    Un bon tuto complémentaire aux autres du même auteur

  • 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.

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    WordPress 4, WordPress 3, CSS 2, CSS 3
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
Parcours Développeur WordPress
accédez à plus de 1420 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données