1. Procedimiento para añadir scripts a los temas de la familia Genesis
En la sesión anterior del curso ya vimos que es posible insertar scripts en los temas de la familia Genesis. Tal como expusimos entonces, los scripts se pueden insertar de dos formas: a nivel global, desde Genesis > Configuración del tema > Sección «Scripts para la cabecera o el pie de página», o a nivel de cada entrada o página; en este segundo caso, hay que utilizar el editor de WordPress y añadir el script a la caja de metadatos denominada «Scripts».
2. Un ejemplo de uso
A continuación vamos a detallar un sencillo ejemplo de uso de un script programado en JavaScript, uno de los lenguajes de programación más útiles que existen para el desarrollo de sitios web, ya que permite modificar a voluntad el comportamiento del sitio web, integrar recursos y servicios externos, etc. El script, que hemos adaptado ligeramente a partir del publicado en Poner la fecha automáticamente con Javascript, sirve para insertar en una página web la fecha actual. El proceso para conseguirlo requiere los siguientes pasos:
2.1. Inserción del script en el tema hijo de Genesis
Desde el editor de entradas de WordPress, hemos editado esta entrada, y hemos añadido el código que figura bajo estas líneas al cuadro de metadatos denominado «Scripts»:
<script language="Javascript">;
var muestra;
function makeArray(n){this.length = n;
for (i=1;i<=n;i++){this[i]=0;}
return this;}
function Muestrafecha() {
//Se declaran los meses
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] = "diciembre";
//Se declaran los días de la semana
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; }
// Se muestra la fecha, dentro de una caja de texto de color verde
return( "<p class='caja-texto-verde'>Hoy es " + dias_de_la_semana[dia] + ", " + day + " de " + meses[month] + " de " + year)+"</p>";
}
</script>
2. Llamada al script desde la entrada o desde un widget
Posteriormente, hemos llamado a este código JavaScript insertando en el editor de WordPress, mediante la pestaña HTML (esto es muy importante, porque de otro modo no funciona), estas tres líneas, que invocan la función definida en el fragmento de código precedente:
<script type="text/javascript" language="JavaScript"> document.write (Muestrafecha()); </script>
Si se considera conveniente, también se puede llamar al script desde un widget. La forma más sencilla de hacerlo es crear un widget de HTML personalizado, y copiar en él las tres líneas de código que acabamos de indicar. El resultado puede verse en el widget que aparece al final de la barra lateral derecha de esta misma entrada.
3. Declaración de una clase de estilos para mejorar la apariencia
Con el objetivo de mejorar la apariencia final del texto de fecha, hemos definido un estilo CSS personalizado, basado en los que se explican en Spruce Up Your Genesis-Powered Website with Content Boxes and Color Buttons., y lo hemos añadido, tal como acabamos de ver en el artículo anterior, desde el personalizador de temas de WordPress. El resultado es el siguiente:
3. Alternativa de uso global para el script
Si en lugar de declarar este script en la entrada actual lo hubiéramos hecho desde el menú Genesis > Configuración del tema > Sección «Scripts para la cabecera o el pie de página», habríamos podido llamarlo desde cualquier lugar del sitio web. Por ejemplo, mediante un widget situado en la parte superior de la barra lateral, de forma que la fecha del día pudiera aparecer en todas y cada una de las páginas del sitio. Animamos a los alumnos y alumnas del curso para que experimenten con esta alternativa.