Comment créer une galerie photos dans WordPress ?

avatar de baptiste pagès
Par Baptiste Pagès le 20 mars 2021

Publié dans Tutoriel

Mis à jour le 6 août 2021

Rien de tel que des photos pour rassurer vos visiteurs et pour illustrer vos propos. Que vous réalisiez des sites comme moi ou que vous teniez un petit magasin, savoir comment créer une galerie photo dans WordPress vous sera très utile. Aujourd'hui, je vous montre comment faire ça, une étape à la fois.

Étape 1 : Créer une page (ou l'éditer)

Pour commencer, nous allons devoir créer ou éditer une page ou un article utilisant l'éditeur Gutenberg de WordPress. Autrement dit, une page "par défaut" de WordPress, sans constructeur comme Divi ou Elementor. Si vous débutez de zéro, commencez par vous familiariser avec le panneau d'administration de WordPress.

Dans le menu de gauche, cliquez donc sur "Ajouter" et commençons.

Étape 2 : Ajouter un bloc Gutenberg "Galerie"

Dans l'éditeur du contenu de la page (l'éditeur Gutenberg) nous allons maintenant créer un bloc Galerie.

  • Cliquez sur le petit "Plus" dans l'éditeur
  • Tapez "Galerie" dans le champs de recherche de blocs
  • Sélectionnez le bloc "Galerie" pour l'insérer dans la page

Étape 3 : Ajouter des images à la galerie photos

Maintenant vous allez pouvoir sélectionner les photos que vous voulez ajouter à la galerie. Pour ça, sélectionnez "Médiathèque", ça vous ouvrira la médiathèque WordPress dans laquelle vous pourrez choisir les images, ou en ajouter de nouvelles.

  1. Cliquez sur les images qui vous plaisent, elles auront un petit "check" en haut à droite.
  2. Cliquez sur "Créer une nouvelle Galerie".

Vous allez maintenant arriver sur un résumé de la galerie qui vous permettra d'ajouter des légendes si vous le souhaitez, ou encore de réordonner les images. S'il vous manque des images, vous pouvez aussi cliquez sur "Ajouter à la galerie" dans le menu de gauche pour régler ça.

Dans mon cas je ne touche à rien pour l'instant, et je clique juste sur "Insérer la galerie".

Configuration avancée

1. Recadrer les images

Si vos images sont de formats différents (de dimensions variables) alors cette option est un must. Elle permet de recadrer les images pour que la galerie soit visuellement beaucoup plus sympa.

Galerie WordPress avec l'option "Recadrer les images"
Galerie WordPress sans l'option "Recadrer les images"

2. Changer le nombre de colonnes

Vous disposez également d'un slider vous permettant de choisir le nombre de colonnes de la galerie. Si les images ne sont pas un multiple parfait de ce chiffre, elle se réorganiseront automatiquement.

Les colonnes se réorganiseront également sur mobile et sur tablette automatiquement, donc regardez surtout le rendu sur un ordinateur. En règle générale, trois ou quatre colonnes font l'affaire.

Galerie avec deux colonnes
Et avec quatre colonnes, un rendu très différent.

3. Rendre les images zoomables avec une lightbox

Sous l'option de recadrage, vous avez une liste déroulante intitulée "Lien vers". Par défaut, "Aucun" est selectionné. Si vous voulez rendre vos images zoomables lors d'un clic, alors il faudra choisir "Fichier média" ici.

Voici où trouver l'option "Lien vers" de la Galerie WordPress.
Et voilà le rendu lorsqu'on clic sur l'image au final. Vous pourrez toujours ajuster le look de ce popup avec du CSS.

4. Pensez à ajuster la taille des images

Pensez également à ajuster la taille des images pour qu'elles correspondent à votre situation. Plus une image est grande, plus elle alourdira votre page, plus celle-ci sera difficile à charger par les petites connexions.

On peut très bien partir avec l'idée de faire une galerie pour que ça plaise au visiteur, et au final que ça ruine sa navigation parce que les images sont trop lourdes.

5. Ajouter des légendes

Pour ajouter une légende, vous pouvez passer par l'interface de modification de la galerie, ou vous pouvez directement écrire sur les images comme ci-dessous. Si vous avez envie d'aller plus loin, vous pouvez aussi changer la police de caractère des légendes avec un peu de CSS ou via un plugin.

Si vous avez envie d'aller plus loin, vous pouvez aussi changer la police de caractère des légendes avec un peu de CSS ou via un plugin.

Ajuster l'affichage avec du css

Je n'aime pas que la légende s'affiche par défaut. J'aimerais faire en sorte qu'elle se s'affiche uniquement lorsque le curseur est au-dessus de la vidéo. Pour ça, je vous invite à ajouter le code suivant dans la partie "CSS additionnel" du panneau de personnalisation de WordPress.

.gros-espace {
     margin: 40px;
 }
 .wp-block-gallery .blocks-gallery-item figcaption{
     opacity:0;
     transition:.3s linear all;
 }
 .wp-block-gallery .blocks-gallery-item:hover figcaption{
     opacity:1;
 }

N'hésite pas à me contacter si vous souhaitez de l'aide avec tout ça, bonne journée et à bientôt !

Bienvenue sur mon site !

Je m'appelle Baptiste.

Je suis un webdesigner et consultant SEO indépendant spécialisé dans WordPress. Depuis maintenant plus de six ans, j'aide les petites entreprises à se démarquer sur Internet et à développer leur visibilité.

J'écris aussi pas mal d'articles pour aider les débutants. N'hésitez pas à me contacter si vous avez une question !

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