Voulez-vous ajouter des barres et des graphiques dans WordPress ? Les aides visuelles telles que les graphiques, les barres, les camemberts et autres sont un moyen idéal d'ajouter des données magnifiquement à votre contenu. Dans cet article, nous allons vous montrer comment créer des barres et des graphiques dans WordPress avec le plugin Visualizer WordPress Charts and Graphs.

Ajouter des tableaux et des graphiques dans WordPress

Le problème avec les barres et les graphiques dans WordPress

Il existe de nombreux plugins WordPress pour ajouter des barres, des graphiques et des graphiques avec votre contenu. Cependant, la plainte la plus courante que nous avons entendue de la part de nos utilisateurs est que ces plugins sont généralement trop compliqués à utiliser.

Certains de ces plugins s'attendent même à ce que les utilisateurs ajoutent des données à l'intérieur d'un shortcode dans des formats extrêmement compliqués.

Au lieu d'utiliser ces plugins, de nombreux utilisateurs finissent par créer des graphiques dans leurs applications bureautiques et les convertir en image.

Cela pourrait fonctionner si vous prévoyez de ne jamais le changer. Cependant, une image ne remplace pas un graphique interactif où des données utiles apparaissent lorsque l'utilisateur passe sa souris sur une section particulière.

Une solution idéale de diagrammes et de graphiques vous permettrait de :

  • Ajoutez des données à partir d'une source de données sur votre ordinateur ou sur le Web.
  • Remplissez des diagrammes, des secteurs, des graphiques et des barres à l'aide de vos données.
  • Créez de beaux graphiques interactifs, colorés et adaptés aux mobiles.
  • Plus important encore, il devrait vous permettre de mettre à jour les données quand vous le souhaitez.

Cela dit, voyons comment le plugin Visualizer WordPress Charts and Graphs vous aide à faire tout cela.

Création de barres et de graphiques dans WordPress avec Visualizer

La première chose que vous devez faire est d'installer et d'activer le Tableaux et graphiques du visualiseur WordPress brancher. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

Alors que la version gratuite fait presque tout ce dont vous avez besoin, ils ont également Visualizer Charts et Graphs Pro qui ajoutent des fonctionnalités supplémentaires au plugin telles que l'ajout de données directement à l'aide d'une feuille de calcul comme une interface et l'importation de données à partir d'autres graphiques.

Il en coûte 79 $ pour une licence de site unique avec un an de support professionnel et de mises à jour.

Noter: Ce tutoriel concerne la version gratuite du plugin.

Lors de l'activation, vous devez visiter Médias » Bibliothèque de visualiseurs page. C'est là que tous vos tableaux et graphiques apparaîtront.

Ajouter un nouveau graphique

Vous devez cliquer sur le bouton Ajouter nouveau pour ajouter votre premier graphique.

Cela fera apparaître une fenêtre contextuelle à l'écran. Vous verrez différents types de graphiques disponibles avec le plugin. Sélectionnez simplement le type de graphique que vous souhaitez ajouter et cliquez sur le bouton suivant pour continuer.

Sélectionnez un type de graphique

L'étape suivante consiste à ajouter votre source de données au format CSV. Si vous avez enregistré vos données sous forme de feuille de calcul à l'aide d'Excel, de Google Sheets ou de tout autre programme, vous pouvez simplement les exporter sous forme de fichier CSV.

Vous pouvez télécharger ou enregistrer votre fichier CSV sur votre ordinateur, puis le télécharger en cliquant sur le bouton “Depuis l'ordinateur”.

Ajoutez votre fichier CSV comme source de données pour le graphique

Votre fichier CSV doit avoir des noms de colonne dans la première ligne et un type de données dans la deuxième ligne. Le plug-in prend en charge ces types de données : chaîne, nombre, booléen, date, heure et heure du jour.

Jetez un œil à cet exemple de fichier que nous avons créé dans Google Sheets.

Exemple de fichier CSV

Si vous créez un fichier CSV à l'aide d'un éditeur de texte, consultez cet exemple de fichier CSV :


Browser,visitors
string,numbers
Chrome,7894
Firefox,6754
Internet Explorer,4230
Safari,2106
Opera,627

Ajouter un graphique dans WordPress à l'aide de la feuille de calcul Google Drive

