Colocar un reloj digital en el menú de WordPress

4 de diciembre - 2018

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.

Suscríbete:

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.

plugin para insertar un reloj digital en wordpress
Plugin para colocar código en el "header"

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".

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.

reloj en wordpress en el menú de la cabecera
Item del menú utilizado para el reloj digital

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.

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ú.

reloj en wordpress con javascript y css
Reloj digital colocado en el menú de WordPress

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.

Espero que le sirva a todo aquel que quiera colocar un reloj digital en WordPress en la barra del menú.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento