Comment créer des barres et des graphiques dans WordPress avec Visualizer

Comment créer des barres et des graphiques dans WordPress avec Visualizer / Plugins WordPress

Voulez-vous ajouter des barres et des graphiques dans WordPress? Les aides visuelles telles que les graphiques, les barres, les camemberts et autres constituent un moyen idéal d’ajouter des données à 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.

Le problème des barres et des 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 de nos utilisateurs est que ces plugins sont généralement trop compliqués à utiliser..

Certains de ces plugins attendent même des utilisateurs qu'ils ajoutent des données dans 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 images..

Cela pourrait fonctionner si vous envisagez de ne jamais le changer. Cependant, une image ne remplace pas un graphique interactif dans lequel des données utiles apparaissent lorsque l'utilisateur survole une section donnée avec la souris..

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

  • Ajouter des données d'une source de données sur votre ordinateur ou sur le Web.
  • Remplir des graphiques, des camemberts, des graphiques et des barres en utilisant vos données.
  • Créez de magnifiques graphiques interactifs, colorés et mobiles.
  • Plus important encore, il devrait vous permettre de mettre à jour les données quand vous le souhaitez.

Cela dit, voyons comment le plugin Graphes et Graphes de Visualizer WordPress vous aide à faire tout cela.

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

La première chose à faire est d’installer et d’activer le plugin Visualizer WordPress Charts and Graphs. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..

Bien que la version gratuite fasse presque tout ce dont vous avez besoin, Visualizer Charts and Graphs Pro ajoute des fonctionnalités supplémentaires au plug-in, telles que l'ajout direct de données à l'aide d'une feuille de calcul, telle qu'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 d'assistance technique et de mises à jour.

Remarque: Ce tutoriel concerne la version gratuite du plugin.

Lors de l'activation, vous devez visiter Média »Visualizer Library page. C'est là que tous vos tableaux et graphiques apparaîtront.

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

Cela fera apparaître une fenêtre popup à 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..

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 avec Excel, Google Sheets ou 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 "De l'ordinateur"..

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 plugin supporte les types de données suivants: chaîne, nombre, booléen, date, heure date et heure du jour.

Regardez cet exemple de fichier que nous avons créé dans Google Sheets..

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


Navigateur, visiteurs
chaîne, nombres
Chrome, 7894
Firefox, 6754
Internet Explorer, 4230
Safari, 2106
Opéra, 627

Ajout d'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.

Cela fera apparaître une fenêtre contextuelle dans laquelle vous devrez sélectionner le mode de publication de ce document. Vous devez sélectionner Valeurs séparées par des virgules (.csv) dans le menu déroulant..

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

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

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

Dès que vous entrez l'URL, le plug-in récupérera votre fichier CSV et affichera un aperçu en direct de votre graphique..

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

Ajouter un graphique ou un graphique dans les publications / pages WordPress

Ajouter un graphique ou un graphique à vos publications et pages WordPress est aussi simple que d’ajouter des images.

Créez un nouvel article / une nouvelle page ou modifiez un article existant auquel 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..

Cela fera apparaître le popup WordPress Media Upload. Vous devez cliquer sur l'onglet Visualisations dans la colonne de gauche. Il chargera toutes les cartes que vous avez créées et enregistrées sur ce site..

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

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

Modification de vos graphiques de visualiseur dans WordPress

Vous pouvez éditer et changer vos graphiques à tout moment. Il suffit de visiter Média »Visualizer Library page. De là, vous pouvez cloner un graphique, le supprimer ou modifier ses paramètres visuels..

Mettre à jour les données d'un graphique existant sans le modifier est assez simple 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 de votre feuille de calcul et d'aller à Fichier »Publier sur le Web et republiez votre feuille de calcul. Vos modifications seront automatiquement reflétées dans votre graphique.

Par contre, si vous avez téléchargé un fichier CSV, vous devez le mettre à jour 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 un fichier CSV, téléchargez simplement votre nouveau fichier CSV. Les modifications apportées aux données seront automatiquement reflétées 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 courts pour insérer des graphiques. Il suffit d'aller à "Visualizer Media", là vous verrez un shortcode en dessous de vos cartes.

Copiez le shortcode et allez à Apparence "Widgets. Glissez et déposez un widget texte dans votre barre latérale et collez le shortcode à l'intérieur du widget..

Si le shortcode ne fonctionne pas dans le widget texte, consultez notre guide sur l'utilisation des shortcodes dans les widgets de la barre latérale de 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 vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.