Puede que a alguien le resulte útil colocar un reloj digital en WordPress, no son muchos los que me lo han comentado, pero a pocos que sean se merecen conocer alguna opción para lograr su propósito.
Poner un reloj digital en la cabecera de un tema de WordPress
Este proceso es válido para la gran mayoría de temas, pero como cada tema de WordPress es un mundo, habrá que adaptarlo a las condiciones y opciones que ofrezca el tema en particular.
Los temas como Génesis, Divi o Extra, entre otros muchos, tienen un apartado desde donde se puede colocar el código sin problemas.
Para el ejemplo he utilizado un tema gratuito que no dispone de una zona donde colocar código en la cabecera, por lo que habría que optar por duplicar el archivo header.php en un tema hijo (child theme), o instalar un plugin que añada esta opción y no tengamos que crear el tema hijo.
En esta ocasión he optado por la instalación del plugin, ya que sólo voy a realizar este pequeño cambio.
Instalar el plugin para añadir texto a la cabecera
El plugin que nos permitirá colocar el script para mostrar un reloj digital en WordPress se llama "Insert Headers and Footers", y no tiene ningún misterio su instalación ya que se realiza como cualquier otro.
Al activarlo aparecerá una nueva pestaña dentro de las opciones "Ajustes" con el mismo nombre del plugin. Lo seleccionamos y colocamos el siguiente código en la casilla "Scripts in Header".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> function startTime(){ today=new Date(); h=today.getHours(); m=today.getMinutes(); s=today.getSeconds(); m=checkTime(m); s=checkTime(s); document.getElementById('reloj').innerHTML=h+":"+m+":"+s; t=setTimeout('startTime()',500);} function checkTime(i) {if (i<10) {i="0" + i;}return i;} window.onload=function(){startTime();} </script> |
Guardamos los cambios y ya podemos colocar el reloj donde queramos.
Mostrar un reloj digital en WordPress
Para insertar el reloj sólo tenemos que añadir una etiqueta HTML con el identificador "reloj" en el menú, un widget o dentro de una página o entrada de nuestra web.
Voy a centrarme en el menú, aunque como he dicho antes, debéis comprobar si vuestro tema permite insertar texto o código en la cabecera con alguna de las opciones particulares.
Editamos el menú principal (o el que tenemos asignado a la cabecera), y creamos un item nuevo del tipo "Enlace personalizado", da igual cómo lo creíis y con el nombre o url que pongáis, porque lo cambiaremos una vez colocado.
Yo voy a poner una almohadilla como URL (#) y la palabra "reloj" como nombre del enlace.
Una vez que se ha añadido al menú, procedemos a borrar la casilla de la url (la dejamos en blanco) y colocamos la etiqueta HTML con el identificador, puede ser div, span... la que vosotros creáis más adecuada. Yo utilizaré span.
1 | <span id="reloj"></span> |
Adaptar el aspecto con código CSS
Por norma general, el reloj adoptará el aspecto que tenga asignado el menú. Si queremos que sea diferente tenemos que modificarlo con código CSS.
Con CSS también he considerado oportuno ocultarlo cuando la página web se muestra en dispositivos móviles, ya que al reducir la pantalla, el menú suele convertirse en modo "hamburguer", y el reloj aparece como desplegable junto al resto de items del menú.
Os pongo el que he usado para montar el reloj en el tema Astra, es bastante genérico y seguro que podéis adaptarlo al tema que estéis utilizando.
1 2 3 4 5 6 7 8 9 10 11 | #reloj { border-left: 1px solid grey; color: black; text-align: center; max-width: 120px; } @media(max-width: 767px) { #reloj { display: none; } } |
Espero que le sirva a todo aquel que quiera colocar un reloj digital en WordPress en la barra del menú.
Guía de instalación del tema Avada en WordPress 2021- Instalar WordPress como multisitio para administrar varias webs
- 2 formas de instalar un tema premium en WordPress
- Acelerar la carga de WordPress optimizando las imágenes
- Configurar de forma fácil una cuenta de PayPal en Woocommerce
- Las mejores funciones personalizadas para añadir a WordPress
0 comentarios