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 :…
Ce pack formation WordPress en 3 parties vous permettra de créer…
Un menu accordéon dans une…
Ce tuto CSS, HTML, jQuery et Wordpress sur la création d'un…
Rajouter des tailles d'images…
Dans ce tuto Wordpress, en vidéo, vous allez apprendre rajouter…
Créer une page d'options…
Dans ce tuto WordPress en vidéo, nous allons voir comment ajouter…
Créer un site web Wordpress…
Dans ce tuto Wordpress en vidéo, nous allons voir ensemble,…
Créer un site WordPress :…
Dans cette 3ème partie de formation WordPress, nous allons…
Installation & Tour d'horizon…
Dans cette 1ère partie consacré à la création d'un thème…
Créer un slider et l'intégrer…
A l'aide d'un plugin jQuery, nous allons créer un slider pour…
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 :
spykrew07
, formateur certifié
Salut à tous !
Je m'apelle Adrien j’ai 28 ans et je suis Webdesigner spécialiste WordPress depuis plus de 6 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant plus de 3 ans et depuis 1 an et demi 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
![]()
extrêmement complet ! très pédagogique ! Top !
![]()
Je trouve très intéressante votre vidéo sur la création d'un site OnePage. Je l'ai vu plusieurs fois et vais me lancer bientôt dans la création d'un site en m'inspirant de vos idées. Pour le reste "Jquery, css, ...) cela ne me fait plus peur . Merci.
![]()
Du très bon travail ! Encore merci pour ces formations nécessaires à mon apprentissage dans le graphisme.
![]()
Tutos simples et efficaces !
![]()
Vraiment très agréable à suivre. J'ai beaucoup aimé.
Lire les autres témoignages
D'autres tuto de spykrew07
Cré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 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 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 WordPress
Dans ce tuto WordPress en vidéo, nous allons voir comment ajouter une page d'options…
Notes attribuées par les utilisateurs (5 votes)
Les avis / Questions des utilisateurs (7)
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é 131 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.




















(a acheté ce tuto - 26 septembre 2012)
" Excellent tuto, toujours aussi didactique et facile à suivre. "
(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 ? "
(a acheté ce tuto - 25 mai 2012)
" super, toujours aussi clair ! Et le pire, c'est que ça fonctionne ! ;-) "
(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. "
(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 ! "
(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. "
(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 "