Comment afficher une cellule Google Sheets dans WordPress

Comment afficher dans WordPress une valeur changeante sans modifier constamment a page?

On a parfois besoin d’avoir du contenu dynamique sous WordPress. Si ce contenu change trop souvent, modifier la page à chaque fois n’est pas la meilleure solution et est une perte de temps considérable.

Je vais vous montrer étape par étape comment avoir une page avec du contenu mis à jour directement depuis une feuille Google Sheets.

Quels scenario d’utilisation?

Voici tout d’abord quelques cas d’utilisation qui permettent de tirer parti d’une telle solution.

  • Afficher un nombre de places encore disponible à un événement.
  • Afficher un nombre d’inscrits
  • Afficher le pourcentage d’avancement d’un projet.
  • Afficher un compte à rebours.

Si vous utiliser WordPress pour vendre, vous pouvez ainsi bâtir de nombreux scenarii utilisant par exemple le sentiment d’urgence.

Un peu de préparation dans Google Sheets

Créer (ou récupérer un existant) un projet d’API

Commencez par vous connecter sur la console développeurs de Google

Console Google Developer
Console Google Developer

Dans la catégorie GSuite sélectionnez ‌Google Sheets API

Activation de l'API Google Sheets
Activation de l’API Google Sheets

Cliquez sur Enable et attendez quelques secondes que les serveurs travaillent un peu.

Création de la clef d’API (API Key)

Elle servira à vous identifier. Il en existe de plusieurs types mais on va faire au plus simple pour cette fois-ci. Malheureusement cette option est un peu cachée dans l’interface.

On recherche l'option clef d'API
On recherche l’option clef d’API

  1. Cliquez sur Credentials
  2. Puis sur Create Credential
  3. Puis sur Help me choose
Choix de la clef d'API
Choix de la clef d’API

Cliquez ensuite sur API key

Création de la clef d'API
Création de la clef d’API

J’ai choisi ici de n’imposer aucune restriction mais pour plus de sécurité vous pouvez en ajouter. Je vous conseille cependant de commencer sans et de les ajouter une fois que tout fonctionne. (si ça ne fonctionne plus, vous saurez d’où ça vient)

Donnez un nom à votre clef et cliquez sur Create. Voilà, votre clef est créée. Bien entendu vous devez la garder privée. C’est comme un mot de passe, si une tierce personne la possède, vous pouvez subir un usage malveillant.

Créez ou rendez une feuille de calcul partageable par un lien

Connectez-vous à Google Sheets. Ouvrez alors un classeur existant ou créez-en un.

Rendons le classeur partageable par lien
Rendons le classeur partageable par lien

Cliquez ensuite sur Share et Copy Link

Le classeur est bien partagé
Le classeur est bien partagé

Cliquez enfin sur Done

Récupérons l’ID de classeur

Maintenant que le classeur est partageable par un lien, nous allons récupérer son ID. Son ID est un identifiant unique propre à Google Sheets. C’est une longue séquence de chiffres et de lettres. Pour le connaitre, passer le classeur en mode edition et regardez l’adresse:

Et voici l'ID du classeur
Et voici l’ID du classeur

C’est la partie entre les deux / Copiez-là et collez-là dans un endroit facile d’accès. Nous allons bientôt nous en servir.

Note: L’ID de la capture d’écran est lamine. Le votre doit forcément être différent.

Passons à WordPress

Pour l’instant nous n’avons pas beaucoup parlé de WordPress. Son tour est maintenant venu. Avant d’allez plus loin je considère que vous avez une installation WordPress auto-hébergée et que vous disposez des droits et informations nécessaires pour y apporter des modifications.

Un peu de code

Une des forces (et souvent faiblesses) de WordPress, c’est sa flexibilité. Pour aller plus loin, nous allons devoir écrire un peu de code. Rassurez-vous il est déjà écrit et vous n’aurez qu’à le copier/coller. Il existe donc plusieurs endroits où l’on peut mettre ce code:

  • Dans le fichier functions.php de votre theme. Avantage, c’est le plus simple et rapide. Inconvénient, c’est lié au thème et donc si vous en changez, cela ne fonctionnera plus.
  • Dans un plugin dédié. Beaucoup plus compliqué à mettre en place mais c’est la façon la plus propre.

Dans le but de cet article et afin de rester simple (l’écriture d’un plugin pourrait faire l’objet de toute une série d’articles) nous allons prendre la première option.

Nous allons donc ajouter le code suivant à functions.php

function get_google_sheets_value_shortcode($atts) {
    $API = '<Votre Clef>';
    $spreadsheet_ID = '<Votre ID de classeur>';
    $api_key = esc_attr( $API);

    $location = $atts['location'];

    $get_cell = new WP_Http();
    $cell_url = "https://sheets.googleapis.com/v4/spreadsheets/$spreadsheet_ID/values/$location?&key=$api_key"; 
    $cell_response = $get_cell -> get( $cell_url);
    $json_body = json_decode($cell_response['body'],true);  
    $cell_value = $json_body['values'][0][0];
    return $cell_value; 
}
add_shortcode('get_google_sheet_value', 'get_google_sheets_value_shortcode');

Pensez à remplacer $API = '<Votre Clef>'; ainsi que $spreadsheet_ID = '<Votre ID de classeur>';

Utilisons notre nouveau shortcode

Dans une page ou un article, utilisez le shortcode de la façon suivante:

Comment trouver l’emplacement de la cellule?

Chaque classeur possède un ensemble de feuilles. Ce sont les onglets que vous voyez en bas de l’écran:

Classeur, feuille et cellule
Classeur, feuille et cellule

L’emplacement est alors pour nous: Sheet1!A1 ce qui nous donne au final: Bonjour depuis Google Sheets!

Note: il est également possible d’utiliser des plages nommées.

En pratique

Voici le contenu de la cellule:

Bonjour depuis Google Sheets!

Remarques et possibilité d’améliorations

  • Le nombre maximum d’appels à l’API est de 100 appels par seconde avec la version de base gratuite. Si vous souhaitez aller au delà, vous devrez envisager une version payante.
  • Attention aux plugins de cache, il est préférable de ne pas mettre en cache les pages contenant un tel shortcode.

4 commentaires sur “Comment afficher une cellule Google Sheets dans WordPress

  1. Bonjour, il manque la partie « Utilisons notre nouveau shortcode » dans l’article. Le code est manquant. Pourriez-vous me le faire parvenir ? Très intéressant, en passant ! Merci

    1. Merci d’avoir signalé le problème. Une mise à jour de WordPress a interprété le shortcode. Je l’ai ajouté en tant qu’image pour éviter que cela se reproduise.

  2. Bonjour,
    Je me permets de vous envoyer ce message car j’ai suivi toute la procédure et le shortcode ne fonctionne pas. Il y a t’il eu un changement de puis le mois de mai ?
    Par avance merci pour votre réponse

Laisser un commentaire