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.
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.
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.
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.
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.
El código a pegar en esa casilla es el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript"><br /> function startTime(){<br /> today=new Date();<br /> h=today.getHours();<br /> m=today.getMinutes();<br /> s=today.getSeconds();<br /> m=checkTime(m);<br /> s=checkTime(s);<br /> document.getElementById('reloj').innerHTML=h+":"+m+":"+s;<br /> t=setTimeout('startTime()',500);}<br /> function checkTime(i)<br /> {if (i<10) {i="0" + i;}return i;} window.onload=function(){startTime();} </script> |
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 <div> 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.
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.
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:
|
1 |
<div id="reloj"></div> |
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.
|
1 2 3 4 5 6 7 8 9 |
#reloj { font-size: 14px; font-weight: 600; color: #ffffff; background-color: rgba(255, 255, 255, 0.1); padding: 5px 10px; margin: 0px 0px 10px 10px; border-radius: 4px; } |
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).
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<script language="Javascript"></p> <p>var muestra;<br /> function makeArray(n){this.length = n;<br /> for (i=1;i<=n;i++){this[i]=0;} return this;} function Muestrafecha() { var meses = new makeArray(12); meses[0] = "Enero"; meses[1] = "Febrero"; meses[2] = "Marzo"; meses[3] = "Abril"; meses[4] = "Mayo"; meses[5] = "Junio"; meses[6] = "Julio"; meses[7] = "Agosto"; meses[8] = "Septiembre"; meses[9] = "Octubre"; meses[10] = "Noviembre"; meses[11] = "Deciembre"; var dias_de_la_semana = new makeArray(7); dias_de_la_semana[0] = "Domingo"; dias_de_la_semana[1] = "Lunes"; dias_de_la_semana[2] = "Martes"; dias_de_la_semana[3] = "Miércoles"; dias_de_la_semana[4] = "Jueves"; dias_de_la_semana[5] = "Viernes"; dias_de_la_semana[6] = "Sábado"; var today = new Date(); var day = today.getDate(); var month = today.getMonth(); var year = today.getYear(); var dia = today.getDay(); if (year < 1000) {year += 1900; } return( dias_de_la_semana[dia] + ", " + day + " de " + meses[month] + " de " + year); } </script> |
Código para pegar en el header.php
|
1 2 3 |
<div id="fecha"><script type="text/javascript" language="JavaScript"><br /> document.write (Muestrafecha());<br /> </script></div> |
Estilos para añadir al CSS adicional
|
1 2 3 4 5 6 7 8 9 |
#fecha { font-size: 12px; font-weight: 600; color: #ffffff; background-color: rgba(255, 255, 255, 0.1); padding: 3px 10px; margin: 0px 0px 10px 10px; border-radius: 4px; } |
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.
Quitar la palabra CATEGORÍA de la página de archivos
Cambiar los colores de los módulos y los widgets
Aprende a utilizar el Constructor Divi en EXTRA
Hacer que las redes sociales se abran en una nueva ventana
Los "layout", máscaras o diseños de una página en el tema Extra
Cómo utilizar los "layouts" o plantillas prediseñadas para Extra
Al abrir la pestaña de Files en el plugin Child Theme Configurator, no me aparece nada.
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.