Cela semblerait certainement une expérience épouvantable avec toutes les données et la mise en forme conditionnelle que vous auriez besoin d’ajouter aux cellules du tableau.

Savez-vous comment on dit qu’il n’y a pas de mauvais temps, seulement des vêtements inadaptés ?

Il en va de même pour la construction d’une table météo. Si vous ne pouvez pas en créer un, cela signifie que vous n’avez pas les bons outils pour le travail.

Dans cet article, je vais passer en revue la création d’une table météo avec wpDataTables, le plugin WordPress #1 pour créer des tables et des graphiques.

Quel type de table météo pouvons-nous créer? Eh bien, quelque chose comme ça :

Oui, c’est une très longue capture d’écran. Vous pouvez consulter la table météo dynamique ici.

Pour créer une table météo comme celles que nous avons présentées précédemment, vous avez peu d’options en fonction de vos données sources.

1 Créer un tableau à partir de rien

Si vous n’avez pas de source de données, vous pouvez créer votre table météo à partir de zéro avec l’option "Créer des tables manuellement" où vous insérerez les données manuellement.

Pour commencer à créer une table de données manuellement, ouvrez votre panneau d’administration WordPress, allez dans wpDataTables -> Créer une table, choisissez la troisième option "Créer une table manuellement", et cliquez sur "Suivant".

Vous verrez l’étape de l’assistant qui vous aidera à créer la structure de la table où vous créerez 14 colonnes: Période, Année, et toutes les autres seront les noms des mois (Jan, Fév…). Pour les colonnes Période, vous laisserez le type de colonne sur "Chaîne sur une ligne" et pour tous les autres, vous définirez le type de colonne "Entier" .

Lorsque vous avez fini de configurer le tableau, cliquez sur "Créer le tableau". Une liste déroulante s’ouvrira avec des options pour "Ouvrir dans l’éditeur standard" ou "Ouvrir dans l’éditeur de type Excel" et c’est tout. La structure du tableau est créée. Vous allez maintenant insérer vos données dans l’ éditeur standard ou dans un éditeur de type Excel.

2 Créer une table à partir d’une source de données

Si vous avez des données dans une source de données telle qu’Excel, CSV, JSON, une feuille de calcul Google, XML, un tableau sérialisé PHP ou dans une table de la base de données (source SQL), vous utiliserez la deuxième option de l’assistant de table.

Pour commencer à créer une table de données liée à une source de données existante, ouvrez votre panneau d’administration WordPress, allez dans wpDataTables -> Créer une table, choisissez la deuxième option "Créer une table de données liée à une source de données existante"., et cliquez sur "Suivant".

Selon la source que vous avez, vous suivrez les instructions :

Pour ce tableau, nous utilisons CSV comme source de données que vous pouvez télécharger ici. Vous choisirez CSV comme "Type de source de données d’entrée", puis sur le bouton Parcourir, trouvez que

la source que vous avez précédemment téléchargée et téléchargée sur votre serveur. Cliquez sur Enregistrer les modifications, ainsi wpDataTables lira le fichier CSV que vous avez téléchargé et la table sera créée.

Après avoir créé le tableau, avec l’une des deux options, vous pouvez personnaliser et configurer votre tableau WordPress selon vos besoins.

Dans notre cas, nous activons d’abord l’option « Afficher les filtres dans un formulaire au-dessus du tableau » sur l’onglet « Tri et filtrage» dans les paramètres du tableau, puis configurons les filtres avancés pour chaque colonne. Pour la colonne Période, nous définissons ‘Select Box filter’ et ‘Number filter’ pour toutes les autres colonnes.

Ensuite, nous activons l’option "Réactivité" sur l’ onglet "Affichage" dans les paramètres du tableau et masquons toutes les colonnes "Mois" pour les tablettes et les appareils mobiles dans chaque paramètre de colonne ou plus rapidement dans le bouton Liste des colonnes au-dessus du tableau.

Pour personnaliser la couleur des données du tableau, nous utilisons le formatage conditionnel. Pour la première colonne, nous définissons la condition que si la cellule contient 2 alors "Définir la classe CSS de la cellule " sur "texte bleu-blanc".

Ensuite, nous créons ces classes dans le champ « CSS personnalisé » de l’onglet «** Personnaliser »** dans les paramètres du tableau comme celui-ci :


.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.blue{ background-color: #0083c2 !important;}

.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}

Comme ça:

Où le numéro 1 dans .wpDataTable-1 est l’ID de votre table, vous devrez donc le changer pour votre table

Pour toutes les autres colonnes, nous définissons les mêmes conditions pour définir des couleurs différentes en fonction de la valeur du tableau de la température maximale.

Pour le deuxième tableau « Basse température », nous utilisons la même approche que pour le tableau « Température maximale », à l’exception des conditions en format conditionnel. Comme il s’agit de la valeur inférieure de la température, nous utilisons ces conditions.

Ensuite, nous créons ces classes dans le champ « CSS personnalisé » de l’onglet «** Personnaliser »** dans les paramètres du tableau comme celui-ci :


