Insérer un diagramme Google Charts dans WordPress n’est pas aussi facile que cela devrait être. Il existe quelques plugins pour se simplifier la vie, mais il sont souvent mal actualisés ou insatisfaisants d’une manière ou d’une autre. Citons tout de même les deux meilleurs:

  • ChartBoot for WordPress est la meilleure solution du moment, mais possède quelques limitations – il faut bien vendre al version Pro. Aspect positif pour bien des utilisateurs: pas besoin de programmer.
  • WP Google Charts fonctionne sur la base de du tableur en ligne Google Spreadsheets, mais est relativement limité puisqu’il n’accepte qu’un jeu d’options assez limité.

Insérer du code Javascript directement dans head, pour chaque post ou page

Si vous cherchez à insérer du Javascript (ou css ou html) directement à l’intérieur de la balise head de vos pages, il y nombre de plugins pour ce faire. Si vous souhaitez ajouter un code Javascript différent en fonction de chaque page ou post, ou bien insérer un code javascript pour certaines pages seulement, comme par exemple le code d’un diagramme Google Charts, voici une solution rapide et facile.

Le plugin WordPress Per page add to head fait exactement ce qu’indique son titre (traduction : ajouter à head en fonction de la page), c’est-à-dire insérer n’importe quel code HTML, JS ou css directement dans la balise head de l’article de votre choix. Copiez-collez cotre code de diagramme Google Charts (ou autre) dans le champ du plugin qui se trouve désormais en bas de chaque article:

Wordpress Plugin - Add code to HTML header - Useful for Google Charts

Bien sûr cela ne dispense pas d’insérer les balises div avec la div id correspondante au graphique souhaité:

Et voilà! Voici un exemple au hasard présentant les 6 plus grandes banques du monde:

 

  • Désormais les librairies jsapi et corechart se chargent seulement pour les articles choisis.
  • Changer le diagramme Google Charts est facile: il suffit de copier-coller le nouveau code depuis n’importe quel éditeur externe.
  • L’exemple ci-dessus est un diagramme en « material design », les digrammes traditionnels fonctionnent également. On peut utiliser la même procédure pour insérer des graphiques D3 (attention, c’est compliqué !), NVD3 ou Charts.js.
  • Mieux vaut prévenir que de tout perdre! N’oubliez pas de sauvegarder le code de chaque diagramme en local dans un fichier texte.

Code du diagramme:

Voici le code du diagramme inséré dans le header par notre plugin: