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!

Jetez un oeil à ces autres tuto Wordpress 3.3, CSS 3

PACK FORMATION WORDPRESS : Créer un site Web CompletPACK FORMATION WORDPRESS :…
Ce pack formation WordPress en 3 parties vous permettra de créer…

Un menu accordéon dans une page à partir de l’admin WPUn menu accordéon dans une…
Ce tuto CSS, HTML, jQuery et Wordpress sur la création d'un…

Rajouter des tailles d'images dans l'admin de WordpressRajouter des tailles d'images…
Dans ce tuto Wordpress, en vidéo, vous allez apprendre rajouter…

Créer une page d'options pour votre thème WordPressCréer une page d'options…
Dans ce tuto WordPress en vidéo, nous allons voir comment ajouter…

Créer un site web Wordpress : l'intégrationCréer un site web Wordpress…
Dans ce tuto Wordpress en vidéo, nous allons voir ensemble,…

Créer un site WordPress : DéveloppementCréer un site WordPress :…
Dans cette 3ème partie de formation WordPress, nous allons…

Installation & Tour d'horizon de l'admin de WordpressInstallation & Tour d'horizon…
Dans cette 1ère partie consacré à la création d'un thème…

PACK FORMATION WORDPRESS : Créer un site Web CompletPACK FORMATION WORDPRESS :…
Ce pack formation WordPress en 3 parties vous permettra de créer…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Wordpress 3.3, CSS 3 de 1 heure 26 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

spykrew07 , formateur certifié

Salut à tous ! Je m'apelle Adrien j’ai 29 ans et je suis Webdesigner spécialiste WordPress depuis 7 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 4 ans et depuis 3 ans je me suis lancé en freelance. Formateur certifié sur tuto.com, je partage mes connaissances et mes découvertes dans différents domaines : web design, logo, html, wordpress, php, css jquery ... Ma devise : Webdesign is not a job, it’s a passion !

Toutes les formations de Spykrew07


Témoignage des clients de spykrew07

Je trouve que Spykrew07 est un très bon formateur !

Très bon formateur !!!

tutos clair et précis!

Très bien, de bonnes explications très précises. Un bon rythme pendant les tutos

Tuto utile et super précis ! Merci

Lire les autres témoignages

 

D'autres tuto de spykrew07

Créer un Sticky menu qui reste visible à tout instantCréer un Sticky menu qui reste visible à tout instant
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir comment créer un sticky…

Récoltez des emails depuis un site vers une liste MailjetRécoltez des emails depuis un site vers une liste Mailjet
Dans ce tuto PHP et Mailjet, en vidéo, nous allons voir comment récupérer des emails…

Animer la hauteur d'un élément pour dévoiler un contenuAnimer la hauteur d'un élément pour dévoiler un contenu
Dans ce tuto jQuery en vidéo, nous allons voir comment animer la hauteur d'une liste…

Créer une page d'options pour votre thème WordPressCréer une page d'options pour votre thème WordPress
Dans ce tuto WordPress en vidéo, nous allons voir comment ajouter une page d'options…

voir tous les tuto de spykrew07

Notes attribuées par les utilisateurs (6 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (9)

par spykrew07
(auteur de ce tuto - 14 septembre 2013)

" @BLONDIN Eh bien c'est la même chose que dans le tuto pour n'importe quel thème en fait. Je ne vois pas ce qui te bloque ? "

par BLONDINa voté :
(a acheté ce tuto - 13 septembre 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. "

par lolodena voté :
(a acheté ce tuto - 26 septembre 2012)

" Excellent tuto, toujours aussi didactique et facile à suivre. "

par maissouma voté :
(a acheté ce tuto - 10 septembre 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 ? "

par SOMEWAYa voté :
(a acheté ce tuto - 25 mai 2012)

" super, toujours aussi clair ! Et le pire, c'est que ça fonctionne ! ;-) "

par jeffBa voté :
(a acheté ce tuto - 22 mai 2012)

" Très bon tut, clair et rapide à mettre en place, ça fonctionne nickel avec le jQuery carrousel.
J'ai juste une question, à savoir si on peut exclure aussi une catégorie d'image du post de la galerie photo (comme tu as fait pour la vignette à la une) ?
Merci à toi. "

par spykrew07
(auteur de ce tuto - 21 mai 2012)

" Oui c'est la même chose avec jCarousel, tant que tu sais comment récupérer les images attachées à un article/page, après tu mets n'importe quel plugin jQuery pour créer ta galerie. Bon courage, bye ! "

par jeffBa voté :
(a acheté ce tuto - 21 mai 2012)

" Salut spykrew,

Je suis intéressé par ce tutoriel mais j'hésite encore un peu car je souhaite avoir plutôt ma galerie s'afficher dans un carrousel (avec jCarousel pour être précis) et avoir le colorbox.
Est-ce possible ?

Merci de ta réponse. "

par tailivana voté :
(a acheté ce tuto - 16 mai 2012)

" Comme toujours un tuto super.
Tres clair et plein d'astuces pour rendre notre site plus agréable
on en redemande "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto Wordpress 3.3, CSS 3 d’une durée de 1 heure 26 minutes a été acheté 159 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 16 mai 2012 par spykrew07, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,8/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Wordpress Image.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !