skip to Main Content

Comment ajouter un calendrier Google Calendar dans vos widgets sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Un bon nombre de blogueurs utilise le service Google Calendar pour gérer leurs différents évènements. Seulement parmi eux, certains ne savent pas comment afficher ces différents calendriers sur WordPress.

Dans ce tutoriel, je vous montrerais comment afficher vos calendriers Google Calendar sur WordPress.

Mais, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Mais revenons vers ce pourquoi nous sommes là.

Comment afficher le calendrier à l’aide du plugin Google Calendar Events

google-calendar-events-plugin

La première chose à faire est bien évidemment d’installer et d’activer le plugin depuis votre tableau de bord.

Découvrez Comment installer un plugin dans WordPress

google-calendar-intallation-tableau-de-bord

Une fois que c’est fait, un nouveau menu « Événements GCal » s’ajoutera à votre tableau de bord. En cliquant dessus, vous accéderez à la page qui liste tous les différents événements disponibles dans votre calendrier Google.

google-cal-menu

Mais avant toute chose, il est nécessaire de procéder aux configurations du plugin. Je vous invite donc à cliquer sur son sous-menu « Paramètres Généraux ».

Dans cette section, vous devez fournir une API de votre compte Google.

google-cal-general-settings

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Si vous n’en possédez pas, je vous invite à en créer directement à cette adresse. Sur cette page, vous devez créer une clé en l’associant à un nouveau projet. Cliquez sur « Créer un projet ».

google-creer-un-projet

Fournissez un nom et cliquez sur « Créer » pour créer un projet.

nouveau-projet-google-api

Cliquez sur le nouveau menu « API et authentification », ensuite sur son sous-menu « API ».

menu-api-google-api

Faites défiler la page vers le bas de sorte à voir la ligne « Google Calendar ».

ligne-google-calendar

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Cliquez sur le bouton « Désactiver » situé à l’extrémité de la ligne pour activer l’API. Une fenêtre vous demandera de confirmer votre action. Faites-le.

Cliquez ensuite sur le menu « Identifiants », et ensuite sur « Créer une clé ».

identifiants-cle-api

Une fenêtre s’ouvrira. Vous devez ensuite cliquer sur le bouton « Clé de serveur » pour créer une clé.

creation-cle-serveur

Une nouvelle fenêtre s’ouvrira. Elle vous permet de restreindre l’accès à cette clé en fonction de certaines adresses IP. Vous n’êtes pas obligés de remplir cette information. Cliquez sur « Créer » pour terminer le processus de création.

ajouter-des-adressses-ip-serveur

Vous pourrez désormais récupérer la clé (copier le texte correspondant) et l’insérer dans le champ correspondant sur votre blog WordPress.

recuperer-la-cle

Enregistrez ensuite vos réglages.

enregistrement-des-reglages

Comment créer et afficher un calendrier

Après avoir configuré le plugin, il est temps d’ajouter votre agenda. Je vous invite donc à cliquer sur le menu « Ajouter » afin d’intégrer votre agenda Google Calendar.

menu-ajouter-un-calendrier-google-calendar

Il s’agit ici d’un « Custom Post Type » (Format de publication personnalisé), pour lequel vous pouvez définir un titre, et personnaliser le template sur le contenu de ce dernier. Plus bas dans la section « Paramètres du flux », vous avez entre autres :

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

  • Le shortcode de l’agenda (utilisable sur vos articles/pages)
  • L’identification de l’agenda Google (Vous avez plus bas un lien vers un tutoriel qui vous permet de récupérer l’identifiant de votre calendrier. Dans la plupart des cas, c’est votre adresse Gmail.)
  • Le mode d’affichage qui vous permet de styler le template du calendrier
  • L’activation de la pagination qui vous permet de naviguer dans le calendrier.

La section « Options d’affichage », vous permet de personnaliser le template disponible par défaut sur l’éditeur visuel.

ajout-d-un-evenement

Il vous suffit désormais d’ajouter le shortcode correspondant à votre calendrier dans une page ou un article de votre blog afin de voir comment ce dernier s’affiche.

présentation-calendrier

C’est tout pour ce tutoriel, si un point soulevé ici échappe à votre compréhension, nous serons heureux de vous apporter assistance. N’hésitez pas à partager cette astuce avec vos amis sur vos réseaux sociaux préférés.