.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.white-text{ color: #FFFFFF !important;}

.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.black-text{ color: #000000 !important;}

Où le numéro 2 dans .wpDataTable2 est l’ID de votre table, vous devrez donc le changer pour votre table.

C’est ça!

Maintenant, ce que vous devez faire est d’apparaître sur vos pages dans le front-end. Comme avec tout autre plugin, nous utilisons des codes abrégés pour afficher des tableaux sur les pages ou les publications des utilisateurs. L’ajout de codes abrégés est très simple, surtout si vous utilisez des constructeurs de pages populaires comme Elementor, WP Bakery ou Gutenberg.

Plus de styles de table que vous pouvez créer avec wpDataTables

Êtes-vous intéressé à créer plus que de simples tables météo?

Vous devez jeter un œil à certains des autres tableaux de la section vitrine.

Tableaux statistiques avec graphiques

wpDataTables est utilisé pour générer une représentation graphique des données statistiques sous forme de graphiques.

Tableau de classement des crypto-monnaies

Dans cet exemple, les crypto-monnaies sont classées dans une table à l’aide de wpDataTables. Vous pouvez ajouter ce type de table de chiffrement à votre site avec quelques ajustements.

Catalogue d’ordinateurs portables en ligne

Ce tableau peut être utilisé pour comparer les produits. Par exemple, si vous avez un site Web où vous présentez et faites la promotion de produits, le tableau peut afficher les caractéristiques des produits les plus populaires.

Rapports financiers

Le plugin est utilisé pour créer un tableau qui affiche les données financières par pays. Évidemment, il peut être adapté à la présentation de différents types de données financières.

Catalogue de livres

Ce style de tableau fonctionne bien pour un site affilié ou une librairie en ligne.

Fonds communs de placement

wpDataTables peut créer une liste de fonds communs de placement, triés par performance.

Catalogue de pilotes

wpDataTables est utilisé pour afficher la configuration du pilote.

Rejoignez la communauté wpDataTables

Si vous travaillez avec des tables, voici quelques raisons pour lesquelles une licence wpDataTables répondra à vos besoins.

Il facilite le travail avec les tableaux et les graphiques.
wpDataTables est un plugin de table WordPress le plus vendu au monde avec des mises à jour fréquemment publiées et un excellent support client.
Déjà plus de 40 000 entreprises et particuliers satisfaits utilisent wpDataTables.
Il est utilisé dans des applications de gestion de données financières, scientifiques, statistiques, commerciales et autres.

Avec lui, vous pouvez créer des tableaux et des graphiques WordPress réactifs

Les tables créées avec le plugin wpDataTables sont intrinsèques et entièrement réactives. Il n’y a aucune restriction en ce qui concerne les plates-formes ou les types d’appareils.

Vous pouvez créer de grandes tables

Les grandes tables ne sont pas un problème. wpDataTables gère les tables avec des millions de lignes rapidement et de manière fiable. Le serveur MySQL traite toutes les opérations.

Filtres avancés et options de recherche

Des filtres individuels pour votre ensemble de données peuvent être développés. Ceci est très utile pour affiner les données dans un tableau WordPress.

Editabilité

wpDataTables a la possibilité de le rendre modifiable. Le contenu des tableaux WordPress peut ainsi être édité en ligne ou sous forme générée.

Mise en surbrillance des cellules

Notre plugin de tableaux WordPress a une fonctionnalité similaire à la mise en forme conditionnelle dans Excel. En fonction de leur contenu, vous pouvez mettre en surbrillance des colonnes, des lignes ou des cellules individuelles.

Beaucoup d’options de graphiques

Les données des tableaux WordPress peuvent être utilisées pour générer des graphiques WordPress. Trois moteurs puissants sont utilisés pour générer ces graphiques, qui sont mis à jour en temps réel.

Quelques avis que nous avons reçus au fil des ans

wpDataTables résout avec succès différentes tâches pour plus de 40 000 clients chaque jour. Cela inclut l’interaction avec les bases de données, les rapports commerciaux, les catalogues, les tableaux de bord scientifiques et bien d’autres.

wpDataTables a été une merveilleuse solution pour nous! Nous étions déjà très impressionnés par les capacités du plugin dès la sortie de la boîte. Les plugins TMS ont travaillé avec nous pour le personnaliser spécialement pour nos besoins. Les personnalisations nous ont permis de créer une interface intuitive pour les clients, pour la saisie et l’édition des données. Le support client et la réactivité sont irréprochables. wpDataTables est tout simplement un excellent produit.

-Sara Woodmansee, États-Unis. Photographe & Geo Mapping chez Geo1 / Aerial Filmworks

Du point de vue d’un développeur Web et d’un client, wpDataTables est l’un des meilleurs plugins que j’ai rencontrés. Non seulement le prix est bon mais aussi la fonctionnalité est parfaite. Extrêmement facile à utiliser et très bien conçu. Il possède de nombreuses fonctionnalités qui conviennent à tous, des débutants aux niveaux avancés. Les vidéos qui complètent le plugin sont bien expliquées en profondeur avec de nombreux exemples. Je ne saurais trop insister sur le fait que cela a rendu mon développement Web plus facile et plus cool.

– Nordine Benhamari, Royaume-Uni. Développeur Web, concepteur de bases de données chez Thanet Volunteer Bureau

Si vous avez aimé lire cet article sur la création de tables météo, vous devriez consulter celui-ci sur les plugins générateurs de tables WordPress.

Nous avons également écrit sur quelques sujets connexes tels que l’alternative DataTables, la bibliothèque de tables JavaScript, les plugins de table WordPress, comment créer une table dans WordPress sans plugin, comment insérer une table dans WordPress et les plugins de table de tarification WordPress.

Source d’enregistrement: wpdatatables.com