Lister, Filtrer, Trier et Rechercher ses Articles WordPress dans un Tableau avec Posts Table with Search & Sort

Il y a quelques années j’ai publié un article sur les plugins permettant de faire des tableaux (ou tables) comparatifs de prix, ou des tableaux de manière générale sur son site WordPress. Ce genre de plugins est beaucoup utilisé de part leur utilité dans divers sites.

Ceci étant dit, aujourd’hui je vous propose de voir ensemble un autre type de plugin (on verra un seul qu’on décortiquera tout au long de l’article). Il s’agit d’implémenter un tableau affichant une liste d’articles provenant de son propre blog. Dans ce tableau, les articles peuvent être triés selon la catégorie, le titre, l’auteur, la date, etc. Enfin, un champs « Recherche » est également proposé en haut du tableau, et permettant aux utilisateurs de rechercher un ou plusieurs articles au sein du tableau.

A vrai dire, il est toujours appréciable de pouvoir trouver un « petit » plugin pouvant répondre à un besoin aussi spécifique, parce que parfois, en tant que webmaster, on se retrouve à bidouiller cela à la main avec du code personnalisé ou à utiliser un autre plugin dont l’objectif premier est différent et que l’on adapte pour répondre à notre besoin.

Ce plugin porte le nom de Posts Table with Search & Sort : disons qu’il porte bien son nom!

1. Posts Table with Search & Sort : Son utilité & Quelques exemples d’utilisation

Lorsque l’on est sur sa page de blog, on ne se pose pas la question de pouvoir afficher ses articles et de les trier : c’est fait par défaut.

Cependant, lorsqu’on se retrouve sur une page de son site autre que celle du blog, il arrive que l’on veuille afficher du contenu quelconque (texte, images, vidéo) puis d’intégrer une liste de ses articles de blog provenant d’une catégorie spécifique, par exemple. Et si la liste est longue, il faut faire en sorte qu’elle puisse être accessible via un champs de recherche et pourquoi pas triée selon les colonnes proposées (titre, date, auteur, tag..).

Exemple 1 : Bibliothèque de Nouvelles en ligne

Imaginons que vous êtes un nouvelliste, auteur de nouvelles en ligne. Vous détenez donc un site web de nouvelles publiées en ligne. Ces nouvelles sont publiées sur votre blog et sont classées par catégories (Fiction, Fantastique, Réalisme,etc.).

Le blog est « juste » une section de votre blog. Vous avez donc un site complet au sens propre du terme : page d’accueil, page de présentation, page de services, page de contact, blog, boutique en ligne, etc.

Imaginons maintenant que vous proposez vos services de rédaction de nouvelles en ligne. Dans votre page de services, vous allez présenter vos prestations que vous pouvez diviser par catégories qui correspondraient à celles de votre blog. Donc typiquement, vous aurez le paragraphe « Fiction » que vous présenterez par du texte, image ou vidéo et accompagnés d’un tableau d’articles de la catégorie « Fiction » du blog illustrant votre présentation et permettant à vos potentiels clients de parcourir les différents articles relatifs à cette catégorie. Etant donné que vous avez publié une bonne vingtaine d’articles dans cette catégorie, ce serait de servir vos lecteurs que de leur proposer une option de recherche et de tri dans cette table d’articles!

Exemple 2 : Boutique de vente de produits cosmétiques naturels & bio

Vous êtes un spécialiste de produits cosmétiques naturels de renom. Vous détenez une boutique e-commerce via laquelle vous vendez vos produits. Et afin de partager vos connaissances et votre expertise dans le domaine, vous y gérez un blog sur lequel vous publiez des articles intéressants sur le domaine. Vous travaillez par la même occasion votre content management, et donc votre référencement.

Maintenant, en atterrissant sur votre page Boutique, la plupart des visiteurs ne pensent pas forcément à se rendre à la section Blog. Ils contemplent les différents produits, défilent vers le bas, cliquent sur certains produits, lisent les descriptions et restent plus ou moins hésitants. Il leur manque ce « push » pour les faire convaincre, ou du moins les faire réfléchir davantage.

Arrivent maintenant tous les articles que vous avez pris tant de peine à rédiger et perfectionner, et qui vont vous aider à déclencher ce « push » chez vos visiteurs.

En effet, vous pouvez maintenant insérer sur la page de votre boutique ou même de chacun de vos produits, une table d’une ou plusieurs catégories de vos articles. Cette liste d’articles vient renforcer votre stratégie de vente en montrant, d’une part, qu’en tant que propriétaire de la boutique vous avez une bonne expertise dans le domaine : une relation de confiance commence alors à se former. D’autre part, vous permettez à vos potentiels clients de se renseigner davantage sur vos produits et la thématique de votre niche de manière générale : une familiarité avec les produits se crée alors.

Exemple 3 : Journal en ligne

Vous détenez un journal en ligne ou un magazine web. Votre site doit contenir pas moins de 500 articles dans divers thématiques, catégories, sujets. A un certain moment sur votre site, vous éprouvez le besoin d’afficher une liste d’articles d’un certain type/catégorie/auteur/ou peu importe. Le visiteur doit pouvoir naviguer facilement dans cette liste : effectuer une recherche, trier par titre, catégorie, date ou auteur.

Posts Table with Search & Sort vient alors vous sauver la vie.

Exemple 4 : Répertoire d’items en ligne

Aller, un dernier pour la route.

Je vais donner ici un exemple relatif à ma propre thématique, mais que vous pouvez adapter à votre business.

J’utilise beaucoup de thèmes WordPress premium pour mes sites clients et perso. Inutile de vous parler des gros avantages de ces thèmes ici. Le truc c’est que avant chaque projet, je me retrouve à fouiller ici et là pour trouver LE thème qui va me permettre de créer mon joli site. Et du coup, je commencer à parcourir mes sélections de thèmes WP que j’ai pu publier ici sur ce blog. Puis je me rends sur ThemeForest qui propose un répertoire de plus de 10 000 thèmes WordPress pour différentes thématiques. Sinon, je finis par taper sur Google le type de thème que je recherche pour tomber sur des sélections d’autres blogueurs. Du coup, ce que j’ai fait dernièrement c’est que j’ai publié une méga sélection de thèmes WordPress divisée en plusieurs parties pour couvrir le maximum de thématiques et de niches. Maintenant, j’ai (mes lecteurs aussi ont) une base de thèmes pour mes prochains projets.

Maintenant, cette base peut être mieux organisée et surtout afin de faire profiter à mes lecteurs, il serait bien plus intéressant de pouvoir insérer une partie ou la liste entière de mes sélections de thèmes, sur des pages ou des articles spécifiques. En effet, imaginons que je rédige un article sur l’installation d’un thème WordPress. Il serait bien intéressant de pouvoir mettre à disposition des lecteurs une base (donc une table) de tous mes articles présentant des thèmes WP afin qu’ils puissent parcourir et choisir le thème à installer sur leur site.

Notre petit plugin que l’on va étudier ci-après va donc nous aider à faire cela assez facilement. Et puis ce sera, par la même occasion, un bon moyen de faire du maillage interne et d’améliorer donc le référencement de certains de nos articles!


Bien. Maintenant que nous avons vu quelle peut être l’utilité d’un tel plugin, je vous propose de passer au vif du sujet.

2. Posts Table with Search & Sort : Comment créer sa table d’articles avec les fonctions de recherche et de tri

Sans plus tarder, commençons par installer et activer le plugin. Vous remarquerez qu’aucun item ou sous-menu ne s’est ajouté à votre tableau de bord. Rien à configurer donc!

Tout le travail se fait à l’aide d’un seul shortcode avec divers options permettant de contrôler et personnaliser le contenu du tableau. Ce shortcode est le suivant :

[posts_data_table]

Il utilise le plugin jQuery DataTables pour fournir les fonctionnalités de recherche et de tri, ainsi que la pagination et les layouts responsive pour les écrans plus petits.

Le plugin est également compatible avec WPML, ce qui signifie que si vous utilisez WPML pour votre site multilingue, alors les articles affichés seront uniquement ceux de la langue en place.