Si vos données de graphique sont enregistrées sous forme de feuille de calcul sur Google Drive, vous pouvez les ajouter à votre graphique sans les exporter.

Ouvrez votre fichier de données dans Google Spreadsheets puis cliquez sur Fichier » Publier sur le Web.

Publier sur le Web

Cela fera apparaître une fenêtre contextuelle dans laquelle vous devrez sélectionner la manière dont vous souhaitez publier ce document. Vous devez sélectionner Comma Separated Values ​​(.csv) dans le menu déroulant.

Publiez votre feuille au format CSV

N'oubliez pas de cliquer sur le bouton ‘Publier'.

Vous verrez maintenant l'URL accessible au public de votre feuille sous forme de fichier CSV. Vous devez copier cette URL et revenir au graphique Visualizer.

Cliquez sur le bouton À partir du Web, puis entrez l'URL du fichier csv de votre feuille de calcul Google.

Ajout d'une URL au fichier CSV de votre feuille de calcul Google

Dès que vous entrez l'URL, le plugin récupère votre fichier CSV et affiche un aperçu en direct de votre graphique.

Vous pouvez maintenant cliquer sur le bouton Créer un graphique pour enregistrer votre graphique.

Ajout d'un tableau ou d'un graphique dans les publications/pages WordPress

Ajouter un tableau ou un graphique à vos articles et pages WordPress est aussi simple que d'ajouter des images.

Créez une nouvelle publication / page ou modifiez-en une existante à laquelle vous souhaitez ajouter le graphique. Sur l'écran d'édition, cliquez sur le bouton Ajouter un média au-dessus de l'éditeur de publication.

Bouton Ajouter un média

Cela fera apparaître la fenêtre contextuelle de téléchargement de médias WordPress. Vous devez cliquer sur l'onglet des visualisations dans la colonne de gauche. Il chargera tous les graphiques que vous avez créés et enregistrés sur ce site.

Insérez un graphique dans vos articles ou votre page WordPress

Cliquez sur l'icône d'insertion sous votre graphique. La fenêtre contextuelle disparaîtra et vous verrez votre graphique ajouté à votre publication WordPress en tant que shortcode.

Code abrégé du graphique

Vous pouvez maintenant enregistrer votre article ou votre page WordPress et visiter votre site Web pour voir le graphique intégré à votre article WordPress.

Modification de vos graphiques Visualizer dans WordPress

Vous pouvez modifier et modifier vos graphiques à tout moment. Visitez simplement Médias » Bibliothèque de visualiseurs page. À partir de là, vous pouvez cloner un graphique, le supprimer ou modifier ses paramètres visuels.

Modifiez ou gérez vos graphiques dans WordPress

La mise à jour des données d'un graphique existant sans modifier le graphique est assez facile avec Visualizer.

Si vous avez ajouté des données à partir d'une feuille de calcul Google, il vous suffit de mettre à jour les données dans votre feuille de calcul et d'accéder à Fichier » Publier sur le Web et republiez votre feuille de calcul. Vos modifications seront automatiquement reflétées dans votre graphique.

D'autre part, si vous avez téléchargé un fichier CSV, vous devez mettre à jour le fichier CSV sur votre ordinateur. Une fois cela fait, sélectionnez le graphique que vous souhaitez mettre à jour et cliquez sur le lien Modifier sous le graphique.

Dans la section Télécharger le fichier CSV, téléchargez simplement votre nouveau fichier CSV. Les modifications apportées aux données se refléteront automatiquement dans les publications ou les pages où vous avez inséré ce graphique.

Ajouter un graphique dans un widget WordPress Sidebar

Visualizer utilise des codes abrégés pour insérer des graphiques. Allez simplement sur Médias » Bibliothèque de visualiseursvous y verrez un shortcode sous vos graphiques.

Copiez le shortcode et accédez à Apparence » Widgets. Faites glisser et déposez un widget de texte dans votre barre latérale et collez le shortcode à l'intérieur du widget.

Si le shortcode ne fonctionne pas dans le widget de texte, consultez notre guide sur l'utilisation des shortcodes dans les widgets de la barre latérale WordPress.

Nous espérons que cet article vous a aidé à ajouter des barres et des graphiques dans votre site WordPress. Vous pouvez également consulter notre liste de 24 plugins WordPress indispensables pour les sites Web professionnels.

Si cet article vous a plu, abonnez-vous à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.