Une salutation météo élégante pour vos visiteurs WordPress:

Je suis heureux de vous présenter mon dernier projet open source : un plugin WordPress, moderne et esthétique qui affiche la météo actuelle de l’utilisateur, avec une icône animée, un fond dégradé dynamique, et une infobulle au survol :

Weather Greeting Plugin sur GitHub

Objectif du plugin:

L’idée est simple : accueillir vos visiteurs avec une salutation météo en temps réel, en se basant sur leur géolocalisation (par adresse IP), et en affichant :

  • Le nom de la ville
  • La température actuelle
  • Une icône météo animée issue de Weather Icons
  • Une infobulle affichant la description météo (ex : « ciel dégagé »)
  • Un fond en dégradé selon le type de météo (ensoleillé, pluvieux, neigeux, etc.)

Fonctionnement technique

Le plugin utilise :

  • L’API OpenWeatherMap pour récupérer les données météo
  • L’API ipapi.co pour détecter la position de l’utilisateur
  • Du JavaScript moderne pour le rendu dynamique côté client
  • Une mise en cache locale (via localStorage) pendant 30 minutes pour éviter trop d’appels API
  • Le tout stylisé avec les icônes Weather Icons et un CSS léger

Comment l’utiliser ?

1. Téléchargez ou clonez le plugin :

git clone https://github.com/diaa-hariri/weather-greeting-plugin.git

2. Placez le dossier dans /wp-content/plugins/
3. Activez le plugin depuis l’interface WordPress
4. Ajoutez le shortcode suivant à l’endroit où vous souhaitez afficher la météo :

[weather_greeting]

Et c’est tout !

Code source et licence

Le code est disponible ici :
https://github.com/diaa-hariri/weather-greeting-plugin

Il est publié sous licence libre (MIT) — vous êtes libre de l’utiliser, le modifier ou le distribuer.

Conclusion

Ce plugin est un petit outil sympa pour apporter une touche personnelle et interactive à votre site WordPress.
J’espère qu’il vous plaira — n’hésitez pas à l’essayer, à le partager et à contribuer !

Pour toute question ou amélioration, contactez-moi sur GitHub ou via mon site :
https://hariri.ch

Merci et bonne météo à tous ! ☀️ ❄️ 🌧️

0 comments

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>