Comment créer des tableaux réactifs dans WordPress
Publié: 2023-02-12Les tableaux sont un élément de conception de site Web qui peut vous aider à afficher avec élégance de grandes quantités d'informations de manière organisée. Ils fonctionnent assez bien sur les écrans d'ordinateur traditionnels, mais peuvent souvent créer une expérience indésirable sur les appareils mobiles.
Heureusement, il existe plusieurs solutions pratiques pour créer des tableaux plus réactifs. L'utilisation de ces pratiques de conception réactive peut améliorer l'expérience utilisateur (UX) de votre site. Cela signifie que les visiteurs pourront visualiser et accéder plus facilement aux données de vos tableaux, quel que soit le type d'appareil qu'ils utilisent.
Dans cet article, nous verrons ce que signifie rendre une table réactive. Nous verrons ensuite deux manières de créer des tableaux réactifs dans WordPress. Plongeons dedans !
Que sont les tableaux réactifs ?
En règle générale, l'objectif d'un tableau est d'afficher de nombreuses données d'une manière logique. Cependant, lorsque vous essayez d'afficher des tables sur un appareil mobile, les choses peuvent mal tourner. Cela se produit parce que les lignes du tableau sont souvent beaucoup plus larges que ce que l'affichage de votre écran peut gérer.
Lorsque vous créez un tableau réactif, vous créez essentiellement un ensemble de règles pour votre tableau de données d'origine. Ces règles peuvent déterminer des points d'arrêt en fonction de la taille d'affichage. Cela signifie que si un utilisateur accède au tableau sur un appareil plus petit que votre point d'arrêt défini, la disposition du tableau répondra en reformatant pour s'adapter à la taille de l'écran.
Les tableaux réactifs peuvent généralement être reformatés en ajoutant une barre de défilement ou en empilant les informations. Vous ne voulez pas simplement réduire et regrouper les informations dans les cellules lorsque la taille de l'écran change, car cela peut rendre le tableau illisible. Heureusement, la conception réactive n'est pas trop difficile à réaliser.
Comment créer un tableau réactif (sans plugin)
Il existe essentiellement deux approches pour rendre un tableau réactif dans WordPress. Tout d'abord, nous verrons comment faire le travail sans plugin.
Cela nécessitera des connaissances en codage : en particulier, une compréhension des feuilles de style en cascade (CSS). Nous vous recommandons également de travailler dans un environnement de mise en scène ou de développement plutôt que sur votre site Web en direct, jusqu'à ce que vous concevez un tableau qui fonctionne de manière fiable.
Étape 1 : formatez votre tableau pour un CSS réactif
Dans cet exemple, nous allons dire aux données de notre exemple de table de reformater à un point d'arrêt spécifique. Vous pouvez simplement ajouter une barre de défilement à un tableau dans certains cas, mais nous allons en fait regrouper les données du tableau afin qu'elles apparaissent dans un format plus lisible qui élimine le besoin de défilement horizontal.
C'est une excellente approche, car le défilement horizontal peut souvent signifier que vous visualisez les données d'une colonne hors contexte :
Pour que ce tableau fonctionne mieux, vous devez d'abord vous assurer que votre tableau est correctement formaté. Si vous créez un tableau à l'aide de l'éditeur de blocs, vous pouvez le faire normalement, puis ajouter les attributs <thead> et <tbody> pour vous assurer que votre CSS fonctionnera correctement :
Une fois que vous avez ajouté le tableau, vous pouvez utiliser l'éditeur HTML pour ajuster sa mise en forme. Votre attribut <thead></thead> doit envelopper tous vos en-têtes de colonne. De même, vous encapsulerez toutes vos données de table ultérieures dans l'attribut <tbody></tbody>.
Une fois que vous avez ajouté la balise CSS à l'étape suivante, vos feuilles de style seront en mesure de comprendre ce qui est censé s'afficher comme en-têtes pour chaque colonne du tableau, et quel est le contenu du corps ou de la cellule.
Étape 2 : Ajoutez une balise personnalisée à votre CSS
Ensuite, nous allons utiliser un extrait de code CSS personnalisé et le thème WordPress Twenty Nineteen. Ce thème a une conception assez réactive dans le cadre de son code natif, mais nos ajustements CSS iront encore plus loin.
Étant donné que tous les thèmes sont différents, vous voudrez bien comprendre la structure de votre thème afin de réussir à mettre en œuvre une conception de table réactive. Certains thèmes peuvent nécessiter une bibliothèque JavaScript supplémentaire.
Pour notre exemple, nous allons accéder à Apparence > Personnaliser > CSS supplémentaire , où nous pouvons ajouter le code CSS personnalisé suivant :
@media screen and (max-width: 600px) { | |
table {width:100%;} | |
thead {display: none;} | |
tr:nth-of-type(2n) {background-color: inherit;} | |
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | |
tbody td {display: block; text-align:center;} | |
tbody td:before { | |
content: attr(data-th); | |
display: block; | |
text-align:center; | |
} | |
} |
Une fois que vous aurez collé votre propre code dans l'éditeur, vous devrez sélectionner Publier pour que vos modifications prennent effet.
Étape 3 : Testez la réactivité du tableau dans WordPress
WordPress dispose d'une fonction de test d'écran intégrée utile qui vous permet de tester votre contenu sur trois tailles d'écran différentes. En bas de l'écran où vous avez ajouté votre CSS personnalisé, vous pouvez cliquer sur les icônes de tablette ou de téléphone portable pour tester le nouveau style de votre tableau :
Pour cet exemple, nous avons déjà créé un tableau simple qui contient tous les attributs HTML nécessaires pour travailler avec notre CSS. Notre point d'arrêt dans le CSS est défini sur 600 pixels, mais cela peut être modifié pour répondre à vos besoins.
Au lieu d'ajouter une barre de défilement ou d'écraser les données du tableau, le CSS que nous avons ajouté réorganise les données dans un format adapté aux mobiles. Cela permet à l'utilisateur sur un appareil mobile de faire défiler verticalement et d'afficher les données du tableau en contexte avec le reste des cellules associées.
Comment créer un tableau réactif avec un plugin
Si vous n'êtes pas à l'aise pour personnaliser le code ou le CSS de votre thème, il existe une autre option. Il existe un certain nombre de plugins WordPress disponibles qui peuvent vous aider à créer une conception de table réactive pour votre site Web.
Étape 1 : Téléchargez un plug-in
Pour commencer, vous devrez choisir un plugin. Puisqu'il existe de nombreuses options pour concevoir des tableaux réactifs, nous allons en souligner quelques-unes pour vous aider à démarrer :
- Tableaux Ninja : Étiqueté comme le plugin numéro un de WordPress pour la création de tableaux réactifs, il propose plus de 100 styles de tableau parmi lesquels choisir.
- wpDataTables : Il s'agit d'un plugin gratuit avec une version premium, mais la version allégée regorge de fonctionnalités permettant de créer des tableaux et des graphiques riches et interactifs.
- WP Responsive Table : Il s'agit d'un plugin simple et gratuit qui permet de créer facilement des tableaux responsive qui défilent horizontalement sur de petits écrans.
Pour le reste de cet exemple, nous utiliserons Ninja Tables pour montrer comment créer une table de données réactive dans WordPress.
Étape 2 : Saisissez vos données
Après avoir installé et activé le plugin, vous pourrez passer directement à la création d'un tableau. Vous pouvez naviguer vers NinjaTables > Toutes les tables > Ajouter une table :
Ici, vous pouvez ajouter une nouvelle table à partir de zéro, ou vous pouvez importer une table à partir d'un fichier. Nous allons créer une table à partir de zéro avec l'option Ajouter une table . Vous devrez ensuite saisir un titre et une description pour votre tableau :
Vous aurez également d'autres options ici. Par exemple, si vous configurez une boutique WooCommerce, vous pourrez utiliser ces informations pour créer une table WooCommerce.
Une fois que vous aurez ajouté vos informations, vous cliquerez sur Ajouter pour créer le tableau. Vous devrez alors commencer à saisir des données. Vous pouvez sélectionner Ajouter une colonne pour configurer la structure de votre tableau :
Vous aurez quelques champs à remplir afin de créer votre colonne. Cela inclut le nom de l'en-tête de la colonne et le type de données qu'il contient. Vous pourrez également définir son Responsive Breakpoint :
Pour choisir parmi un certain nombre d'options qui déterminent comment vos tables répondront aux différents appareils, vous pouvez accéder au menu en cliquant sur Toujours afficher sur tous les appareils :
Une fois que vous avez créé vos colonnes, sélectionnez Ajouter des données et NinjaTables vous fournira un formulaire simple pour ajouter rapidement plusieurs entrées dans la table :
Vous pouvez laisser l'option Continuer l'ajout cochée si vous avez plusieurs entrées à faire. Une fois que vous avez terminé, vous pouvez fermer la fenêtre et revenir à l'écran d'édition de votre tableau.
Étape 3 : formatez votre tableau
Maintenant que vous avez un tableau contenant des informations, vous pouvez explorer les paramètres et les options de style de NinjaTable. Depuis la fenêtre d'édition de votre tableau, vous pouvez accéder à plus de paramètres dans les onglets supérieurs, ainsi qu'en bas à droite de l'écran :
Vous aurez de nombreuses options pour personnaliser le style et l'apparence de votre tableau, notamment l'alternance des couleurs des lignes du tableau, le centrage du texte, le masquage des données, etc.
Étape 4 : Testez votre tableau
NinjaTable permet de tester facilement la réactivité de votre tableau pendant que vous l'éditez. Dans l'onglet Conception de tableau , vous trouverez trois options pour tester la réactivité de l'écran :
Vous pouvez sélectionner Ordinateur de bureau , Tablette ou Mobile pour voir à quoi ressemblerait votre tableau sur ces types d'appareils.
Chaque tableau que vous créez est également accompagné d'un shortcode. De plus, vous pouvez facilement ajouter n'importe lequel de vos tableaux au contenu de votre site Web en utilisant le bloc NinjaTable que vous trouverez dans la section Formatage du menu de l'éditeur de blocs.
Laissez WP Engine vous aider à garder votre site réactif
Construire un site Web qui utilise une conception réactive solide ne doit pas être un défi lorsque vous avez accès aux bonnes ressources.
Chez WP Engine, nous voulons que vous puissiez offrir la meilleure expérience numérique à vos clients. Découvrez nos nombreux plans d'hébergement WordPress et nos solutions de développement pour votre prochain projet !