Cómo mostrar el tiempo en WordPress: guía actualizada

Widget meteorológico mostrando la previsión del tiempo en una web WordPress

Mostrar el tiempo en WordPress ya no consiste en pegar cualquier widget en la barra lateral. Hoy puedes usar un bloque, un shortcode, un servicio externo o una integración propia con una API meteorológica. La elección depende de cuánto control necesites, de la frecuencia de actualización y de cómo quieras cuidar el rendimiento y la privacidad.

Este artículo parte de una guía publicada en 2012, cuando eran habituales widgets como el de eltiempo.es y plugins que trabajaban con servicios que ya no forman parte de la recomendación actual. Hemos retirado esas referencias antiguas y revisado las opciones disponibles en septiembre de 2026.

Las claves para añadir el tiempo en 20 segundos

  • Para la mayoría de webs, un plugin con bloque o shortcode es el camino más sencillo.
  • Un widget externo reduce el trabajo técnico, pero puede añadir peticiones, cookies o dependencias de otro servicio.
  • Una integración propia da más control, aunque obliga a gestionar API, caché, errores, atribución y mantenimiento.
  • La previsión debe llevar fecha y ubicación claras: no es lo mismo el tiempo actual que una predicción para los próximos días.

Qué ha cambiado desde los widgets de 2012

Los antiguos enlaces de eltiempo.es, WP Google Weather y Weather and Weather Forecast Widget ya no son una base fiable para una guía actual. Algunos enlaces del directorio antiguo han cambiado o dejaron de ser válidos, y los servicios meteorológicos de entonces han modificado sus API, sus límites y sus condiciones de uso.

La alternativa moderna suele apoyarse en un bloque de Gutenberg o en un shortcode. Así se puede mostrar una previsión en una página, una entrada, un widget o una plantilla sin depender de código antiguo. También es más fácil adaptar el diseño a móvil y cargar los recursos solo donde hacen falta.

Tres formas de mostrar el tiempo en WordPress

1. Usar un plugin con bloque o shortcode

Es la opción recomendada si quieres publicar el tiempo de una ciudad sin desarrollar una integración. Under The Weather ofrece un bloque propio para el editor, shortcode y colocación manual. Su ficha indica que utiliza la API de OpenWeather, guarda las respuestas en caché mediante transitorios de WordPress y permite mostrar condiciones actuales, previsión de hasta seis días, viento, alertas y horas de salida y puesta del sol.

Necesita una clave de OpenWeather, por lo que hay que revisar sus límites y condiciones antes de activarlo. La caché reduce llamadas repetidas, pero no elimina la necesidad de comprobar que el servicio sigue respondiendo y que la información se actualiza con la frecuencia que necesita tu web.

Otra alternativa es Location Weather. Su ficha del directorio ofrece bloque, shortcode y compatibilidad con editores visuales como Elementor, además de conexión con OpenWeather y WeatherAPI. En la consulta realizada para esta actualización aparecía probado con WordPress 7.1, aunque estos datos pueden cambiar y conviene confirmarlos antes de instalarlo.

2. Insertar un widget de un proveedor externo

Algunos servicios meteorológicos generan un código para pegarlo en un bloque HTML personalizado o en un widget. Es cómodo porque el proveedor se encarga de consultar los datos, pero cada visita puede cargar recursos desde otro dominio. Antes de elegirlo, comprueba si añade cookies, publicidad, seguimiento, una marca visible o un aviso de atribución.

También debes comprobar que el widget funciona en móvil, no deja un espacio vacío mientras carga y sigue siendo legible con contraste suficiente. Si el proveedor cambia su código, limita el servicio o retira el widget, el contenido puede dejar de aparecer sin que hayas modificado WordPress.

3. Conectar WordPress con una API meteorológica

Una integración propia tiene sentido para una web de viajes, un medio local, una agenda de eventos o un proyecto que necesita varias ubicaciones. El servidor consulta la API usando coordenadas, guarda la respuesta durante un tiempo razonable y entrega a los visitantes solo los datos necesarios.

Open-Meteo ofrece una API con previsión horaria y diaria. Su página indica que no necesita clave ni registro para su uso gratuito no comercial, pero sus datos se distribuyen con licencia CC BY 4.0 y requieren atribución. Para uso comercial o un volumen alto hay que revisar sus planes y condiciones.

