Cómo poner un reloj en el menú WordPress en EXTRA

por | 2 Comentarios

Temas Elegant Themes
En esta lección voy a salirme un poco de lo que es la configuración del tema Extra y voy a explicar cómo colocar un reloj en WordPress, concretamente en un menú del tema Extra. Este proceso puede adaptarse a cualquier plantilla, si dispones de un tema Premium como Extra o Divi, o trabajas con Génesis, el proceso es muy sencillo, de lo contrario hay que acceder a los archivos del tema para insertar todo el código que vamos a ver, en ellos.

Suscríbete:

 

 

Colocar un reloj en el menú

 

No pretendía realizar un tutorial del tema Extra tan específico como este, insertar un elemento que no existe, y menos tener que tocar programación. Pero sois vosotros los que marcáis el camino a seguir y una de las cosas que me habéis pedido es esta.

Aunque vamos a poner un reloj en WordPress utilizando el tema Extra, con un poco de imaginación puede adaptarse a cualquier tema.

 

Poner reloj en WordPress

Hay dos formas de colocar un reloj en la barra de navegación de WordPress, o en cualquier lugar de nuestra página web:

Con PHP

Este reloj nos indicará la hora a la que hemos accedido a la página, y sólo se actualizará si la refrescamos o según vayamos navegando entre las diferentes páginas del sitio. PHP es un lenguaje del servidor, al cual hacemos una petición y nos devuelve una respuesta, y esta es justo el momento en que carga la página. Hay que tener en cuenta que nos mostrará la hora del servidor, si el servidor se encuentra en Londres, nos marcará la hora de ese país o región.

poner reloj en menú. php

 

Con JAVASCRIPT

Con la introducción de un pequeño código de JavaScript, que nos configura un reloj según la que marque nuestro ordenador, tendremos un reloj en WordPress que cambia y marca todos los segundos, no tenemos que esperar a que el servidor devuelva una nueva consulta. De esta forma, mostraremos al usuario la hora correcta, da igual el sitio del planeta donde se encuentre.

poner reloj en menú. script

 

Como nos interesa que sea un reloj práctico, nos centraremos en la segunda opción y realizaremos un reloj en JavaScript. No os asustéis, que os lo voy a dejar todo muy claro para que sólo tengáis que copiar y pegar.

 

Instalar un reloj en WordPress paso a paso

Como os indicaba al principio, voy a realizar el proceso sin necesidad de acceder a través de un cliente FTP o del administrador de archivos del servidor, a los archivos del tema. Para eso necesitamos tener instalado un plugin que nos permita duplicar un archivo para realizar los cambios necesarios sin estropear los archivos originales.

 

Crear tema hijo del tema padre o principal

Para empezar, lo primero que tenemos que hacer es crear un tema hijo del tema principal, si ya lo tenéis, perfecto. Los que no tengan un tema hijo, pueden ver este enlace de cómo crear un tema hijo automáticamente. En el explico cómo utilizar el plugin child theme configurator que necesitamos.

Es muy importante que trabajemos siempre sobre un tema hijo cuando vamos a modificar algún archivo, así mantenemos la integridad del tema y si tenemos algún error, con borrar el archivo hijo, seguiremos teniendo el archivo original intacto. De esta manera, también mantendremos los cambios que hagamos si se actualiza el tema y se sustituyen los archivos por la nueva versión.

Si habéis leído el enlace anterior, en esta ocasión hay que duplicar el archivo «header.php» y copiarlo a la carpeta del tema hijo o Child Theme. Se puede realizar a la vez que otros archivos como el «footer.php» que utilizamos para modificar los créditos del pie de la web.
poner reloj en wordpress. header.php

 

Insertar el código JAVASCRIPT del reloj

Como mi intención no es que sepáis programación, os voy a dar el código para que lo peguéis en su lugar correcto. Los scripts van situados fuera de las etiquetas «» que contienen el código que muestra el contenido web al usuario, y para que cargue primero lo vamos a poner entre las etiquetas ««.

Aquí es donde entra la ventaja de tener una plantilla Premium como Extra. En la parte de las «Opciones del tema«, tenemos un apartado en el que pegar código dentro de estas etiquetas sin necesidad de editar el archivo. Desde las pestañas de la administración de WordPress, vamos a «Extra > Opciones del tema > Integración«.

