Imagina que estás planeando un viaje y visitas una página web que te muestra de inmediato el clima actual de la ciudad que deseas visitar. Con datos claros, visuales y actualizados, puedes saber si necesitarás llevar un paraguas, protector solar o ropa de abrigo. ¿No sería genial? Ahora, añadir esta funcionalidad a tu propia web de viajes es mucho más fácil de lo que parece.
El código que veremos aquí utiliza una API pública gratuita, Open-Meteo, que te permite obtener datos meteorológicos precisos y actualizados sin necesidad de registrarte. Esta API es ideal para proyectos pequeños o medianos, ya que simplifica el acceso a información como la temperatura, velocidad del viento y una descripción general del clima actual.
Para mejorar la experiencia visual, el código también emplea íconos atractivos de Font Awesome. Así, en lugar de mostrar solo números y texto, cada condición meteorológica (como un día soleado, nublado o con tormentas) tiene un ícono representativo que hace que la información sea mucho más comprensible y estética.
Además, el diseño está pensado para ser responsivo, lo que significa que se adapta automáticamente a cualquier dispositivo, ya sea un ordenador, tablet o smartphone. Con un simple atajo o shortcode, puedes insertar este módulo en cualquier parte de tu sitio web, eligiendo la ubicación que quieras y personalizando el nombre de la ciudad.
Uso del Shortcode
El código que hemos creado incluye un shortcode llamado [weather]. Este shortcode es completamente personalizable, permitiéndote especificar la ubicación (latitud y longitud) y el nombre de la ciudad que deseas mostrar.
Por defecto, el shortcode mostrará el clima para la ciudad de Málaga, España. Sin embargo, puedes personalizarlo fácilmente añadiendo algunos parámetros.
Parámetros del shortcode
El shortcode acepta tres parámetros principales:
- latitude: La latitud de la ubicación deseada.
- longitude: La longitud de la ubicación deseada.
- city: El nombre de la ciudad que aparecerá en el diseño.
Si quieres mostrar el clima para una ubicación específica, como Bogotá (Colombia), puedes configurar el shortcode de la siguiente manera:
[weather latitude="4.7110" longitude="-74.0721" city="Bogotá"]Este código mostrará la información meteorológica actual para Bogotá, incluyendo la temperatura, velocidad del viento y una descripción visual del clima gracias a los íconos.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
// Obtener el clima de una ubicación específica (con íconos de Font Awesome)
function get_weather_data($latitude, $longitude, $city) {
$url = "https://api.open-meteo.com/v1/forecast?latitude={$latitude}&longitude={$longitude}¤t_weather=true";
$response = wp_remote_get($url);
if (is_wp_error($response)) {
return '<p class="weather-error"><i class="fas fa-exclamation-circle"></i> Clima no disponible.</p>';
}
$data = json_decode(wp_remote_retrieve_body($response), true);
if (isset($data['current_weather'])) {
$weather = $data['current_weather'];
$description = interpret_weather_code($weather['weathercode']);
$icon = get_weather_icon($weather['weathercode']);
return '
<div class="styled-weather">
<span class="weather-info">
<i class="' . $icon . '"></i>
<strong>Clima en ' . esc_html($city) . ':</strong> ' . $description . ' | ' . $weather['temperature'] . '°C | Viento: ' . $weather['windspeed'] . ' km/h
</span>
</div>';
}
return '<p class="weather-error"><i class="fas fa-exclamation-circle"></i> Clima no disponible.</p>';
}
// Registrar el shortcode [weather]
add_shortcode('weather', 'render_weather_shortcode');
function render_weather_shortcode($atts) {
$atts = shortcode_atts([
'latitude' => '36.7213', // Valor por defecto (Málaga)
'longitude' => '-4.4216', // Valor por defecto (Málaga)
'city' => 'Málaga' // Nombre de ciudad por defecto
], $atts);
$latitude = esc_attr($atts['latitude']);
$longitude = esc_attr($atts['longitude']);
$city = esc_attr($atts['city']);
return get_weather_data($latitude, $longitude, $city);
}
// Estilos responsivos para el diseño
add_action('wp_enqueue_scripts', 'add_responsive_weather_styles');
function add_responsive_weather_styles() {
// Cargar Font Awesome desde su CDN
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
// Estilos personalizados
wp_add_inline_style(
'wp-block-library',
'
.styled-weather {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 500;
color: #2c3e50;
}
.styled-weather i {
margin-right: 8px;
font-size: 12px;
color: #3498db;
}
.weather-error {
font-size: 12px;
color: #e74c3c;
}
@media (max-width: 768px) {
.styled-weather {
font-size: 14px;
}
.styled-weather i {
font-size: 16px;
}
}
@media (max-width: 480px) {
.styled-weather {
font-size: 12px;
}
.styled-weather i {
font-size: 14px;
}
}
'
);
}
// Función para interpretar el código del clima
function interpret_weather_code($code) {
$descriptions = [
0 => 'Despejado/Soleado',
1 => 'Parcialmente nublado',
2 => 'Nublado',
3 => 'Muy nublado',
45 => 'Neblina',
48 => 'Neblina con escarcha',
51 => 'Llovizna ligera',
53 => 'Llovizna moderada',
55 => 'Llovizna intensa',
61 => 'Lluvia ligera',
63 => 'Lluvia moderada',
65 => 'Lluvia intensa',
66 => 'Lluvia helada ligera',
67 => 'Lluvia helada intensa',
71 => 'Nieve ligera',
73 => 'Nieve moderada',
75 => 'Nieve intensa',
77 => 'Granizo',
80 => 'Chubascos ligeros',
81 => 'Chubascos moderados',
82 => 'Chubascos violentos',
95 => 'Tormenta',
96 => 'Tormenta con granizo ligera',
99 => 'Tormenta con granizo intensa'
];
return $descriptions[$code] ?? 'Condición desconocida';
}
// Función para obtener el ícono basado en el código del clima
function get_weather_icon($code) {
$icons = [
0 => 'fas fa-sun',
1 => 'fas fa-cloud-sun',
2 => 'fas fa-cloud',
3 => 'fas fa-cloud-meatball',
45 => 'fas fa-smog',
48 => 'fas fa-cloud-moon-rain',
51 => 'fas fa-cloud-rain',
53 => 'fas fa-cloud-showers-heavy',
55 => 'fas fa-cloud-rain',
61 => 'fas fa-cloud-sun-rain',
63 => 'fas fa-cloud-showers-heavy',
65 => 'fas fa-cloud-rain',
66 => 'fas fa-snowflake',
67 => 'fas fa-snowflake',
71 => 'fas fa-snowflake',
73 => 'fas fa-snowflake',
75 => 'fas fa-snowflake',
77 => 'fas fa-cloud-rain',
80 => 'fas fa-cloud-showers-heavy',
81 => 'fas fa-cloud-showers-heavy',
82 => 'fas fa-cloud-showers-heavy',
95 => 'fas fa-bolt',
96 => 'fas fa-bolt',
99 => 'fas fa-bolt'
];
return $icons[$code] ?? 'fas fa-question';
}
Lenguaje del código: PHP (php)Entendiendo el Código
1. Función principal: get_weather_data
Esta función es el núcleo del sistema, responsable de obtener y procesar los datos meteorológicos. Recibe como parámetros la latitud, longitud y el nombre de la ciudad. Genera dinámicamente una URL para realizar una solicitud HTTP a la API de Open-Meteo y obtiene el clima actual de la ubicación especificada. Valida posibles errores en la respuesta y decodifica los datos en formato JSON. Finalmente, utiliza los datos obtenidos, como temperatura, velocidad del viento y el código del clima, para crear una salida HTML estilizada que incluye íconos representativos.
2. Shortcode para integrar la funcionalidad
La funcionalidad del clima se expone al usuario a través de un shortcode de WordPress llamado [weather]. Este shortcode permite al usuario especificar la ubicación deseada mediante parámetros personalizados: latitud, longitud y nombre de la ciudad. Si no se proporcionan estos valores, se utilizan valores predeterminados para mostrar el clima de Málaga, España. El shortcode es flexible y fácil de integrar en cualquier parte del sitio web.
3. Estilos personalizados y responsividad
El diseño visual del componente meteorológico está cuidadosamente estructurado para ser atractivo y funcional. Los íconos de Font Awesome se utilizan para representar diferentes condiciones meteorológicas, como soleado, nublado o lluvioso, mejorando la claridad visual. Además, se define un conjunto de estilos CSS responsivos para que el diseño se adapte a dispositivos de diferentes tamaños, garantizando una experiencia óptima tanto en escritorio como en móviles.
4. Interpretación del código del clima
La función de interpretación toma el código meteorológico proporcionado por la API y lo traduce en una descripción legible y comprensible, como «Despejado», «Lluvia ligera» o «Tormenta». Este mapeo se basa en una tabla predefinida que asocia cada código con una descripción específica.
5. Asignación de íconos meteorológicos
Similar a la interpretación textual, otra función asigna un ícono de Font Awesome a cada código del clima. Esto permite que la salida visual sea intuitiva, utilizando representaciones gráficas de condiciones como sol, nubes o tormentas.
6. Carga de recursos externos
La funcionalidad incluye la carga del paquete de estilos de Font Awesome desde su CDN para garantizar que los íconos estén disponibles. Además, se añaden estilos CSS en línea que personalizan el diseño y lo integran con el tema actual del sitio.
Integrar una funcionalidad como esta en tu sitio web no solo mejora la experiencia del usuario, sino que también añade un valor práctico y profesional. Con herramientas modernas como la API de Open-Meteo y el uso de WordPress, puedes ofrecer información meteorológica actualizada de manera visual y accesible, ideal para sitios de turismo, blogs de viajes o cualquier plataforma que busque destacar con características útiles y atractivas.
Nos vemos en el siguiente tutorial. Un saludo.
Deja tus opiniones o dudas en los comentarios.