Si la web está orientada a España, también puedes consultar Meteo.es para contrastar la previsión de una ciudad, revisar los avisos meteorológicos, consultar mapas o enlazar información sobre calidad del aire. Es una referencia útil para el editor del sitio, aunque no sustituye la integración técnica que necesites en tu propia página.

https://api.open-meteo.com/v1/forecast?latitude=40.4168&longitude=-3.7038&current=temperature_2m,weather_code&daily=temperature_2m_max,temperature_2m_min&timezone=Europe%2FMadridLenguaje del código: JavaScript (javascript)

La URL anterior es un ejemplo para Madrid. En una web real tendrías que convertir la respuesta JSON en HTML accesible, controlar los errores y mostrar una línea como “Datos meteorológicos: Open-Meteo” junto a un enlace a la licencia. No conviene consultar la API directamente desde el navegador en cada visita si puedes cachear el resultado en el servidor.

Qué opción elegir según tu proyecto

  • Blog o web corporativa: un plugin con bloque suele ofrecer el equilibrio más práctico entre configuración y resultado.
  • Hotel, turismo o eventos: elige una solución que permita fijar coordenadas, mostrar varias ubicaciones y adaptar el diseño a cada página.
  • Medio local: valora la caché, la atribución y la posibilidad de añadir avisos meteorológicos sin cargar scripts innecesarios.
  • Proyecto con desarrollo propio: una API como Open-Meteo puede dar más control, pero debes asumir el mantenimiento de la integración.
  • Web con tráfico elevado: evita peticiones por visitante y almacena la respuesta; también conviene medir el efecto en la carga con herramientas como las que explicamos en nuestra guía para medir el rendimiento de los plugins de WordPress.

Cómo añadir una previsión paso a paso

  1. Define la ubicación con nombre y coordenadas. Para una ciudad grande, las coordenadas suelen ser más precisas que una búsqueda ambigua por nombre.
  2. Decide si necesitas condiciones actuales, previsión diaria, datos horarios, calidad del aire o alertas.
  3. Comprueba la fuente de datos, la clave API, los límites, la licencia y la obligación de atribución.
  4. Instala el plugin desde el directorio oficial o crea la integración en staging.
  5. Añade el bloque o shortcode en la página donde tenga sentido y configura grados Celsius, velocidad del viento y zona horaria.
  6. Prueba la vista móvil, el contraste, el texto alternativo de los iconos y el comportamiento cuando la API no responde.
  7. Activa una caché razonable y comprueba que el widget no se carga en páginas que no lo necesitan.

Rendimiento, privacidad y mantenimiento

Un widget meteorológico no debería convertir cada visita en una llamada a un servicio externo. La caché del servidor reduce el número de peticiones y evita que una API lenta bloquee la página. Si el plugin carga JavaScript, debe hacerlo de forma condicional y respetando el sistema de carga de WordPress; la documentación oficial recomienda encolar los scripts desde el contexto adecuado y permite usar estrategias como defer cuando encajan.

No expongas claves privadas en el HTML ni en JavaScript público. Si el proveedor necesita una API key, guárdala en la configuración del servidor o del plugin. Revisa también si el servicio recibe la IP del visitante, si usa geolocalización automática y si tienes que informar o pedir consentimiento según el uso que hagas de esas funciones.

Por último, comprueba la previsión después de actualizar WordPress, el tema o el plugin. Una respuesta vacía, una unidad mal configurada o una fecha sin zona horaria pueden hacer que el widget parezca correcto y muestre información equivocada.

Conclusión

Para la mayoría de sitios, un plugin actualizado con bloque de Gutenberg es suficiente. Los widgets externos son válidos cuando aceptas sus condiciones y su forma de cargar recursos. La integración con API merece la pena cuando necesitas control sobre el diseño, varias localizaciones o una conexión con otros datos del sitio.

La clave está en mostrar una ubicación clara, indicar cuándo se actualizó la información, respetar la licencia de los datos y mantener la página rápida. Si el tiempo no es parte importante del contenido, una previsión sencilla y bien cacheada suele ser mejor que un panel lleno de mapas, animaciones y peticiones externas.

Fuentes: Under The Weather, Location Weather, Open-Meteo y documentación oficial de WordPress, consultadas el 10 de septiembre de 2026.

David Carrero Fernández-Baillo

Experimentando con un sitio web sobre WordPress, este popular gestor de contenidos, entre otros muchos proyectos.

Te puede interesar...

    Comments are closed

    WordPress Directo
    WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

    © 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.