Que vous soyez photographe, designer ou propriétaire d'une entreprise, votre portfolio est l'outil le plus puissant dont vous disposez pour gagner de nouveaux clients. Mais cela peut être frustrant pour les visiteurs s'ils doivent parcourir des dizaines d'images ou de projets juste pour trouver ce qu'ils cherchent.
J'ai vu comment un portfolio désorganisé peut vous faire manquer des opportunités. Si un client potentiel souhaite voir vos études de cas de « Conception de logos » mais se perd dans vos projets de « Développement Web », il pourrait simplement passer à autre chose.
C'est là qu'intervient un portfolio filtrable. Il permet aux visiteurs de trier votre travail par catégorie, par étiquette ou par type de projet en un seul clic, ce qui leur permet de trouver facilement exactement ce dont ils ont besoin.
Dans ce guide, je vais vous montrer comment créer facilement un portfolio filtrable dans WordPress, étape par étape.
Je couvrirai deux méthodes, afin que vous puissiez choisir celle qui correspond le mieux à vos besoins :
- Méthode 1 : Envira Gallery (Recommandé pour les photos) – Idéal si vous souhaitez afficher une galerie d'images (comme un album de mariage ou une vitrine de photographie).
- Méthode 2 : WPFilters (Recommandé pour les projets) – Idéal si vous souhaitez filtrer des études de cas, des articles de blog ou des produits WooCommerce.
Pourquoi créer un portfolio filtrable dans WordPress ?
La plupart des photographes et des designers créent de beaux portfolios présentant leurs meilleures photographies. Cependant, parfois, les personnes qui cherchent à vous embaucher peuvent vouloir voir si vous avez déjà fait quelque chose de similaire.
Par exemple, quelqu'un à la recherche d'un photographe de mode pourrait vouloir voir vos travaux précédents dans ce domaine.
L'ajout de filtres à votre portfolio vous permet de présenter votre travail sous différentes étiquettes. Cela aide également vos utilisateurs à trier facilement les éléments de votre portfolio.
Jetons un coup d'œil à la façon de créer facilement un portfolio filtrable dans WordPress, sans aucun codage requis.
Méthode 1 : Créer un portfolio filtrable à l'aide d'Envira Gallery (Recommandé pour les photos)
Envira Gallery est le meilleur plugin de galerie photo pour WordPress. Il vous permet de créer de beaux portfolios d'images filtrables qui se chargent rapidement et sont superbes sur tous les appareils.
Nous avons testé en profondeur Envira Gallery pour voir comment il se compare aux autres solutions. Pour en savoir plus sur notre expérience, consultez notre avis complet sur Envira Gallery.
Tout d'abord, vous devez installer et activer le plugin. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Remarque : Bien qu'il existe une version gratuite d'Envira Gallery, vous aurez besoin du plan Plus ou supérieur pour accéder au module complémentaire Tags requis pour ce tutoriel.
Après l'activation, vous devez visiter la page Envira Gallery » Settings pour entrer votre clé de licence. Vous pouvez obtenir ces informations depuis votre compte sur le site Web d'Envira Gallery.
Une fois que vous avez entré la clé, vous devriez cliquer sur le bouton « Verify Key ». Vous verrez un message indiquant que le site reçoit désormais des mises à jour.
Ensuite, vous devez installer le module complémentaire tags. Pour ce faire, rendez-vous sur la page Envira Gallery » Addons et recherchez le module Tags Addon.
Une fois que vous l'avez trouvé, vous devez cliquer sur le bouton « Install ».
Envira Gallery va récupérer et installer le module complémentaire pour vous, puis vous devrez cliquer sur le bouton « Activate » pour commencer à l'utiliser.
Maintenant, vous êtes prêt à créer votre portfolio filtrable.
Créer votre portfolio et organiser vos images
Rendez-vous sur la page Envira Gallery » Add New pour créer votre première galerie et lui donner un nom.
Vous pouvez maintenant ajouter des photos à votre galerie. Cliquez sur le bouton « Select Files from Your Computer » pour télécharger de nouvelles images, ou cliquez sur « Select Files from Other Sources » pour choisir des images déjà présentes dans votre bibliothèque de médias WordPress.
Si les photos sont déjà dans la bibliothèque de médias WordPress, vous devriez alors cliquer sur le bouton « Sélectionner des fichiers à partir d'autres sources ».
Envira va maintenant télécharger et insérer ces fichiers dans votre galerie. Une fois terminé, vous pourrez faire défiler vers le bas pour voir vos images.
Astuce d'expert : Les images haute résolution peuvent ralentir les performances de votre site. Je recommande d'utiliser un outil comme EWWW Image Optimizer ou Smush pour compresser vos photos de portfolio avant de les télécharger dans Envira.
Pour plus de détails, consultez notre guide sur comment ajouter des galeries d'images dans WordPress.
Ensuite, cliquez sur l'icône en forme de crayon pour modifier une image. Cela ouvrira une fenêtre contextuelle où vous pourrez ajouter les balises et autres métadonnées à vos photos.
Considérez les balises comme des mots-clés ou des catégories pour vos images. Par exemple, vous pourriez utiliser des balises comme « Mariages », « Portraits », « Paysages » ou « Noir et Blanc ». Ces balises deviendront les filtres cliquables que vos visiteurs utiliseront pour trier votre portfolio.
Entrez les balises que vous souhaitez attribuer à cette photo. Vous pouvez ajouter plusieurs balises séparées par une virgule. Une fois terminé, cliquez sur le bouton « Enregistrer les métadonnées » pour stocker vos balises.
Maintenant, vous devez répéter le processus pour ajouter des balises à toutes les images de votre galerie.
Astuce de pro : Soyez cohérent avec vos balises. Par exemple, utilisez toujours « Portraits » au lieu de passer de « Portrait » à « Portraits ». Cela permet de garder vos filtres clairs et faciles à utiliser pour les visiteurs.
Activation des paramètres de filtrage
Après avoir ajouté des balises à vos photos, cliquez sur l'onglet « Balises » à gauche de votre page de galerie. C'est là que vous pouvez activer ou désactiver le filtrage par balises pour votre galerie.
Vous devez cocher la case « Activer le filtrage par balises ? » pour activer le filtrage par balises, et vous pourrez voir les paramètres de cette option.
Vous pouvez choisir la position des balises (au-dessus ou en dessous de la galerie), décider d'afficher toutes les balises ou seulement certaines, et configurer d'autres paramètres d'affichage.
Une fois que vous avez terminé, cliquez simplement sur le bouton « Publier » pour rendre votre galerie en ligne. Votre galerie de portfolio est maintenant prête à être ajoutée à votre site.
Ajout du portfolio filtrable à votre site WordPress
Vous pouvez maintenant créer l'article ou la page où vous souhaitez afficher votre portfolio filtrable. Si vous utilisez l'éditeur de blocs, ajoutez simplement un bloc Envira Gallery à l'article.
Après cela, vous devriez cliquer sur le menu déroulant « Rechercher une galerie » et sélectionner la galerie que vous avez publiée précédemment.
Si vous utilisez l'éditeur classique, vous devriez alors cliquer sur le bouton « Ajouter une galerie » situé au-dessus de la barre d'outils de l'éditeur d'articles.
Cela ouvrira une fenêtre contextuelle où vous pourrez sélectionner la galerie que vous venez de créer et l'insérer dans votre article ou page WordPress.
Vous pouvez maintenant mettre à jour votre article ou votre page pour enregistrer vos modifications et prévisualiser votre site Web pour voir votre portfolio filtrable en action.
Si vous souhaitez en savoir plus sur ce que vous pouvez faire avec Envira Gallery, consultez ces tutoriels :
- Comment créer une galerie d'images dans WordPress (étape par étape)
- Comment ajouter une galerie dans WordPress avec un effetLightbox
- Comment ajouter automatiquement un filigrane aux images dans WordPress
Méthode 2 : Créer un portfolio filtrable à l'aide de WPFilters (recommandé pour les projets)
WPFilters est le meilleur plugin de filtrage de contenu pour WordPress. Il vous permet d'ajouter un tri de type Amazon à votre site et fonctionne parfaitement pour les études de cas de projets et les pages de projets détaillées.
Il permet à vos visiteurs de filtrer votre travail par catégorie, tag ou champs personnalisés sans recharger la page. Il hérite également automatiquement du style de votre thème grâce aux blocs natifs, vous n'avez donc pas à vous soucier des ajustements CSS manuels.
Nous avons testé en profondeur WPFilters pour voir comment il se compare aux autres solutions. Pour en savoir plus sur notre expérience, consultez notre avis complet sur WPFilters.
Configuration des paramètres du plugin
Tout d'abord, vous devez installer et activer le plugin WPFilters. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Lors de l'activation, l'assistant de configuration se lancera automatiquement. Cliquez sur le bouton « Commencer » pour débuter.
J'ai trouvé que l'assistant d'intégration est incroyablement efficace. J'ai pu passer de l'installation à un bloc de filtrage entièrement fonctionnel en moins de 5 minutes.
Astuce de pro : Si vous êtes un développeur utilisant Advanced Custom Fields (ACF), vous adorerez le fait que WPFilters détecte automatiquement vos données ACF. C'est un gain de temps considérable car vous n'avez pas à mapper manuellement les champs personnalisés à vos filtres.
Sur l'écran suivant, il vous sera demandé : « Quel type de données votre site Web utilise-t-il pour le filtrage ? » Cela indique au plugin le type de contenu que vous avez sur votre site.
Pour un portfolio standard, vous devez cocher les cases « Catégorie WordPress » et « Étiquette WordPress ».
Cependant, si vous créez un portfolio de produits pour vendre votre travail, assurez-vous de cocher les options « Catégorie WooCommerce » et « Prix WooCommerce ».
Si vous avez un très grand portfolio avec des sous-catégories profondes, j'ai remarqué que WPFilters gère magnifiquement l'imbrication hiérarchique en indentant automatiquement les catégories enfants. Cela évite un long mur de texte et rend la navigation dans les listes de projets complexes beaucoup plus facile pour vos clients.
Lorsque vous cliquerez sur le bouton « Enregistrer et continuer », il vous sera demandé d'entrer votre clé de licence, que vous trouverez dans votre espace client sur le site Web de WPFilters.
Sur l'écran final, vous verrez un message de succès. Cliquez simplement sur le bouton « Enregistrer et terminer » pour finaliser la configuration.
Personnalisation de vos filtres de portfolio
L'assistant de configuration crée automatiquement des filtres pour vous en fonction de vos choix. Cependant, vous voudrez peut-être personnaliser leur apparence.
Allez simplement dans WPFilters » Éléments depuis votre tableau de bord WordPress. Ici, vous verrez les filtres que l'assistant de configuration a créés pour vous, tels que « Catégorie WordPress » et « Étiquette WordPress ». Dans ce tutoriel, nous allons filtrer notre portfolio par catégorie.
Personnalisons le filtre de catégorie. Vous devez cliquer sur l'icône en forme de crayon à côté de l'élément « Catégorie WordPress » pour le modifier.
Cela ouvrira l'éditeur de filtre.
Vous pouvez voir que la source de données est déjà définie sur « Catégories ».
Prenez un moment pour vous familiariser avec les paramètres de cette page. Pour rendre le filtre plus utile, je recommande d'activer l'option « Nombre d'éléments » dans la section Éléments.
Cela affiche le nombre de projets dans chaque catégorie à côté du nom du filtre (comme « Conception Web (12) »), ce qui aide les visiteurs à voir la quantité de contenu dont vous disposez.
Une fois que vous êtes satisfait de vos paramètres, cliquez sur le bouton « Enregistrer » dans le coin supérieur droit.
Afficher votre portfolio filtrable
Maintenant que vous avez personnalisé votre filtre, vous devez l'ajouter à votre site Web. La meilleure chose à propos de WPFilters est qu'il fonctionne facilement avec le bloc natif Boucle de requête WordPress.
Le bloc Boucle de requête est la solution intégrée de WordPress pour afficher du contenu dynamique. Il fonctionne parfaitement avec WPFilters pour créer des affichages de contenu filtrables.
Modifiez simplement la page où vous souhaitez que votre portfolio apparaisse.
Tout d'abord, ajoutez le bloc « Élément WPFilters » à la page. Dans les paramètres du bloc à droite, assurez-vous que votre filtre « Catégorie WordPress » est sélectionné.
Ensuite, juste en dessous du filtre, ajoutez un bloc Boucle de requête.
Vous pouvez choisir un modèle « Grille » ou « Liste » qui convient à votre conception.
Dans les paramètres du bloc à droite, trouvez la section « Paramètres ». Assurez-vous de sélectionner le type de requête « Personnalisé » et le type de publication « Articles ».
Cela garantira que le bloc affiche vos articles plutôt que la page actuelle.
Astuce d'expert : Bien que le bloc Boucle de requête soit puissant, il peut être difficile à configurer correctement pour les débutants. Si vous ne voyez pas vos éléments, vérifiez que vous avez sélectionné le bon type de publication dans les paramètres du bloc.
C'est tout ! Vous pouvez maintenant prévisualiser votre page.
Lorsque vous sélectionnez une catégorie dans le filtre, la liste des articles sera instantanément mise à jour pour afficher les résultats.
Note : Les filtres peuvent également être ajoutés à une barre latérale sous forme de widgets ou de blocs. Utilisés de cette manière, ils interagiront automatiquement avec d'autres requêtes de page principales telles que les listes de produits WooCommerce, les archives d'articles de blog ou tout autre contenu rendu à l'aide d'une boucle WP_Query.
Tutoriel vidéo
Foire aux questions sur les portfolios filtrables
Voici quelques-unes des questions les plus fréquemment posées par nos lecteurs concernant la création de portfolios filtrables dans WordPress.
1. Quel est le meilleur plugin WordPress pour un portfolio filtrable ?
Le meilleur plugin dépend de votre contenu spécifique. Pour les portfolios basés sur des images (comme la photographie ou le design graphique), Envira Gallery est le meilleur choix car il se concentre sur une présentation visuelle de haute qualité.
Cependant, pour les portfolios basés sur des projets (comme des études de cas, des articles de blog ou des annonces immobilières), WPFilters est supérieur car il vous permet de filtrer le contenu WordPress existant par catégorie, tag ou champ personnalisé.
2. Puis-je créer un portfolio de produits filtrable pour WooCommerce ?
Oui. WPFilters est spécifiquement conçu pour fonctionner de manière transparente avec WooCommerce. Il vous permet de créer un portfolio de produits où les clients peuvent filtrer les articles par prix, attributs de produit (comme la taille ou la couleur) et catégories, offrant une expérience d'achat similaire à celle d'Amazon.
3. Les utilisateurs doivent-ils recharger la page pour voir les résultats filtrés ?
Non. Envira Gallery et WPFilters utilisent la technologie Ajax. Lorsqu'un visiteur clique sur un filtre, le contenu se met à jour instantanément sans recharger la page. Cela garantit à vos visiteurs une expérience rapide et fluide.
4. Puis-je ajouter des vidéos à mon portfolio filtrable ?
Oui, si vous choisissez Envira Gallery, vous pouvez installer le module complémentaire spécifique pour les vidéos. Cette extension vous permet d'inclure des vidéos YouTube, Vimeo et des vidéos hébergées localement dans votre portfolio filtrable aux côtés de vos images.
5. Ces plugins de portfolio fonctionneront-ils avec mon thème WordPress ?
Oui. Envira Gallery et WPFilters sont conçus pour fonctionner avec n'importe quel thème WordPress correctement codé. Ils s'intègrent également facilement aux constructeurs de pages populaires comme SeedProd, Divi et Elementor, vous permettant de placer votre portfolio n'importe où sur votre site.
Ressources supplémentaires et prochaines étapes
Maintenant que vous savez comment créer un portfolio filtrable, vous voudrez peut-être explorer d'autres façons d'améliorer les galeries et les images de votre site. Consultez ces guides utiles :
- Meilleurs plugins de galerie photo WordPress – Consultez notre comparaison experte des meilleurs plugins de galerie pour vous assurer d'utiliser le meilleur outil pour le travail.
- Comment ajouter une galerie avec un effet Lightbox – Faites ressortir vos images de portfolio en permettant aux utilisateurs de les voir dans une belle superposition de lightbox.
- Comment ajouter automatiquement un filigrane aux images – Protégez votre travail acharné en ajoutant automatiquement votre logo ou un filigrane à chaque photo que vous téléchargez.
- Comment créer une galerie d'images de produits WooCommerce – Si vous vendez vos photos ou votre art en ligne, ce guide vous montrera comment créer de superbes galeries de produits pour votre boutique.
- Comment créer une galerie d'images dans WordPress – Un excellent rappel des bases de la création de galeries d'images belles et réactives.
Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Dennis Muthomi
Les galeries filtrables sont un indispensable pour les créatifs.
Une astuce utile que j'ai apprise est de créer un système de tags standardisé avant de configurer vos tags Envira Gallery. Je fais cela avec tous mes clients photographes. Je m'en tiens à des tags cohérents comme « mariage », « portrait » et « commercial » dans leur travail. C'est très utile pour deux raisons :
– Facilite grandement la maintenance du portfolio
– Crée une meilleure expérience de filtrage pour les visiteurs
Au fait, l'extension Tags que vous avez mentionnée a été parfaite pour mettre en œuvre ce système !
Haim
Toutes les galeries photo que j'ai trouvées jusqu'à présent et qui prennent en charge les étiquettes permettent de filtrer une seule étiquette à la fois. J'aimerais mettre en place une galerie où je peux filtrer en fonction de plusieurs étiquettes pour obtenir les photos qui ont TOUTES les étiquettes. Pour cela, la sélection des étiquettes devrait être sous forme de cases à cocher pour permettre de cocher plus d'une. Quelqu'un peut-il me indiquer une telle solution pour WP ? Merci.
divp
bien joué, continuez à partager
Lewis
Article vraiment génial, j'ai adoré ce thème et je vais bientôt engager un développeur web pour me construire un thème comme celui-ci. Merci !