TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

172

Dans notre article précédent, nous avons vu comment ajouter des tables dans un site WordPress en utilisant différentes méthodes. L’éditeur de blocs Gutenberg a un bloc de table intégré rendant l’utilisation du plugin d’ajout obsolète. Cependant, TablePress est l’un des plugins permettant aux utilisateurs d’ajouter facilement une table attrayante sur le site WordPress. Dans cet article, explorons les fonctionnalités et comment utiliser le plugin TablePress.

Apprendre WordPress : Découvrez plus de 400 tutoriels WordPress gratuits.

Pourquoi le plugin TablePress ?

Accédez à l’option "Plugins> Ajouter un nouveau" dans le tableau de bord d’administration WordPress et recherchez le mot-clé "Table". Vous trouverez des milliers de plugins pour créer différents types de tableaux et la recherche de "tablepress" affichera le plugin TablePress sur la première page.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Plugin WordPress TablePress

  • C’est un plugin gratuit complet de l’auteur Tobias Bäthge. Bien que les extensions soient proposées sous forme de plugins premium distincts, il n’y a pas de bannières ou de liens intrusifs vous demandant de mettre à niveau à partir du tableau de bord.
  • Plus de 800 000 installations actives avec une note de 5 étoiles de presque 4 000 utilisateurs ne peuvent pas être un mauvais jugement.
  • Documentation correcte et très bon support sur le forum.
  • Créez des tableaux d’apparence uniforme sur le site et personnalisez également l’apparence d’un tableau particulier à l’aide de CSS personnalisé.

Caractéristiques du plugin TablePress

Le plugin a les fonctionnalités suivantes qui sont suffisantes pour créer des tableaux pour la plupart des usages généraux :

  • Les tableaux peuvent être créés et intégrés sur n’importe quelle page de votre site en tant que shortcode.
  • Importez des tableaux de Microsoft Excel aux formats XLS, XLSX et CSV. L’importation par copier-coller manuel et à partir du format JSON/HTML est également possible.
  • Les tableaux peuvent être exportés aux formats CSV, JSON et HTML.
  • Insertion directe du shortcode de la table sur l’éditeur visuel.
  • Les tableaux individuels peuvent être personnalisés avec un CSS personnalisé.
  • Des tableaux de données complexes avec champ de recherche, pagination et filtrage peuvent être créés facilement.

Comment utiliser le plugin TablePress ?

Installez et activez le plugin pour voir un menu d’administration créé comme indiqué ci-dessous :

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Options du menu du plug-in TablePress

La position du menu TablePress peut être modifiée dans la section « Options du plug-in ».

Le plugin a les sections suivantes :

  • Toutes les tables – affiche la liste de toutes les tables créées.
  • Ajouter nouveau – permet de créer une nouvelle table.
  • Importer – offre diverses options pour importer des tables simples et multiples.
  • Exporter – offre diverses options pour exporter des tables simples et multiples.
  • Option de plugin – les tables individuelles peuvent être personnalisées avec CSS dans cette section.
  • À propos – affiche les détails sur le plugin et d’autres détails.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Options du plugin WordPress TablePress

Création d’un tableau dans TablePress

Accédez à l’onglet "Ajouter un nouveau" où vous pouvez entrer des détails de base tels que le nom du tableau, une brève description et choisir le nombre de colonnes et de lignes pour créer un tableau.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Ajouter une nouvelle table dans TablePress

L’écran suivant vous montrera de nombreuses options dans plusieurs sections. Vous pouvez facilement vous familiariser avec ces options en créant un ou deux exemples de tableaux.

Offre SEO : Optimisez votre site avec Semrush Pro spécial essai gratuit de 14 jours.

Section d’informations sur les tableaux

Ici, vous pouvez voir les détails de base que vous avez entrés sur l’écran de création ainsi que le shortcode de votre table.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Section d’informations sur les tableaux

Contenu du tableau

C’est ici que vous devez saisir le contenu réel de votre tableau en lignes et en colonnes ; la première ligne est par défaut considérée comme un en-tête de tableau que vous pouvez modifier dans la section « Options du tableau ».

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Section Contenu du tableau

Manipulation des tableaux

Cette section propose les fonctionnalités suivantes :

  • Ajoutez des lignes et des colonnes à votre tableau.
  • Masquer, afficher, supprimer, dupliquer et insérer des lignes et des colonnes.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Section de manipulation de table

  • Cliquez sur le bouton « Insérer un lien » et choisissez la cellule du tableau pour ouvrir la fenêtre contextuelle par défaut du lien d’insertion WordPress. Vous pouvez également ajouter directement des liens à l’aide de balises d’ancrage HTML.
  • Semblable aux liens, cliquez sur « Insérer une image » et cliquez sur la cellule pour insérer des images de la médiathèque WordPress. Vous pouvez également ajouter directement des images à l’aide de la balise HTML img.
  • L’éditeur avancé vous permet d’ajouter du contenu formaté à l’aide d’un éditeur simple.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Éditeur avancé de TablePress

  • Utilisez les options rowspan et colspan pour combiner une cellule sur une ligne et des colonnes.