2.1. Liste d’options du shortcode [posts_data_table]

  • columns : permet de spécifier les colonnes que l’on souhaite afficher dans le tableau. Voici la liste complète des colonnes : id, title, content, category, tags, author, date. Les colonnes qui sont affichées par défaut lorsque rien n’est spécifié sont : title, content, date, author, category.
  • rows_per_page : permet de spécifier le nombre d’articles dans chaque page du tableau. La valeur par défaut est de 20 articles. Si vous souhaitez désactiver la pagination vous mettez la valeur ‘false’.
  • category : permet d’afficher uniquement les articles de la catégorie spécifiée. Pour cela, il faut saisir le ID ou l’identifiant (se trouve dans la page ‘Articles > Catégories’, la colonne ‘identifiants’) de la catégorie. Note : n’utilisez pas le NOM de la catégorie.
  • tag : idem que pour la catégorie, mais cette fois pour les tags.
  • sort_by : permet de spécifier une colonne pour le tri du tableau. Lorsque rien n’est spécifié, la colonne ‘date’ est sélectionnée par défaut. Si la colonne avec laquelle vous souhaitez trier par défaut votre tableau n’est pas affichée dans le tableau, alors elle sera ajoutée en tant que ‘hidden column’ (colonne cachée). Donc la fonction de tri fonctionnera bien comme prévu.
  • sort_order : permet de trier la colonne spécifiée par l’option « sort_by » par ordre ascendant (‘asc’) ou descendant (‘desc’).
  • search_on_click : permet de rechercher en filtrant automatiquement le tableau en cliquant sur certains liens dans celui-ci. Dans la version gratuite du plugin, on se limite aux catégories et auteurs. La version premium s’étend aux tags et custom taxonomies. Exemple : Dans la colonne « Catégories », on clique sur le lien d’une catégorie donnée. Le tableau sera alors trié et affichera donc des résultats de recherches des articles de la catégorie sélectionnée. La valeur par défaut de cette option est à « true ».
  • wrap : permet ou empêche le retour automatique à la ligne. La valeur par défaut est « true ». Lorsque vous mettez cette option à « false », un icon « + » apparaît à gauche de chaque ligne permettant d’accéder au reste des colonnes du tableau.
  • content_length: permet de définir le nombre de mots à afficher du contenu de l’article, si vous avez au préalable inclus la colonne ‘content’. La valeur par défaut est de 15 mots.

Maintenant que nous avons vu en détail le seul shortcode à utiliser avec toutes ses options, voyons comment en faire usage à travers quelques exemples.

2.2. Quelques exemples de table d’articles

Commençons par voir une version classique du tableau, avec les options de base : donc on change (presque) rien aux options.

A – Exemple basique : tous les paramètres sont par défaut

On affiche tous les articles (toutes catégories, auteurs, tags, dates) du blog. Et pour éviter de se répéter avec un exemple supplémentaire, je vais aussi utiliser l’option ‘rows_per_page’ pour afficher uniquement 4 lignes par page (la valeur par défaut étant 20). Voici le shortcode à utiliser :

[posts_data_table rows_per_page="4"]

Plugin WordPress : Posts Table with Search & Sort

Et le tour est joué.

Toutes les valeurs étant par défaut (sauf le nombre de lignes par page), vous remarquerez que le tableau est trié par défaut selon la colonne de date.

Par ailleurs, même si l’on a défini au préalable le nombre de lignes souhaitées par page, il est toujours possible de changer ce paramètre via le menu déroulant « Afficher X éléments ». Les valeurs proposées sont 10, 25, 50 et 100.

Enfin, dernière remarque, le style du tableau différera forcément d’un site à l’autre. Chacun de nous utilisant des thèmes différents, donc des feuilles de styles différentes, cela affecte par conséquent le style du tableau, mais pas de trop. Par exemple, dans mon tableau mes colonnes ne sont pas séparées par des lignes verticales.

Avant de passer au second exemple, je vais montrer deux autres exemples utilisant ce même tableau et illustrant deux autres options du tableau :

Exemple 1 bis : Rechercher un ou plusieurs articles dans le tableau

je vous montre ci-dessous un exemple de recherche effectuée dans la barre de recherche au-dessous de ce même tableau en tapant par exemple le mot clé ‘migrer site wordpress‘.

Exemple de recherche d'articles dans le plugin Posts Table with Search & Sort

Les résultats s’affichent en direct au fur et à mesure que l’on tape les mots-clés.

Dans cet exemple, les résultats de recherche affichent 3 articles répondant à la requête demandée.

 

Exemple 1 ter : De la recherche par clic sur les liens du tableau

Comme on l’a vu dans la liste des options, ‘search_on_click’ permet de faire une recherche en filtrant automatiquement le tableau lorsqu’on clique sur un lien.

Qu’est-ce que ce lien? En fait, vous verrez que les catégories et les auteurs affichés dans le tableau sont en réalité des liens non pas redirigeant vers d’autres pages (de catégorie ou auteur en question) mais permettant de faire en sorte de filtrer en direct et automatiquement le tableau selon la catégorie ou l’auteur qu’on a cliqué dessus.

Par exemple, on souhaite afficher en premier dans le tableau les articles appartenant à la catégorie « Plugins », même si ils appartiennent en même temps à d’autres catégories.

Search on click avec le plugin Posts Table with Search & Sort

Donc j’ai cliqué sur ‘Plugins’ dans la colonne ‘Catégories’, et cela m’affiche maintenant en premier les articles appartenant à cette catégorie.

 

B – Des articles triés par leur titre par ordre descendant, un ordre de colonnes différent avec une en moins & un contenu moins long

Cette fois-ci on souhaite trier les articles par leur titre, mais par ordre descendant parce que j’ai fait le test par ordre ascendant et ça me donne dans mon cas les premières pages avec des articles de type « 20 Thèmes.. | 5 Plugins.. | 10.. »! Pas très idéal pour l’exemple du coup. Sinon, pour garder un ordre ascendant, c’est la valeur par défaut donc on ne touche à rien.

On va par la même occasion changer l’ordre des colonnes pour afficher la date en premier, suivent ensuite l’auteur, le titre et l’extrait de contenu. J’enlève les catégories, dans certains sites on aime bien les éviter. Et parce que 15 mots pour l’extrait ça donne des tableaux à rallonge, je vais diviser cela par 2 environ pour ne laisser que 7 mots. Ça m’a l’air bien propre maintenant.

Ce qui donne le shortcode suivant :

[posts_data_table sort_by="title" sort_order="desc" columns="date,author,title,content" content_length=7 rows_per_page="4"]

 

Des articles triés par leur titre par ordre descendant avec le plugin Posts Table with Search & Sort

Voilà. Je trouve cela déjà bien plus organisé et plus synthétique. C’est vrai qu’avec la colonne Catégories c’est plus parlant, mais il fallait un exemple pour l’illustration.

En parlant de catégories, suivez-moi pour le prochain exemple.

 

C – Afficher les articles d’une certaine catégorie

Tout est dit dans le titre. On va sélectionner par exemple la catégorie ‘Tutoriels’ dans ce blog. Attention, comme précisé plus haut, il faut saisir le ID ou l’identifiant (se trouve dans le menu ‘Articles > Catégories’, la colonne ‘identifiants’) de la catégorie. Et ne surtout pas utiliser LE NOM de la catégorie.

On garde le même ordre de colonnes que l’exemple précédent.

Cela donne le shortcode suivant :

[posts_data_table columns="date,author,title,content" category="wordpress-tutoriels" rows_per_page="4"]

 

Afficher les articles d'une certaine catégorie avec le plugin Posts Table with Search & Sort

Ce type de tableau est très utile lorsque l’on veut présenter la liste de ses articles d’une certaine catégorie ou thématique de son blog dans une autre page de son site discutant de cette thématique.

 

D – Empêcher le retour automatique à la ligne

On finit par cet exemple.

Vous avez dû remarquer dans nos exemples que les titres et le contenu s’étalent sur plusieurs lignes du tableau. Pour des pages de tableau à 4 ou 5 articles ce n’est pas bien grave. Mais si l’on se mettait à afficher des pages à 20 ou 30 articles, cela devient vite très encombrant.

Pour garder notre tableau le plus esthétique possible, on va empêcher cet étalement sur plusieurs lignes.

On utilise le shortcode du premier exemple (par défaut) avec l’option ‘wrap’ :

[posts_data_table wrap="false" rows_per_page="10"]

Empêcher le retour automatique à la ligne avec Posts Table with Search & Sort

