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

Comment créer des tableaux réactifs dans WordPress ?

8

Le nouvel éditeur Gutenberg dispose d’un magnifique bloc de tableau pour insérer des tableaux sur votre site WordPress. Le tableau sera magnifique sur votre site, vous avez également des options pour fournir des couleurs alternatives (rayures) aux lignes et modifier les paramètres pour réduire les colonnes en mode d’ajustement. Cependant, le plus gros problème est que les tableaux ne sont pas réactifs sur les appareils mobiles. La largeur de l’appareil mobile peut contenir au maximum trois ou quatre colonnes en fonction du contenu du tableau. Lorsque vous avez plus de colonnes, le navigateur tronque l’affichage à la largeur du conteneur. Cela conduira à la situation où les utilisateurs n’auront aucun moyen de voir le contenu caché de vos tables. Par conséquent, le bloc de table Gutenberg est inutile lorsque vous souhaitez avoir des tables réactives sur votre site.

Il existe de nombreux plugins gratuits et payants pour créer des tables responsives sur le site WordPress. Notre plugin préféré est TablePress et nous vous expliquerons comment créer des tableaux responsive dans WordPress avec le plugin TablePress.

Pourquoi TablePress ?

  • TablesPress est l’un des plugins les plus populaires pour créer des tableaux dans WordPress.
  • Le développeur propose une interface conviviale et maintient la table en permanence.
  • Vous pouvez trouver une bonne documentation pour l’utilisation du plugin.
  • Plus important encore, le plugin est gratuit. Vous pouvez même télécharger les extensions gratuitement bien que le développeur demande un don. Cela contraste fortement avec le fait que de nombreux développeurs avides transforment les fonctionnalités gratuites en version payante lorsque le plugin devient populaire.

Installation de TablePress et des modules complémentaires

Vous pouvez installer et activer le plugin TablePress à partir de votre tableau de bord d’administration WordPress similaire à tout autre plugin. Cependant, les tables TablePress par défaut ne sont pas réactives comme les tables Gutenberg. Vous devez installer une extension pour rendre les tables réactives.

  • Accédez à la page d’ extension réactive TablePress.
  • Téléchargez le fichier zip de l’extension Responsive Tables
  • Comme mentionné, le développeur demande 9 $ de don pour cette extension. Nous vous recommandons fortement de faire un don de 9 $ si vous envisagez d’utiliser le plugin comme ressource principale sur votre site.
  • Revenez à votre panneau d’administration WordPress et accédez à la section « Plugins > Ajouter un nouveau ».
  • Cliquez sur le bouton « Télécharger le plugin ». Cliquez sur le bouton « Choisir un fichier » et sélectionnez le fichier « tablepress-responsive-tables.zip » que vous avez téléchargé auparavant.
  • Enfin, cliquez sur le bouton «Installer maintenant» pour lancer l’installation de l’extension sur votre site.
  • Activez l’extension, après une installation réussie.

Comment créer des tableaux réactifs dans WordPress ?

N’oubliez pas d’installer et d’activer d’abord le plugin TablesPress avant d’essayer d’installer l’extension de tables réactives.

Création d’un tableau

TablePress propose différentes manières de créer un tableau ; vous pouvez vous référer à la fonctionnalité de plugin dans notre article précédent sur la façon de créer une table avec TablePress. Vous trouverez ci-dessous le résumé des étapes de création d’un tableau dans TablePress :

  • Allez dans le menu "Outils > TablePress > Ajouter un nouveau" et commencez à créer une table et personnalisez les options.
  • Sinon, allez dans l’onglet "Importer" et importez un tableau à partir d’une source de données externe. Par exemple, vous pouvez simplement télécharger les données de votre feuille Excel pour créer un tableau.

Comment créer des tableaux réactifs dans WordPress ?

Après avoir créé votre table, enregistrez vos modifications et notez le shortcode de l’ identifiant de la table .

Insertion du shortcode du tableau

L’interface de l’éditeur classique avait une icône TablePress qui vous aide à choisir la table dans l’éditeur de publication. Cependant, vous n’avez pas de bloc TablePress dans l’éditeur Gutenberg. Par conséquent, vous devez intégrer manuellement le shortcode de la table dans votre article ou votre page à l’aide du bloc de shortcode.

Tables TablePress auront l’identifiant de table shortcode dans le format table id = xxx / intérieur des crochets. Ajoutez un bloc de shortcode et insérez votre shortcode d’identification de table comme vous l’avez noté auparavant.

Rendre les tables réactives

TablePress propose trois façons différentes de créer des tableaux réactifs.

  • Faire défiler
  • Retourner
  • Effondrer

