Comment ajouter des tableaux dynamiques dans WordPress sans HTML

La dernière fois que j'ai essayé d'ajouter un tableau à mon blog WordPress, j'ai fini par tout supprimer et utiliser une liste à puces à la place.

Semble familier?

De nombreux thèmes WordPress époustouflants offrent la possibilité de créer de superbes tableaux. Et bien sûr, ils peuvent sembler bons au début, mais vous ne pouvez pas faire grand-chose avec eux.

Vous voulez des données filtrables ? Non.

Vous voulez que la table soit adaptée aux mobiles ? Non.

Vous souhaitez importer des données depuis un CSV ? Aucune chance.

Voici la bonne nouvelle :

Avec le bon plugin, vous pouvez créer des tableaux dynamiques hautement fonctionnels. Le genre de chose qui vous permet d'afficher des données filtrables.

Avec des graphiques et toutes sortes.

Ça sonne bien ? Voyons comment cela peut être fait avec wpDataTables.

Noter: Bien que ce didacticiel se concentre sur les tableaux interactifs, vous trouverez peut-être utile notre didacticiel sur la création de tableaux réactifs mobiles avec wpDataTables. Cliquez ici pour le vérifier. Ce nouveau didacticiel prend en compte l'interface utilisateur mise à jour et les fonctionnalités supplémentaires récemment publiées dans wpDataTables.

Ce plugin vous permet de créer de beaux tableaux sans aucune connaissance HTML

wpDataTables est un plugin WordPress premium qui facilite le processus de création et de publication de tableaux sur votre site Web. Il est léger, intuitif et fait le travail en quelques minutes, vous laissant moins de code à parcourir et plus de temps pour bloguer.

L'un des points clés de ce plugin est que vous n'avez besoin d'aucune connaissance préalable en HTML pour le faire fonctionner. Tout se fait dans une page de paramètres facile à utiliser. Pour publier, il suffit simplement de copier et coller un shortcode et vous êtes prêt à partir.

Pour les blogueurs et les entreprises, c'est une excellente nouvelle car cela vous permet d'afficher de nombreuses données de manière succincte et facile à digérer.

Vous pourriez même l'utiliser pour :

• Un catalogue de produits
• Tableaux comparatifs des produits
• Listes de prix
• Collecte de données auprès des utilisateurs
• Résultats sportifs
• Suivre vos progrès pour tout ce qui implique des chiffres (par exemple, un rapport sur les revenus d'un blog)

Les possibilités sont infinies.

Création d'un tableau du début à la fin : un guide étape par étape

Utiliser le plugin wpDataTables pour créer de beaux tableaux clairs et entièrement fonctionnels sur votre site Web WordPress est simple.

Voici comment commencer :

Étape 1 – Préparez votre dossier

Ci-dessous, j'ai créé un exemple de document Excel pour un certain nombre de dépenses aléatoires. Cela comprend plusieurs colonnes telles que la date, le mode de paiement et le coût.

Assurez-vous que vos données sont affichées de la même manière, sinon le plugin aura du mal à définir les colonnes de votre tableau.

Étape 2 - Créer un nouveau tableau

Accédez aux wpDataTables sur le côté gauche de votre tableau de bord WordPress.

En cliquant sur ce lien, vous accéderez à l'écran ci-dessus. C'est ici que vous allez créer et ajouter votre nouveau tableau :

Après avoir cliqué sur le bouton "Ajouter un nouveau", vous verrez cet écran. C'est ici que vous commencerez à définir les paramètres de votre table, afin qu'elle fonctionne et ait l'apparence que vous souhaitez :

Étape 3 – Définissez les fonctionnalités de votre table

Dans les trois premières sections de la page de configuration du tableau, vous pouvez effectuer les actions suivantes :

• Créer un titre
• Indiquez si vous souhaitez afficher le titre de votre tableau sur la page
• Sélectionnez un type de source d'entrée pour votre tableau

Ce sont vos paramètres de table les plus élémentaires.

Cliquez sur "Télécharger le fichier" et recherchez votre document. Les tableaux que vous pouvez créer peuvent être aussi compliqués que vous en avez besoin.

Comme vous pouvez le voir, j'ai donné à mon tableau un titre pertinent, sélectionné le type de fichier Excel dans la liste déroulante et téléchargé mon fichier sur WordPress.

Plus bas sur la page, vous trouverez d'autres paramètres pour personnaliser votre tableau :

Ceux-ci sont:

• Responsive - Permet à votre tableau de s'afficher différemment sur les ordinateurs de bureau, les tablettes et les mobiles
• Scrollable - Vous permet de faire défiler votre tableau horizontalement
• Masquer le tableau jusqu'à ce que la page soit complètement chargée - Utile pour charger lentement les pages
• Filtrage avancé – Pour afficher un filtre sous chaque colonne
• Filtrer dans le formulaire – Pour un filtre dans le formulaire lui-même
• Outils de tableau - Pour des options telles que copier, enregistrer dans Excel et enregistrer dans CSV intégré dans votre formulaire
• Activer le tri – Cela vous permet de trier vos tableaux
• Limiter la disposition du tableau – Limite la largeur du tableau à 100 % du conteneur parent
• Longueur d'affichage – Définissez le nombre d'entrées affichées sur une page

En cliquant sur "Aperçu", vous pouvez afficher votre tableau et modifier les paramètres que vous jugez nécessaires pour lui donner l'apparence que vous souhaitez.

Une fois que vous avez sélectionné les options qui conviennent le mieux au type de tableau que vous souhaitez afficher, il est temps de cliquer sur le bouton « Enregistrer ».

Si vous souhaitez personnaliser davantage vos colonnes, une fois que vous avez cliqué sur "Enregistrer", vous pourrez faire défiler la page plus bas pour plus d'options. Les paramètres par défaut sont générés automatiquement, mais avec cela, vous pouvez modifier la couleur de chaque colonne, la colonne et le type de filtre (comme la date, l'heure et le texte).

