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 “…“.
Abrir DIVI. 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 “DIVI > Opciones del tema > Integración“.
El código a pegar en esa casilla es el siguiente:
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>
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.
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
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“. 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 DIVI
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).