Les titres occupant toute la largeur du tableau, toutes les autres colonnes sont alors cachées en-dessous du titre. elles sont visibles en cliquant le petit ‘+’. Dans d’autres cas, on peut avoir plusieurs colonnes affichées et le reste caché.

 

3. Posts Table Pro : pour les custom post types, images, vidéos, produits et plus!

Vous l’aurez compris, notre joli petit plugin gratuit a ses limites. Jusque là on a vu comment lister ses articles de blog dans tableau que l’on peut facilement trier et dans lequel on peut rechercher instantanément ses articles.

Mais comme vous le savez, on peut très bien avoir d’autres types de contenu dans son site!

Qu’en est-il des gens qui ont un portfolio de projets et qui veulent créer un tableau filtrable de leurs projets?

Ou des vendeurs qui proposent leurs produits en vente sur leur site?

Vous êtes plutôt vidéo? Ou images? Ou autre type de contenu?

Et bien il existe une version premium de notre plugin nommée Posts Table Pro, développé par Barn2 Media, une société implantée en Angleterre et spécialisée dans WordPress et les plugins WooCommerce.

Posts Table Pro : un Plugin WordPress pour Créer Instantanément des tables de contenu de tout type.

Que fait Posts Table Pro?

Il répond aux questions posées quelques lignes plus haut! 🙂

En effet, en plus des options proposées par la version gratuite, on a maintenant la possibilité de créer des tableaux de contenu de divers types : des produits de votre boutique WooCommerce, des vidéos, des images, des custom post types, des documents, des custom fields (champs personnalisés), etc.

Le principe est donc le même mais s’étend à davantage de types de contenu.

Vous pouvez avec cette version premium créer votre librairie de livres, de vidéos ou d’événements.

Par ailleurs sur certains sites, des contenus personnalisés sont proposés comme :

  • des cours en ligne,
  • des annonces,
  • des projets,
  • des recettes,
  • des coupons,
  • des podcasts,
  • des hôtels,
  • et la liste est longue…

Je vous recommande vivement de jeter un œil à la page de démo ici présentant quasiment tous les cas d’utilisations, les fonctionnalités proposées et des exemples de tableaux créés pour chaque cas.

En terme de tarif, c’est du 75$ (~60€) par site sans abonnement. Un tarif très abordable et mérité pour ce que le plugin propose. Et le gros avantage c’est que c’est du paiement lifetime.

Du coup, si vous voulez vous procurer Posts Table Pro, c’est par ici :

Je le veux ce plugin!

 

Conclusion

Nous avons vu à travers cet article qu’il était en réalité assez simple de créer un tableau d’articles filtrable que l’on peut trier ou parcourir en utilisant l’option de recherche.

Ce type de tableaux se révèle utile dans plusieurs cas d’utilisation pour créer : son répertoire d’articles, d’annonces, de produits e-commerce, de projets, de vidéos, d’audios, sa librairie de livres, et les possibilités sont infinies.

Nous avons étudié le plugin gratuit Posts Table with Search & Sort qui nous a permis de créer presque instantanément des tables d’articles de notre blog. Ces tables peuvent être personnalisées et triées selon la colonne et les filtres souhaités.

Ce plugin se limite cependant aux articles de blog. Une version premium Posts Table Pro vient alors compléter le premier en proposant la création de tableaux de tout type de contenu, mentionné plus haut.

Maintenant que j’ai fait ma part de travail, je vous passe la parole en demandant la question suivante : Est-ce que vous avez déjà eu l’occasion ou le besoin d’utiliser un tel plugin? Pour quel type de projet? Et si c’est sur un site déjà en ligne, je vous invite à partager avec nos lecteurs le lien de votre site pour avoir un exemple concret!

Vous remerciant d’avance,

Anouar Fourti

Cet article vous a plu?

Abonnez-vous alors à notre newsletter pour recevoir des trucs utiles pour votre site WordPress.

Laisser un Commentaire

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

101 Thèmes WordPress pour Créer ou Relooker votre Site en 2018Voir les Thèmes
+ +

Recevez du contenu
WordPress exclusif

Abonnez-vous à notre newsletter et recevez des trucs utiles pour mieux utiliser votre site WordPress!