Comment créer un plugin météo WordPress avec Open Weather Map
Si votre site WordPress mérite une touche météorologique, ce guide est fait pour vous ! Nous vous conduisons à travers le processus pour établir votre propre extension WordPress, qui fournira des prévisions météo en temps réel par l’intermédiaire d’Open Weather Map. Effectivement, on va “programmer le climat” !
La mise en route : préparatifs
La première étape est de vous assurer que votre installation de WordPress fonctionne correctement et que vous disposez des droits d’administrateur. Pour cela, rendez-vous sur votre page d’administration WordPress. Avant de plonger dans l’aventure de la création de votre propre plugin, créons l’espace de travail nécessaire.
Etablir un emplacement pour votre plugin
Dans le dossier wp-content/plugins de votre site WordPress, élaborez un dossier destiné à abriter votre nouvelle extension. Veillez à ce que le nom de ce dossier soit unique pour éviter toute confusion. Par exemple, “meteo_openweathermap”.
Dans ce dossier flambant neuf, nous allons équiper notre extension WordPress des fonctionnalités nécessaires grâce à un fichier PHP. Créez un fichier PHP à cet effet, et préparez un éditeur de texte, comme Sublime Text ou Visual Studio Code, pour l’édition. Nommons ce fichier “meteo_openweathermap.php”.
Préparation du fichier PHP de base
Chaque plugin WordPress nécessite un en-tête spécifique qui lui permet d’être reconnu par le système. Notre fichier “meteo_openweathermap.php” devrait ressembler à ceci :
/** * Plugin Name: Météo OpenWeatherMap * Plugin URI: https://votresite.com/meteo_openweathermap * Description: Un plugin simple et ludique pour afficher la météo grâce à OpenWeatherMap * Version: 1.0 * Author: Votre nom * Author URI: https://votresite.com/ **/
Notez que “Plugin Name” et “Plugin URI” sont primordiaux. Le nom du plugin apparaîtra sur votre page d’administration WordPress, tandis que l’URI du plugin peut servir à obtenir plus d’informations ou de mises à jour.
Intégration d’Open Weather Map
Maintenant que nous avons préparé notre espace de travail et que le plugin est reconnu par WordPress, il est temps d’intégrer Open Weather Map. Pour cela, vous aurez besoin de votre clé API Open Weather Map.
Récupération des données météo
Dans le fichier “meteo_openweathermap.php”, nous allons utiliser la clé API pour récupérer les données météo. Pour ce faire, nous allons définir une fonction qui utilisera l’API. Voici comment cela pourrait être fait :
function get_weather_data($city){
$api_key = "votre_clé_API";
$response = wp_remote_get("http://api.openweathermap.org/data/2.5/weather?q={$city}&appid={$api_key}");
if ( is_wp_error( $response ) ) {
return null;
}
$body = wp_remote_retrieve_body( $response );
$data = json_decode( $body );
if( !empty($data) ) {
return $data->weather;
} else {
return null;
}
}
Instauration du shortcode
Maintenant que les données sont accessibles, l’étape suivante consiste à créer une manière de les afficher. Ici entre en jeu notre fidèle acolyte WordPress : le shortcode. Pour générer ce shortcode, nous utiliserons la boucle foreach PHP afin de parcourir et afficher les données.
Création du shortcode
Voici comment instaurer un shortcode simple pour montrer les informations météo dans une page ou un article :
function weather_shortcode($atts){
$atts = shortcode_atts(array(
'city' => 'Paris'
), $atts, 'weather');
$data = get_weather_data($atts['city']);
if( !empty($data) ) {
$output = '';
foreach ($data[0] as $key => $value){
$output .= "{$key}: {$value}<br>";
}
return $output;
} else {
return 'Unable to retrieve weather data.';
}
}
add_shortcode('weather', 'weather_shortcode');
Dans cet exemple, nous avons conçu un shortcode “[weather]” qui peut être incorporé dans le titre de la page, un post, ou où bon vous semble sur votre site WordPress.
Voici le résultat que vous devriez obtenir :
id: 803 main: Clouds description: broken clouds icon: 04d
Personnalisation du shortcode pour un meilleur rendu
Corrigeons notre fonction weather_shortcode de cette manière :
function weather_shortcode($atts){
$atts = shortcode_atts(array(
'city' => 'Paris'
), $atts, 'weather');
$data = get_weather_data($atts['city']);
if( !empty($data) ) {
$weather_main = $data[0]->main;
$emoji = "";
switch($weather_main) {
case "Clear":
$emoji = "☀️";
$weather_fr = "Dégagé";
break;
case "Clouds":
$emoji = "☁️";
$weather_fr = "Nuageux";
break;
case "Snow":
$emoji = "❄️";
$weather_fr = "Neigeux";
break;
default:
$emoji = "☀️";
$weather_fr = $weather_main;
}
$output = "La météo à {$atts['city']} est actuellement : {$weather_fr} {$emoji}. Bonne journée !";
return $output;
} else {
return 'Impossible de récupérer les données météo.';
}
}
add_shortcode('weather', 'weather_shortcode');
Vos devriez désormais voir ce type de résultat (qui sera différent en fonction de la météo)
“La météo à Paris est actuellement : Nuageux ☁️. Bonne journée !”
Avec ce nouveau code, notre plugin affiche maintenant la météo en français, tout en gardant notre petit touche amusante avec les émojis. Par exemple, si le temps est dégagé (“Clear”) à Paris, le shortcode [weather city="Paris"] produira désormais “La météo à Paris est actuellement : Dégagé ☀️. Bonne journée !”.
Notre plugin WordPress fait maintenant plus que fournir des informations météo, il le fait avec du style ! Que ce soit une journée dégagée ☀️, nuageuse ☁️, pluvieuse ????️, ou même neigeuse ❄️, nous avons réussi à égayer notre site WordPress avec une touche météorologique colorée et conviviale. Alors, n’oubliez pas, que le temps soit clément ou capricieux, chaque jour est une opportunité pour créer quelque chose de nouveau. Amusez-vous avec votre plugin météo et continuez à coder !
Astuce ensoleillée : Les grands développeurs ne cessent jamais d’apprendre. Pour rendre votre plugin encore plus robuste, songez à approfondir les fonctionnalités avancées de PHP et les astuces pour optimiser votre extension WordPress.
