En este breve artículo contaré como mostrar datos del clima en nuestro sitio de WordPress usando estilos personalizados. El objetivo es mostrar la temperatura y un icono arriba a la derecha como se ve en esta imagen:
Paso 1 - Plugin
Instalamos el plugin Weather Underground. No requiere KEY.
Paso 2 - Shortcode
Agregamos el shortcode en la página en donde queremos mostrarlo, en mi caso header.php.
El código que utilicé es:
<div class="pp_header_boton_clima pp_bk_azul">
<?php
echo "<a href='https://espanol.wunderground.com/q/locid:ARSF2148;loctype:1?MR=1' target='_blank'>" . do_shortcode ( '[wunderground location="-32.30,-61.41" layout="current" measurement="c"]') . "</a>";
?>
</div>
Para ver las opciones del shortcode, ir a:
Paso 3 - Estilos
Lo más probable es que los estilos originales no sirvan, con lo cual este plugin nos permite modificarlos, para lo cual seguimos estos pasos.
Primero creamos un directorio dentro de nuestro tema llamado "wunderground"
Luego copiamos dentro de ese directorio el template original. En mi caso modifiqué el llamado CURRENT:
Carpeta origen: o/wp-content/plugins/wunderground/templates
Y luego simplemente editamos el código dentro de ese template. En mi caso utilicé este código:
{% autoescape 'html' %}
<div class="pp_servicio_clima">
{% set day = wunderground.current_observation %}
<div class="pp_servicio_clima_temperatura">
<span>{{ day.temperature|round }}<sup>°</sup></span>
<small>{% if wunderground.response.units == 'english' %}F{% else %}C{% endif %}</small>
</div>
{% include 'snippets/icon.html' with { 'tag' : 'div', 'iconsize' : '100' } %}
</div>
{% endautoescape %}
Paso 4 - Estilos
Esto ya queda a criterio de cada uno, sólo tenemos que ir a nuestra hoja de estilos y adaptarlo al diseño de nuestro sitio.
Muestro sólo a título ilustrativo:
Eso es todo por hoy. Hasta la próxima!
0 comentarios:
Publicar un comentario