Cet article comporte 29 commentaires
  1. Heuu , j »aime bien votre site et vos articles sont souvent claires.
    Mais là, soit le plugin a bien évolué soit vous êtes allé un peu vite dans les étapes.
    Apres avoir integrer la clé API, comment fait on pour lier le calendrier?
    Si creer un nouvel événement je ne peux que le saisir a la main .

    Je ne me considere pas comme newbee en CMS mais la je suis perdu.
    Vraiment la partie « comment afficher votre calendrier » ne correspond en rien a ce que je peu trouver sur mon FO.

  2. Bonjour,
    J’aimerais savoir s’il est possible de faire du calendrier de google un calendrier de réservation. J’ai réussi à l’intégrer à mon site en tant qu’afficheur d’events mais j’aimerais que le visiteur puisse aussi interagir avec et réserver certains créneaux. Est-ce possible?
    Par ailleurs, actuellement il m’affiche les event sur tout un mois et je préférerais avoir la vue par défaut du calendar: c’est à dire un affichage par semaine avec les créneaux horaires bien visibles pour permettre la réservation. Est-ce possible?
    Merci d’avance.

    1. Je pense que c’est possible, mais vous aurez besoin d’un plugin intermédiaire qui facilitera le travail. Pour l’affichage, je n’ai pas encore configuré autre chose que l’affichage mensuel. Je ferai un test et je vous le ferai savoir.

  3. Bonjour,
    ce tuto fonctionne-t-il avec d’autres plugins? Le seul qui est installé pour moi est Simple Calendar, et je n’arrive pas à intégrer le calendrier.
    Voici le message d’erreur recu :
    Lors de la récupération des évènements, Google a renvoyé une erreur :
    Failed to connect to 2a00:1450:4007:80d::200a: Network is unreachable
    Assurez-vous qu’à la fois votre ID de Calendrier Google et votre clé API sont valides et que le calendrier Google que vous souhaitez est défini comme public.

    Je précise que le calendrier est bien défini en public et que j’ai activé une clé API.
    Cordialement

  4. Bonjour,

    J’aimerais savoir s’il est possible de modifier la direction du lien « Plus de détails… », pour éviter la redirection vers le site de google calendar et au contraire, rester en interne avec l’affichage de la page « calendar » du même site… ?

    Comment faut-il faire ? Merci d’avance !

    1. Bonjour,
      Si vous souhaitez utiliser un autre lien autre que celui ajouté par le shortcode, vous pouvez tout simplement omettre d’utiliser ce shortcode.

      Désolé pour la réponse tardive.

      Cordialement.

  5. Bonjour…

    Existe-t-il un moyen de planifier la publication d’articles de manière récurrente ou non ?
    Je m’explique. J’ai une émission radio et j’aimerai que publie automatiquement chaque semaine le même jour à la même heure un article stipulant que c’est l’heure d’écouter telle radio…

    Merci.

  6. Bonjour
    Merci pour votre tutoriel
    Bien installé
    Tout récupéré, cependant les maj du calendrier gmail vers le calendrier intégré sous WordPress se font tous les combien de temps ?
    La réplication peut elle se parametrer ?
    Merci

    1. Bonjour,

      Nous n’avons pas encore testé ces différents aspects du plugin Google Calendar. Nous vous invitons donc à faire une petite recherche sur internet.

      Thierry

  7. Bonjour,
    j’ai suivi toutes les instructions qui sont d’ailleurs très claires.
    par contre j’ai un message d’erreur « L’ID de l’agenda n’a pas été indiqué. Veuillez vérifier qu’il est défini correctement dans la configuration. »
    Et l’agenda ne se mets pas à jour.
    Comment corrige-t-on ce problème ?
    Merci

    1. Bonjour,
      Avez-vous un calendrier disponible ? Car d’après ce que je lis, aucun identifiant d’un agenda n’est disponible. Essayez de créer un calendrier (j’ai peut être oublié de le mentionner dans le tutoriel).
      Si le problème persiste contactez-nous.

  8. Bonjour,
    J’ai suivi votre tuto mais lorsque je me rends sur mon site j’obtiens ce message d’erreur :
    « Des données ont été retrouvées mais n’ont pu être analysées. Assurez-vous que les paramètres de votre agenda sont corrects »
    Avez vous une explication à ce problème ?
    Merci

    1. Bonjour,
      vous êtes vous assuré que l’API de google a correctement été enregistrée ? Cette erreur également signifier que votre calendrier contient des données illisibles ou invalides.
      Assurez-vous également que les différents shortcodes ont été enregistré normalement.
      Si le problème persiste contactez nous a nouveau

  9. Bonjour et merci infiniment pour ce tutoriel en français accessible à la débutante que je suis.. Je pense avoir réussi à installer correctement le Google Calendar sur le site que je gère.. mais j’aurais souhaité pouvoir mettre en « relief » les dates relatives aux événement annoncés et là.. je bloque !! y a -t-il une manip particulière à effectuer? ou un loupé dans mon installation?..Si oui, merci de bien vouloir me l’indiquer.. Cordialement Chantal Audivert

    1. Bonjour Chantal,

      Désolé mais ceci requiert peut-être l’utilisation d’un code css. Et si tel est le cas, alors il faudrait peut-être contacter notre service payant pour en savoir plus.

      Mais je crois que vous pouvez également trouver gratuitement des asctuces pour le faire sur internet.

    2. Bonsoir
      en effet cela nécessite l’utilisation d’un code CSS personnalisée…. en outre Google calendar propose en calendrier mieux coloré que vous pouvez manuellement ajouter à votre blog.

  10. Bonjour,
    J’ai bien suivi vos explications , j’ai installe le plugin Google Calendar , j’ai eu la clé API de Google que j’ai enregistré par contre je n’ai pas Evenements GCAL dans l’acceuil du menu WordPress donc je suis bloqué sur comment créer et afficher un calendrier.
    J’ai du probablement oublié quelque chose , avez vous une idée ?

    1. Bonjour,
      Avez-vous essayer d’utiliser le shortcode fourni ? En effet, chaque calendrier à un shortcode que vous pourrez ajouter sur une page ou un article de votre choix.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
780 Partages
Partagez777
Tweetez1
Enregistrer2