J’ai réalisé une prestation pour promouvoir la location d’une maison de vacances en Andalousie. Ce client voulait en fait trois sites différents, hébergés dans les trois pays-cibles de sa clientèle, et rédigés dans les trois langues (France-Royaume Uni-Espagne). Il fallait insérer un calendrier sur chacun des trois sites, avec les disponibilités de la location, et que ce calendrier soit commun aux trois sites bien entendu. Mon choix s’est porté sur le calendrier de Google, gratuit, pratique, léger et efficace.
Quand c’est possible, j’aime éviter d’installer des plugins à tort et à travers sur WordPress, car leur multiplication a la fâcheuse tendance de transformer un site en limace neurasthénique et d’agacer de fait les visiteurs. Donc je vous propose d’insérer un calendrier en ligne de code dans WordPress, sans plugin. Voici comment faire…
Préparation du calendrier Google
Votre calendrier Google va devenir public (sur votre site), donc il est recommandé de créer un compte Google dédié à ce site, cela vous donnera aussi une adresse mail et toute une batterie de services utiles.
1- Créer un compte Google : c’est par ici.
2- Préparez la présentation de l’agenda :
Indiquez un maximum de détails précis sur le titre et le lieu, car l’Agenda sera accessible dans les moteurs de recherche et peut donc vous ramener des visiteurs. Cliquez ensuite sur « Personnaliser la taille, la couleur et d’autres options ». Voici ce qui doit s’afficher
La colonne de gauche est dédiée à la personnalisation de la visualisation (semaine, mois…) des couleurs, des dimensions, etc… La partie droite permet de se rendre compte de l’affichage généré par les paramètres de la partie gauche. Enfin, la partie haute est un générateur de code HTML. Quand l’affichage de droite vous convient, cliquez sur « Mettre à jour le code HTML », et copiez le code HTML qui est dans la fenêtre. Allez sur votre calendrier et rendez-le public : Paramètres / Paramètres de Agenda / Agendas / Partage / Rendre cet agenda public.
Insertion dans votre page Web
Dans APPARENCE/ÉDITEUR, choisir le modèle de page sur lequel on souhaite insérer le calendrier, par exemple page.php, ou index.php, ou tout autre modèle de page (je vous indiquerais plus tard comment créer différents modèles de pages dans WordPress). A l’aide de votre client FTP (Filezilla par exemple), recopiez cette page en local sur votre PC. Ouvrez le fichier à l’aide de Notepad++ ou de tout autre éditeur de texte Au début du fichier, notez le code suivant à la place de celui indiquant le nom de la page.
<?php /* Template Name: Google Calendar */ ?> <?php
Collez le IFRAME (code HTML de votre Google Agenda) juste après l’appel du Content dans la page.
<?php the_content(‘Read the rest of this entry »’); /* insertion du code IFRAME du Google Calendar ci dessous 2 lignes plus bas */ ?> <iframe src= »https://www.google.com/calendar/embed?title=(etc…) style= » border-width:0 » width= »600″ height= »400″ frameborder= »0″ scrolling= »no »></iframe>
Puis enregistrez la page modifiée en local sous le nom « page_googlecal.php »
Il ne vous reste plus qu’à créer une nouvelle page, et utiliser le modèle que vous avez créé « Google Calendar ».
Publiez la page, vérifiez l’affichage, etc…. En général, on a besoin d’effectuer des ajustements sur les dimensions, parfois les couleurs,… Retournez sur le générateur de code HTML, adaptez l’affichage, rafraichissez le code HTML et recopiez le en lieu et place de l’ancien dans votre page_googlecal.php via l’éditeur d’apparence. Si vous voulez utiliser toute la largeur disponible, notez width=100% à la place de width=XXX où XXX est une valeur en pixels.
Bravo !