Les attributs Rowspan et Colspan ne peuvent pas être utilisés sur des tables de données avancées utilisant la bibliothèque JavaScript pour le tri.

Options de tableau

Ici, vous pouvez définir l’en-tête, le pied de page, les différentes couleurs pour les lignes alternatives et mettre en surbrillance la ligne au survol. Vous pouvez également afficher le nom et la description du tableau au-dessus ou au-dessous du tableau.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Options de table de presse

Ajoutez des classes CSS supplémentaires pour personnaliser l’apparence du tableau, vous devez utiliser ces classes CSS au niveau du thème et définir des styles.

Fonctionnalités de la bibliothèque JavaScript DataTables

Lorsque vous avez activé la première ligne du tableau comme en-tête dans la section « Options du tableau », le tableau peut être converti en un tableau de données en activant les fonctionnalités de cette section.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Création de tableaux de données à l’aide de TablePress

  • Tri basé sur l’une des colonnes en cliquant simplement sur la colonne.
  • Recherche / Filtrage – permet d’afficher un champ de recherche dans le coin supérieur droit du tableau et les utilisateurs peuvent filtrer les résultats en saisissant un mot-clé. C’est une fonctionnalité très utile, surtout lorsque vous avez de nombreuses lignes et que le contenu n’est pas visible en raison de la pagination.
  • Pagination – permet à la pagination d’afficher uniquement des lignes particulières avec des liens de pagination « précédent / suivant » dans le coin inférieur droit du tableau. Vous pouvez également permettre à l’utilisateur de filtrer et d’afficher un nombre particulier de lignes.
  • Activez le défilement horizontal si vous avez de nombreuses colonnes dans la table et ajoutez des commandes personnalisées si vous savez utiliser des tables de données avancées.

Une fois que vous avez complété les options, prévisualisez le tableau et enregistrez les modifications. Vous pouvez également supprimer, copier et exporter le tableau à partir du même écran.

Insérer un tableau dans un article ou une page

Chaque table dans TablePress aura un identifiant unique qui peut être vu dans la section "Informations sur la table". Vous pouvez l’utiliser comme shortcode dans l’éditeur Gutenberg ou insérer le code de la table dans l’éditeur Classic à l’aide de l’icône TablePress.

Affichage de tous les tableaux

Toutes les tables créées avec TablePress sont visibles dans le menu «TablePress > All Tables ». Vous pouvez effectuer des actions telles que copier, exporter et supprimer sur des tables individuelles ainsi que sur des lots.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Options sous l’onglet Toutes les tables

Importation de tableaux

Bien que la création d’une table soit facile à l’écran, ce sera une tâche fastidieuse pour les grandes tables. Dans de tels scénarios, vous pouvez créer des tableaux à l’aide d’une feuille de calcul Excel au format XLS, XLSX ou CSV et l’importer sur votre site WordPress sous l’onglet « Importer » du plugin TablePress. Accédez à l’onglet « Importer » pour voir les options ci-dessous :

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Importer des options de table dans TablePress

  • L’importation de la source peut provenir d’un fichier sur votre ordinateur local, d’une URL, d’un fichier sur un serveur ou d’une saisie manuelle.
  • En fonction de la source, téléchargez le fichier depuis votre ordinateur local ou fournissez les détails requis.
  • Choisissez le format de fichier, si vous utilisez XLSX, choisissez l’option "XLSX – " dans la liste déroulante. Bien que XLSX soit toujours une option bêta, il fonctionne parfaitement comme nous l’avons testé.
  • Choisissez de créer une nouvelle table ou de modifier ou d’ajouter une table existante. Choisir les options de remplacement et d’ajout affichera une liste déroulante de toutes les tables existantes à partir de laquelle vous pouvez sélectionner une table.
  • Cliquez sur le bouton « Importer » pour lancer l’importation de la table.

Le plugin permet d’importer plusieurs tables sous forme de fichier zip. Par exemple, si vous disposez de cinq tableaux de feuilles de calcul XLSX, placez tous les fichiers dans un seul dossier et compressez-le au format zip. Téléchargez simplement le fichier zip pour créer cinq tableaux.

Exportation de tableaux

Semblable à l’importation, toutes les tables existantes peuvent être exportées au format CSV, JSON ou HTML vers votre ordinateur local. Le plugin permet également de sélectionner plusieurs tables et de les exporter sous forme de fichier zip.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Exportation de tableaux dans TablePress

Les formats CSV et HTML n’exportent que le contenu du tableau et le format JSON inclut également les options du tableau.

Personnalisation des tableaux dans TablePress

Jusqu’à présent, ce que nous avons vu, ce sont les options par défaut et sous l’onglet "Options du plug-in", vous pouvez entrer un CSS personnalisé pour contrôler soit toutes les tables de manière uniforme, soit contrôler l’affichage des tables individuelles.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Ajout de CSS personnalisé dans TablePress