Puisque nous utilisons le plugin TablePress, discutons de chaque option avec un exemple de table.

Tableau de défilement réactif

C’est la meilleure option pour rendre votre table réactive lorsqu’elle comporte de nombreuses colonnes. Il ajoutera simplement une barre de défilement horizontale pour que les utilisateurs puissent balayer et afficher le contenu en dehors de l’écran. Voici un exemple de ce à quoi ressemblera une table de défilement réactive.

Tableau de réduction réactif

La deuxième option est d’avoir une table de repli réactive. Comme son nom l’indique, il ajoutera une icône + sur les lignes afin que les utilisateurs puissent appuyer/cliquer pour afficher plus de détails. L’extension du plugin déplacera le contenu du tableau masqué sous l’icône afficher / masquer. Ceci est très utile pour afficher quelques colonnes importantes et masquer les données restantes sous le bouton +.

Table à bascule réactive

La dernière option est le retournement, similaire à la transposition dans Microsoft Excel. Cela convertira la ligne en colonnes et les colonnes en lignes. Vous pouvez utiliser une table à bascule, si cela convient au contenu de votre table. Vous trouverez ci-dessous un exemple de table flip réactive créée avec le plugin TablePress.

Nom Sujet 1 Sujet 2 Sujet 3 Sujet 4 Sujet 5 Sujet 6 Sujet 7 Sujet 8 Sujet 9 Sujet 10 Sujet 11 Sujet 12 Sujet 13
John 50 60 70 45 68 98 78 54 21 23 43 76 87
Paul 89 65 45 12 32 56 78 89 Quatorze 56 98 56 45
David 98 84 65 89 12 45 98 65 32 12 45 43 75
Ralf 65 56 23 45 78 54 65 21 35 64 90 78 34
Krauss 15 56 48 98 65 45 78 23 56 45 87 56 98
Pierre 45 89 98 51 65 65 67 43 23 76 45 34 87
Bing 67 54 89 76 90 56 76 80 98 56 98 76 54

Connexes: Revue du plugin WordPress flipbook réactif.

Activation des tableaux réactifs à l’inversion sur des appareils spécifiques

Normalement, vous pouvez utiliser un tableau réactif ciblant les utilisateurs mobiles. Dans ce cas, il suffit de modifier le shortcode de la table pour inclure le mode responsive. Afin de tester les tableaux, vous devez afficher les tableaux dans un mobile ou utiliser l’option de basculement d’appareil dans la section des outils de développement de vos navigateurs Chrome / Firefox / Edge. Si vous utilisez Safari sur Mac, activez le menu de développement pour entrer en mode réactif.

Cependant, lorsque vous avez des tables plus grandes avec de nombreuses colonnes, vous devrez peut-être avoir une table réactive même sur un ordinateur de bureau ou des tablettes. L’extension du plugin simplifie cette tâche en ajoutant un point de rupture pour la table réactive. Les modes de défilement et de réduction fonctionneront sur tous les appareils sans ajouter de point d’arrêt. Pour le mode flip, modifiez le shortcode comme ci-dessous pour rendre le tableau réactif sur différents appareils. (assurez-vous de mettre les shortcodes entre crochets [ ]).

  • table id=123 responisve= retourner responsive_breakpoint=bureau /
  • id de table=123 responisve=flip responsive_breakpoint=tablette /
  • table id=123 responisve= flip responsive_breakpoint=mobile /
  • table id=123 responisve= retourner responsive_breakpoint=all /

Voici les dimensions exactes des points d’arrêt :

  • Bureau – appareils avec une largeur inférieure à 1200px
  • Tablette – appareils avec une largeur inférieure à 980px
  • Téléphone – appareils avec une largeur inférieure à 768px
  • Tout – ajoute de la réactivité sur tous les appareils, quelle que soit la dimension de l’appareil.

Mise en garde sur la vitesse de la page

Comme vous pouvez le voir, il est facile d’insérer différents types de tableaux réactifs sur tous les appareils. Le problème que nous avons remarqué avec l’extension est qu’elle ajoutera un fichier CSS supplémentaire pour le mode flip. La plupart des plugins de mise en cache excluent cette feuille de style sans la combiner avec d’autres fichiers CSS, créant ainsi un avertissement sur Google PageSpeed ​​Insights. De plus, le plugin chargera également les styles et les scripts sur toutes les pages de votre site, que la page ait ou non un tableau. Si vous n’avez que quelques tables, nous vous déconseillons d’utiliser le plugin TablePress pour améliorer la vitesse de votre page.

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