Ci-dessous, j'ai ajouté des couleurs et modifié les types de colonnes en texte, nombre et chaîne.

Étape 4 - Enregistrer et copier le shortcode

Une fois que vous avez enregistré votre tableau, cliquez sur "Fermer" et il vous redirigera vers la page d'accueil du plugin. Vous devriez maintenant voir votre tableau que vous avez créé, le titre et le type de votre tableau, le shortcode à saisir dans votre message ou votre page et la possibilité de le dupliquer.

Je veux afficher ce tableau dans une page, donc je dois copier le shortcode puis naviguer vers la page que je souhaite modifier.

Étape 5 - Ajouter un shortcode à la publication ou à la page

Pour ajouter votre tableau à une page, c'est vraiment aussi simple que de coller votre shortcode dans l'éditeur de page. Sélectionnez l'endroit de la page où vous souhaitez afficher votre tableau, collez votre code et continuez à créer votre contenu :

Étape 6 - Publier

Une fois que vous avez cliqué sur le bouton Publier sur votre Page, votre tableau devrait ressembler à ceci. Comme vous pouvez le constater, il est clair, cohérent, parfaitement aligné et contient toutes mes données d'une manière facile à naviguer :

Les options en haut du tableau permettront aux utilisateurs d'exporter le contenu du tableau dans une variété de formats. Vous pouvez également filtrer facilement les résultats sur le front-end de votre site.

Quels autres tableaux pouvez-vous créer ?

Cependant, vous n'êtes pas limité aux simples tableaux basés sur CSV. Les tableaux de données WP peuvent afficher une large gamme de données dans plusieurs formats.

Voici un exemple de tableau entièrement fonctionnel, réactif et modifiable avec plusieurs colonnes et options.

Cette table est basée sur MySQL avec des filtres pour trier le contenu en fonction des besoins de l'utilisateur :

Cette table basée sur un tableau PHP est sérialisée et inclut des images - cela ajoute une dynamique et des fonctionnalités complètement différentes que de nombreux magasins de commerce électronique trouveraient particulièrement utiles :

Vous n'êtes pas non plus limité aux fichiers CSV. WP Data Tables permet également l'utilisation de fichiers basés sur Excel, vous permettant d'utiliser les nombreuses fonctionnalités spécifiques qui l'accompagnent :

Autres fonctionnalités de wpDataTable à mentionner

• Assistant wpDataChart - Vous permet de transformer vos données en graphique ou en tableau en quelques étapes simples. Il prend actuellement en charge 3 moteurs de rendu - Google Charts, Highcharts et Chart.js. Trouvez plus de documentation ici.
• Mise en forme conditionnelle - Vous permet de mettre en surbrillance des cellules, des lignes et des colonnes en fonction de leur contenu. C'est utile surtout si le tableau est entièrement numérique. Trouvez plus de documentation ici.
• Colonnes de formules – Vous permet d'ajouter une colonne qui peut être utilisée pour calculer un chiffre basé sur les nombres indiqués dans d'autres cellules. Trouvez plus de documentation ici.
• Colonnes Datetime - Utilisées pour les cellules contenant à la fois des dates et des heures. Ils apparaîtront automatiquement dans le format que vous avez défini sur la page des paramètres. Trouvez plus de documentation ici.
• Ligne Somme/Totaux – Utilisée pour les colonnes numériques, elle vous permet de calculer la somme de toutes les valeurs. Trouvez plus de documentation ici.
• Générateur de rapports - Est un module complémentaire pour wpDataTables. Report Builder crée instantanément des documents et des feuilles de calcul remplissant vos modèles avec les données réelles de votre site WordPress. Trouvez plus de documentation ici.
• Tables maître-détail - Est un module complémentaire pour wpDataTables qui vous permet, ainsi qu'aux visiteurs de votre site, de voir les détails de chaque ligne d'un simple clic. Trouvez plus de documentation ici.

Dernières pensées

Les tableaux sont un excellent moyen d'afficher des données. Et lorsque vous ajoutez des fonctionnalités dynamiques telles que le filtrage, vous améliorez considérablement les choses pour les visiteurs de votre site Web.

Je vous ai expliqué comment créer un tableau dynamique dans WordPress en téléchargeant des données depuis Microsoft Excel (ou en utilisant tout autre tableur). Mais il y a tellement plus de possibilités.

Vous pouvez même transformer n'importe lequel de vos tableaux en tableaux ou en graphiques, et plus encore.

Maintenant, il est temps de commencer sur votre propre table - profitez-en !

Lecture connexe : 5 plugins de table réactifs puissants et mobiles pour WordPress.

Divulgation: Ce message est sponsorisé mais nos opinions sont les nôtres.