Notre plugin a quelques fonctionnalit\u00e9s que vous pouvez utiliser, selon la source de donn\u00e9es dont vous disposez.<\/p>\n
Si vous devez cr\u00e9er une table \u00e0 partir de z\u00e9ro, nous vous recommandons de cr\u00e9er une table manuellement<\/a>. C’est l’une des utilisations les plus courantes de wpDataTables\u00a0: pour cr\u00e9er des tableaux et les remplir avec des donn\u00e9es extraites du panneau d’administration de WordPress, sans acc\u00e9der ni disposer d’aucune source de donn\u00e9es pr\u00e9existante (Excel, CSV, Google Spreadsheet, JSON, XML, BD MySQL, etc.).<\/p>\n Si, toutefois, vous souhaitez cr\u00e9er une table \u00e0 partir d’une certaine source de donn\u00e9es, ces guides peuvent vous aider \u00e0 d\u00e9marrer avec wpDataTables\u00a0:<\/p>\n Maintenant, avan\u00e7ons et disons que vous avez beaucoup de colonnes sur le tableau statistique que vous souhaitez pr\u00e9senter sur votre site Web. \u00c9videmment, cela le rendra un peu encombr\u00e9. La seule solution que vous pouvez utiliser consiste \u00e0 masquer certaines colonnes afin qu’elles s’affichent bien sur la page.<\/p>\n Pour cela, vous pouvez utiliser les tableaux ma\u00eetre-d\u00e9tail<\/a>, un module compl\u00e9mentaire qui vous permet d’afficher des colonnes masqu\u00e9es en un clic afin d’am\u00e9liorer l’exp\u00e9rience utilisateur de votre page.<\/p>\n Dans l’exemple que nous allons vous montrer, nous allons cr\u00e9er une table statistique \u00e0 partir des donn\u00e9es que nous avons dans une table de base de donn\u00e9es MySQL. Nous allons v\u00e9rifier notre table au pr\u00e9alable dans phpMyAdmin et elle ressemble \u00e0 ceci :<\/p>\n Maintenant, dans wpDataTables, nous allons utiliser la deuxi\u00e8me option de l’assistant de table (Cr\u00e9er une table de donn\u00e9es li\u00e9e \u00e0 une source de donn\u00e9es existante) et nous choisirons "Requ\u00eate SQL" comme source de donn\u00e9es.<\/p>\n Dans l’\u00e9diteur SQL, nous allons ins\u00e9rer une requ\u00eate pour afficher toutes les colonnes de cette table\u00a0:<\/p>\n Ensuite, nous cliquons sur le bouton "Enregistrer les modifications" et le tableau est cr\u00e9\u00e9.<\/p>\n Vous trouverez des instructions d\u00e9taill\u00e9es sur ce processus dans nos documents pour la cr\u00e9ation de wpDataTables bas\u00e9s sur MySQL<\/a>.<\/p>\n En remarque, si vous n’avez pas acc\u00e8s \u00e0 votre base de donn\u00e9es via phpMyAdmin ou quelque chose de similaire, ou si vous n’\u00eates tout simplement pas familiaris\u00e9 avec la cr\u00e9ation de requ\u00eates, vous pouvez utiliser le constructeur de requ\u00eates WPDB int\u00e9gr\u00e9 wpDataTables.<\/p>\n Il poss\u00e8de une interface utilisateur graphique qui vous permet de s\u00e9lectionner les tables et les colonnes dont vous avez besoin et g\u00e9n\u00e8re une requ\u00eate et un aper\u00e7u. Vous pouvez modifier la requ\u00eate selon vos besoins et cr\u00e9er un wpDataTable bas\u00e9 sur la requ\u00eate modifi\u00e9e.<\/p>\n Vous pouvez trouver dans nos documents des instructions d\u00e9taill\u00e9es \u00e0 ce sujet\u00a0: Cr\u00e9er une table bas\u00e9e sur une requ\u00eate MySQL en interrogeant une base de donn\u00e9es<\/a>.<\/p>\n Tr\u00e8s bien, avan\u00e7ons avec les directives pour cr\u00e9er des tableaux statistiques.<\/p>\n Nous devrons maintenant personnaliser la table, comme masquer la colonne<\/a> wdt_ID, activer l’ option de r\u00e9activit\u00e9<\/a> et d\u00e9finir toutes les colonnes pour qu’elles soient masqu\u00e9es sur les appareils mobiles et les tablettes, \u00e0 l’exception des colonnes Item et Profit.<\/p>\n Pour les colonnes Chiffre d’affaires, Co\u00fbt et B\u00e9n\u00e9fice, vous pouvez personnaliser la couleur des cellules avec une mise en forme conditionnelle<\/a>.<\/p>\n Pour la colonne "Revenus", nous allons d\u00e9finir deux\u00a0conditions\u00a0:<\/p>\n 1) si les valeurs des cellules sont sup\u00e9rieures \u00e0 z\u00e9ro, d\u00e9finissez la couleur de la cellule sur # 0083c2<\/p>\n 2) si les valeurs des cellules sont sup\u00e9rieures \u00e0 z\u00e9ro, d\u00e9finissez la classe CSS de la cellule sur du texte blanc.<\/p>\n Ensuite, nous cr\u00e9erons ces classes dans le champ "CSS personnalis\u00e9" de l’onglet "Personnaliser" dans les param\u00e8tres du tableau comme ceci\u00a0:<\/p>\n O\u00f9 le num\u00e9ro 1 dans .wpDataTable-1 est l’ID de votre table, vous devrez donc le changer pour votre table.<\/p>\n Nous faisons la m\u00eame chose pour la colonne Co\u00fbt sauf que nous allons d\u00e9finir la couleur de la valeur de condition sur rouge (#D9534F)<\/p>\n Et aussi pour la colonne Profit, \u00e0 l’exception du fait que nous allons d\u00e9finir la couleur de la valeur de condition sur vert (# 5CB85C)<\/p>\n Dans les trois colonnes (Revenu, Co\u00fbt et B\u00e9n\u00e9fice), le pr\u00e9fixe de cellule que nous avons est d\u00e9fini sur la devise $ avec l’option "Pr\u00e9fixe de contenu de cellule" dans l’onglet Affichage des param\u00e8tres Colonnes pour chaque colonne.<\/p>\n Si vous souhaitez en savoir plus \u00e0 ce sujet, consultez nos documents sur la devise, le pourcentage et d’autres colonnes<\/a>.<\/p>\n Et c’est tout!<\/p>\n Oui, c’est aussi simple que \u00e7a.<\/p>\n Le tableau est pr\u00eat \u00e0 \u00eatre publi\u00e9 sur votre article ou vos pages. Maintenant, ce que vous devez faire, c’est qu’il apparaisse sur vos pages dans le front-end. Comme pour tout autre plugin, nous utilisons des codes abr\u00e9g\u00e9s pour afficher des tableaux sur les pages ou les publications des utilisateurs.<\/p>\n L’ajout de codes abr\u00e9g\u00e9s<\/a> est facile, surtout si vous utilisez des constructeurs de pages populaires comme Elementor, WP Bakery ou Gutenberg.<\/p>\n Au fait, si vous avez besoin de plus de fonctionnalit\u00e9s pour vos tableaux statistiques, vous pouvez consulter les guides suivants qui vous aideront\u00a0:<\/p>\n Vous pouvez facilement personnaliser vos tableaux statistiques avec wpDataTables.<\/p>\n Tr\u00e8s bien, maintenant ce que nous devons faire est de montrer les donn\u00e9es que nous avons sous forme de diagrammes.<\/p>\n Nous allons cr\u00e9er un diagramme circulaire. Pour celui-ci, nous utiliserons la biblioth\u00e8que Highcharts<\/a>. Il existe \u00e9galement deux autres options, selon vos pr\u00e9f\u00e9rences: Google Charts<\/a> et Chartjs<\/a>.<\/p>\n Apr\u00e8s avoir fait une configuration de graphique simple<\/a>, vous vous retrouverez avec de beaux graphiques \u00e0 partir de vos donn\u00e9es statistiques.<\/p>\n Vous verrez que lorsque vous faites cela, wpDataTables affichera une liste des types de graphiques possibles, la liste d\u00e9pendant du moteur de graphique que vous utilisez.<\/p>\n Lorsque nous atteignons l’\u00e9tape "Source de donn\u00e9es", nous devons d\u00e9finir le tableau statistique que nous avons d\u00e9j\u00e0 cr\u00e9\u00e9 pour \u00eatre utilis\u00e9 comme source de donn\u00e9es pour ce graphique.<\/p>\n Maintenant que nous en sommes \u00e0 l’\u00e9tape "Plage de donn\u00e9es", nous devons fournir la plage de donn\u00e9es pour le graphique.<\/p>\n Pour ce faire, nous allons simplement faire glisser et d\u00e9poser les colonnes dont nous avons besoin ou simplement utiliser les boutons fl\u00e9ch\u00e9s. Nous avons choisi les colonnes Articles et Revenus. Dans cette \u00e9tape, nous d\u00e9finissons \u00e9galement l’ option de filtrage Suivre le tableau<\/a> afin d’avoir des graphiques dynamiques apr\u00e8s le tri et le filtrage du tableau.<\/p>\n Une chose \u00e0 savoir est que dans wpDataCharts, vous ne pouvez utiliser qu’une seule colonne de type cha\u00eene (cha\u00eene, date, e-mail) tandis que toutes les autres doivent \u00eatre des entiers ou des flottants.<\/p>\n La prochaine \u00e9tape que nous devons franchir est celle du "Formatage et aper\u00e7u". Les modifications apport\u00e9es sont instantan\u00e9ment visibles sur le graphique qui s’affiche sur le c\u00f4t\u00e9 droit de l’\u00e9cran.<\/p>\n L’\u00e9tape de formatage est divis\u00e9e en cat\u00e9gories repr\u00e9sentant diff\u00e9rents \u00e9l\u00e9ments du graphique.<\/p>\n Ici, nous pouvons personnaliser les graphiques selon nos besoins. Nous pouvons d\u00e9finir une largeur r\u00e9active, un regroupement, diff\u00e9rentes options de personnalisation pour la mise en page, les info-bulles, l’exportation, etc. Lorsque nous avons termin\u00e9, cliquez sur le bouton "Enregistrer le graphique".<\/p>\n La derni\u00e8re \u00e9tape est celle "Enregistrer et obtenir un shortcode" o\u00f9 votre graphique est pr\u00eat. Tout ce que vous avez \u00e0 faire est de copier ce shortcode et de l’ins\u00e9rer sur la m\u00eame page ou publication o\u00f9 vous avez ins\u00e9r\u00e9 le tableau statistique.<\/p>\n Nous allons recr\u00e9er un deuxi\u00e8me graphique avec la biblioth\u00e8que Highchart. Cette fois, nous allons choisir le type de graphique en aires empil\u00e9es.<\/p>\n \u00c0 l’\u00e9tape "Source de donn\u00e9es", nous d\u00e9finissons un tableau de statistiques comme pour un graphique \u00e0 secteurs.<\/p>\n \u00c0 l’\u00e9tape "Plage de donn\u00e9es", nous choisirons les colonnes Articles, Revenu, Co\u00fbt et Profit.<\/p>\n L’option "Suivre le filtrage du tableau" est \u00e9galement activ\u00e9e.<\/p>\n \u00c0 l’\u00e9tape "Formatage et aper\u00e7u", nous d\u00e9finirons des options telles que la largeur r\u00e9active, le tableau de regroupement, les couleurs pour les s\u00e9ries, mais vous pouvez le d\u00e9finir diff\u00e9remment selon vos besoins.<\/p>\n\n
![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee4b505f.png\")
<\/a><\/p>\nSELECT * FROM statistics_table<\/code><\/pre>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee63b493.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee8a7204.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eebe26c5.png\")
<\/a><\/p>\n.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}<\/code><\/pre>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eed74f6c.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eefd0112.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef18e88f.png\")
<\/a><\/p>\n\n
![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef36ae8f.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef51f1ea.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef6455b8.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef87fe1f.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efa64d74.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efcc29c4.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eff8c779.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f00ad5b0.png\")
<\/a><\/p>\n
![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f02ca95c.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f0581e29.png\")
<\/a><\/p>\n