Creer un tableau avec filtre,pagination avec wordpress (tuto avec images)

Si vous utilisez wordpress, et que vous souhaitez afficher dans un article un tableau avancé (avec la possibilité de filtre, classement,…), voici un guide qui va vous aider.

Afficher un tableau avec filtre sur wordpress est réalisable rapidement grâce au plugin gratuit TablePress. Ce plugin est basé sur le script datatable. Le plugin a dépassé le million de téléchargement, et c’est normal, c’est le plugin le PLUS COMPLET pour afficher un tableau sur WordPress.

Grâce au plugin gratuit TablePress, et ses nombreux plugins (gratuits/payants) vous pouvez, entre autre :

  • Importer un tableau (format supporté : html,json,csv,xls,xlsx)
  • Afficher/Masquer des colonnes ou des lignes
  • Afficher un tableau avec la fonction : filtre, classement, pagination…

 

Etape 1 : Télécharger le plugin TablePress

Cliquez ici pour télécharger la dernière version du plugin (téléchargement via le site officiel de wordpress.org)

Etape 2 : Installer et activer le plugin TablePress

Installez puis activez le plugin comme tous les autres plugins wordpress.

  • Interface Admin > Extensions > Ajouter > Importer Fichier Zip

Etape 3 : comment utiliser le plugin TablePress

La meilleure explication est une explication en image. Voici donc un guide en image sur comment utiliser TablePress et afficher un tableau en quelques minutes sur un site WordPress.

Je vais créer un tableau qui liste les principaux annuaires français pour ajouter son site. Le tableau sera disponible d’ici quelques jours, ainsi qu’un petit guide qui explique comment j’ai créé le listing.

1- J’ai réalisé mon tableau sur excel. Je commence par faire un copier de la sélection du tableau que je souhaite

tablepress-1

Les 2 étapes suivantes vont me permettre de récupérer facilement et en 3 clics le code HTML de mon tableau excel. Si vous avez une autre idée (aussi rapide), n’hésitez pas à nous l’indiquer en commentaire

2- Dans mon interface admin de wordpress, je crée un nouvel article

  • Interface Admin > Articles > Ajouter

Et je colle mon tableau dans la partie VISUEL

tablepress-2

3- Dans la page de l’article, dans l’éditeur, je clique sur l’onglet TEXTE pour récupérer le code HTML du tableau qu’on a importé d’excel. Copier tout le code html

tablepress-3

4- Allez dans les pages dédiées du plugin TablePress, et cliquez sur Importer un tableau

tablepress-4

5- Dans la page importer un tableau, sélectionnez les paramètres suivants :

  • Source de l’import : entrée manuelle
  • Importer des données : coller ici le code html récupérer à l’étape 3
  • Format de l’import : HTML

Puis, cliquez sur Importer

tablepress-5

6-  Votre tableau est à présent créé. Dans les options du tableau, vous pouvez choisir un nom du tableau, une description, et vous avez une multitude d’autres options

Vous pouvez choisir de masquer une colonne, une ligne, masquer la pagination, afficher la description,…

Bref, c’est vraiment complet.

Pour finir, vous pouvez simplement afficher le tableau grâce au code affiché à coté du mot « Raccourci : », [table “XXX” not found /]

Copiez ce code dans un article wordpress ou une page wordpress, et votre tableau s’affichera

Et voilà, vous avez créer en quelques minutes un tableau sur wordpress,  à partir d’un tableau excel.

tablepress-6

tablepress-7

De nombreuses extensions gratuites existent pour ce plugin, et les extensions sont téléchargeables sur le site de l’éditeur ici. Il y a un plugin pour afficher du code php, pour rendre le tableau responsive, rajouter des boutons, ect.

Téléchargez le plugin gratuit TablePress

N’hésitez pas à partager cette article. Merci