Voici les sélecteurs pour définir votre style :

  • .tablepress – toutes les tables TablePress doivent avoir cette classe.
  • .tablepress-id – utilisé pour styliser une table spécifique.
  • .column-id – utilisé pour styliser la colonne d’un tableau.
  • .row-id – utilisé pour styliser la ligne d’un tableau.

Vous trouverez ci-dessous un exemple de tableau créé avec TablePress, supposons que l’identifiant est 3 et certains des styles de personnalisation sont donnés sur la base de cet exemple :

Ci-dessous, le code CSS doit être ajouté dans la zone de texte sous « Options de plug-in > CSS personnalisé » et assurez-vous de cocher l’option « Charger ces commandes « CSS personnalisées » pour influencer le style du tableau ».

Modifiez la largeur de la deuxième colonne à 200px :

.tablepress-id-3 .column-2 { width: 200px; }

Changez la couleur d’arrière-plan de la ligne 2 en rouge :

.tablepress-id-3 .row-2 td { Background-color: red; }

Modifiez la couleur des lignes alternatives :

.tablepress-id-3 .odd td { background-color: red; } .tablepress-id-3 .even td { background-color: blue; }

Changer la couleur de la ligne au survol :

.tablepress-id-3 .row-hover tr:hover td { background-color lightgrey; }

Questions générales

Nous avons remarqué quelques problèmes de base lors de l’utilisation de TablePress :

  • Réactivité des tables sur les appareils mobiles qui peut être résolue en installant l’extension de plugin.
  • Insertion de tableaux dans le pied de page ou la barre latérale du site – cela peut être résolu en utilisant des balises de modèle avec "$query" comme chaîne ou tableau. Par exemple, ci-dessous est un exemple pour obtenir les données de table pour la table id=1 :
<?php tablepress_print_table( array( 'id' => '1', 'use_datatables' => true, 'print_name' => false) ); ?>

Si vous rencontrez un autre problème spécifique sur votre site, consultez le forum pour voir s’il est résolu et consultez la documentation avant de poser la question de l’assistance. Nous avons remarqué que la plupart des problèmes ont été résolus dans l’un de ces endroits.

Remarque : L’ insertion de balises HTML dans les cellules de tableau n’est pas prise en charge, bien que vous puissiez utiliser une balise d’image, une balise de lien, utiliser un éditeur avancé et une extension pour ajouter des liens.

Extensions TablePress

Bien que les besoins de base puissent être satisfaits avec la version gratuite du plugin, vous pouvez télécharger des extensions supplémentaires à partir de la page TablePress Extensions pour améliorer les fonctionnalités des tables. Encore une fois, en tant que contribution à la communauté, l’auteur offre toutes les extensions gratuitement et en nomme quelques-unes comme premium avec une demande de don. Parmi toutes les extensions, nous avons trouvé que « Tables réactives» est celle dont vous pourriez avoir besoin pour rendre la table visible sur les appareils mobiles. Chaque extension peut être téléchargée et installée en téléchargeant le fichier zip via votre tableau de bord d’administration WordPress sous «Plugins > Ajouter un nouveau > Télécharger le plugin ». Vous pouvez également utiliser FTP pour télécharger le dossier du plugin extrait sous "/wp-content/plugins/".

Vous trouverez ci-dessous un exemple de tableau créé avec un style flip à l’aide de l’extension de tableaux réactifs.

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

Table à bascule réactive

TablePress SEO

L’aspect le plus important de la création de tableaux avec le plugin TablePress est le référencement – les tableaux sont plus conviviaux pour les moteurs de recherche, en particulier sur Google. Vous trouverez ci-dessous un exemple de résultat de recherche Google affichant le contenu du tableau de manière plus attrayante avec le nombre total d’éléments :

Tutoriel du plugin TablePress pour les utilisateurs de WordPress

TablePress Table dans les résultats de recherche Google

Google affiche le résultat avec le tableau si votre page génère suffisamment de trafic pour les mots-clés du contenu du tableau. Bien que la méta description de la page ne soit pas affichée, nous avons remarqué que la vue en tableau attire plus d’utilisateurs que le simple texte.

Sommaire

TablePress est le plugin WordPress gratuit pour créer des tableaux pour votre site. Vous pouvez insérer les tableaux n’importe où sur le site en utilisant un shortcode. Il est possible de rendre les tables responsives avec des add-ons.

Avantages

  • Mises à jour gratuites et régulières
  • Interface utilisateur simple
  • Tables de données avancées
  • Responsive sur mobile

Les inconvénients

  • Le téléchargement de la table est gourmand en ressources
  • Pas d’optimisation des performances pour charger CSS/JS uniquement sur les pages avec des tableaux
  • Aucun modèle

Source d’enregistrement: www.webnots.com

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails