skip to Main Content

Comment créer une galerie photo sur WordPress avec FooGallery

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

FooGallery est un plugin WordPress spécialement conçu pour les développeurs, mais surtout pour les « designers » et les photographes qui veulent créer des galeries photos assez impressionnantes.

Il offre une interface conviviale et facile à prendre en main. C’est un plugin qui a de l’avenir, au regard de sa communauté qui ne cesse d’augmenter, mais surtout des fonctionnalités qu’il propose.

Dans ce tutoriel, je vous monterai comment créer une galerie photo sur votre site WordPress grâce à FooGallery.

Comment installer et configurer FooGallery

FooGallery est disponible sur WordPress.org. Je vous invite donc à le télécharger directement et à l’installer sur votre blog WordPress. Vous pouvez également l’installer depuis votre tableau de bord.

Après l’activation de ce dernier, vous remarquerez juste après un nouveau menu disponible intitulé « FooGallery ». Accédez à la page « Settings » sur ce menu.

foogallery-menu-réglages

Sur cette page des réglages, il est possible de configurer le template applicable à la galerie. Par défaut 4 templates sont disponibles. Mais vous pourrez en ajouter en parcourant les templates disponibles dans ses extensions (« FooGallery >> Extensions »).

D’autres extensions pourront également ajouter des fonctionnalités au plugin, et c’est sur cette page que vous effectuerez vos modifications. Par défaut, très peu d’options sont disponibles.

Nous passerons donc directement à l’ajout des extensions qui sont selon moi indispensables.

Comment ajouter des extensions

Comme dis plutôt, pour ajouter des extensions au plugin FooGallery, nous devons accéder à l’emplacement « FooGallery >> Extensions ».

Sur cette nouvelle page, vous pouvez voir les différentes extensions disponibles. Au-dessus des résultats, il est possible de filtrer ces derniers, en choisissant :

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

  • Ceux actifs « active »
  • Les meilleurs « featured »
  • Ceux gratuits « free »
  • Les extensions premium « Premium »

L’onglet « Build Your Own » n’est pas un filtre, mais ce dernier vous donne la possibilité de créer vos propres extensions (seuls les développeurs sont concernés). Plus à droite, vous avez un champ de recherche des extensions.

rechercher-et-installer-des-extensions

Assurez-vous que vous êtes sur l’onglet « All » ensuite recherchez, installez et activez les extensions suivantes :

  • FooBox Free (Popup)
  • Polaroid Template (Template), qui est par ailleurs optionnel.

Remarque : Après avoir installé une extension, il faudra l’activer par la suite.

ajouter-des-extensions

Il est maintenant temps de créer notre première galerie photo.

Comment créer une nouvelle galerie photo

Pour créer une nouvelle galerie photo, vous devez accéder à l’emplacement « FooGallery >> Add Gallery ». Vous remarquerez que cette nouvelle page à quelques similitudes avec l’interface de création d’article et de page.

Dans la section « Gallery Items », vous pouvez choisir les différentes images à ajouter. Cliquez sur « Add Image » pour ajouter de nouvelles images depuis la médiathèque.

ajouter-une-image

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Dans la section « Gallery Settings », vous pouvez choisir le template applicable à la galerie « Gallery template ». Et plus bas, vous pouvez choisir :

  • les dimensions des miniatures des images contenues dans cette galerie (Size)
  • d’utiliser les liens vers les images (avec leurs tailles réelles), vers une page où l’image sera attachée ou tout simplement ne pas utiliser de lien (not linked).
  • bordures « border styles »
  • l’icône au survol « hover effect »

Ensuite, vous pouvez choisir d’utiliser une lightbox (choisir « FooBox Free » ou non « None »). Il est également possible de définir l’espace qui sépare les miniatures « Spacing » et de l’alignement des images « Alignment ».

reglages-foogallery

Sur la droite de cette page, vous pouvez voir le shortcode de cette galerie, en cliquant dessus une copie de ce dernier sera effectuée automatiquement.

shorcode-d-une-galerie

Pour afficher cette galerie, il vous faudra coller ce code dans un article ou une page.

Vous pouvez également vous servir du bouton « Add FooGallery », pour ajouter les différentes galeries créées.

comment-ajouter-une-galerie

Une fenêtre s’affichera, et vous devrez choisir parmi les différentes galeries disponibles.

ajouter-une-galerie

Après avoir ajouté une galerie, je vous invite à prévisualiser cette page afin de voir comment s’affiche la galerie.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

nouvelle-galerie-avec-foogallery

Remarque : Pour administrer les galeries disponibles, vous devez accéder à l’emplacement « FooGallery >> Galleries ». Cette page est assez identique à celle qui affiche tous les articles ou pages sur le tableau de bord.

gestion-des-galeries

C’est tout pour ce tutoriel destiné à la création de galerie photo sur WordPress. j’espère qu’il vous aidera à créer des galeries sur votre blog WordPress.

Cet article comporte 2 commentaires
  1. J’ai inséré une galerie dans une de mes pages avec FooGallery mais quand je clique sur les vignettes, impossible de fermer la photo zoomée. Il n’y a pas de bouton ou autre possibilité de fermer l’image agrandie. Avez-vous une idée de l’origine du problème ? Merci d’avance.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
9 Partages
Partagez8
Tweetez1
Enregistrer