Es importante que esté marcado el botón de «Activar código en«. Cuando terminemos de pegar el código, le damos aguardar para mantener los cambios.

poner reloj en wordpress. integración en Extra

El código a pegar en esa casilla es el siguiente:

En la línea número 9 hemos indicado el nombre del identificador que vamos a utilizar, tanto para mostrar el reloj en WordPress como para darle forma con los estilos css. Podéis modificarlo si queréis, y poner en vez de «reloj«, por ejemplo «digitalclock«, pero que sea siempre una única palabra.

 

Mostrar el reloj en la barra de navegación

En este paso tenemos que editar el código del archivo «header.php» que hemos duplicado en el tema hijo e incluir una capa con las etiquetas

que contenga el reloj.

Para editar el archivo, y si no tenemos bloqueado el «editor» por seguridad, vamos a «Apariencia > Editor«. Nos fijamos que esté marcado el tema hijo y seleccionamos, en la columna de la derecha, el archivo «header.php» que vendrá indicado como Cabecera del tema.

poner reloj en wordpress. editor

 

Ahora toca un poco de lectura, tenemos que localizar el texto que ponga «!– cart —«, que es el botón del carrito que podemos activar si tenemos instalado el plugin de tienda Woocommerce. y que se encuentra a continuación de las redes sociales y el buscador. Debajo de este texto hay una función php que activa este botón. Pues nuestro reloj irá a continuación.

Hay que tener mucho cuidado de insertar el reloj en WordPress fuera del código php, para que funcione y no corrompa el archivo «header.php«. No pasa nada si os equivocáis, os recuerdo que estamos trabajando sobre el tema hijo y podemos recuperar el original si fallamos. Pero confío en todos vosotros y sé que lo haréis bien. La imagen a continuación os indica donde poner exactamente la capa.

 

poner reloj en wordpress. div

 

En la a etiqueta

 utilizaremos como identificador el nombre que pusimos en la línea 9 del JavaScript, en mi caso es «reloj» y tendrá el siguiente formato:

 

Dando forma a nuestro reloj en WordPress, en EXTRA

Si vais a visitar la web, seguramente ya tenéis el reloj funcionando, pero el aspecto que tendrá será muy básico y no estará integrado en el tema. Para arreglar esto tenemos que crear un estilo que modifique su aspecto. Lo más fácil es ir al «Personalizador del tema» y en la última pestaña del menú de la izquierda, añadir el siguiente CSS adicional.

Para los que no sepan manejar hojas de estilo, lo que he hecho es decirle al identificador que hemos utilizado, en mi caso «reloj«, que tenga un tamaño de fuente de 14 px y que sea negrita, de color blanco (#ffffff), un fondo también blanco con una transparencia del 10% (255, 255, 255, 0.1), unos márgenes y espacios acordes con el botón de búsqueda que tenemos en la barra y unas esquinas redondeadas (4px).

poner reloj en wordpress. reloj ok

 

Jugando con estos valores, podéis dar al reloj el aspecto que queráis.

 

Poner la fecha en el menú de WordPress

Si lo que queremos es poner la fecha actual, los pasos a seguir son los mismos, sólo que el código tenemos que sustituirlo por el siguiente:

 

Script para pegar en las opciones del tema

 

Código para pegar en el header.php

 

Estilos para añadir al CSS adicional

poner reloj en wordpress. fecha en wordpress

 

Temas Elegant Themes

 

Puedes pinchar a aquí para ver todas las entradas relacionadas con esta plantilla.


Suscríbete para no perderte ningún artículo nuevo, te aviso por email


Comparte tus dudas en los comentarios, estaré encantado de poder ayudarte dentro de mis posibilidades.

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.

2 Comentarios

  1. Fernando vargas

    Al abrir la pestaña de Files en el plugin Child Theme Configurator, no me aparece nada.

    Responder
    • Juan

      Hola Fernando vargas, La pestaña «Files» muestra los archivos que se encuentran en la carpeta del tema padre para poder duplicarlos en el tema hijo. Debes tener creado y activo un tema hijo (o Child Theme) para poder visualizar y duplicar los archivos que necesitas. En el capítulo 2 de los tutoriales explico este paso.

      Responder

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.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido