Sorprende a tus usuarios, para que al tipear una secuencia de caracteres en tu sitio Web les aparezca algo especial, oculto a simple vista. Puedes aplicar esto en fechas especiales o para resaltar algún tipo de campaña.
Resultado Final
¿Que es Konami?
De manera resumida, el código Konami, es un truco que puede ser usado para activar una opción secreta, usualmente usado en los video juegos, pero en este caso lo aplicaremos a un sitio web.
En la siguiente imagen se muestra el código Konami original
1- Insertar Javascript
Puesto que para realizar esto será necesario usar código javascript, tienes primero que tener una forma de insertar este código como parte de tu theme, te sugiero revisar el artículo: Insertar código Javascript en WordPress de manera correcta.
2- Código Javascript base
El siguiente código muestra el código javascript genérico que nos servirá de base para hacer cambios en nuestro sitio.
En el código anterior:
- Definimos una variable pressed de tipo array que contendrá los caracteres que se vayan tipeando
- La variable secretcode es la que contendrá nuestro código secreto
- Definimos un evento keyup, el cual ejecutará una función anónima la cual tiene como argumento el evento e.
- Dentro de la función llenamos el array pressed con los caracteres tipeados, pero restingimos sólo a la cantidad de caracteres de acuerdo a la longitud de la variable secretcode.
- Comprobamos cada vez que se ejecuta el evento si lo que esta ingresado en el array pressed es igual al secretcode, para comparar los elementos del array con la cadena usamos join.
- Finalmente dentro de la condicional podemos ejecutar cualquier tipo de código javascript, en el ejemplo simplemente se imprime un mensaje en consola.
3.1 Redireccionando a otra página
Para redireccionar a otra página cuando un usuario tipea el código, puedes modificar el script anterior y usar un código de redirección como:
const pressed = [];
const secretcode = 'navidad';
window.addEventListener('keyup', e => {
pressed.push(e.key);
pressed.splice(-secretcode.length -1, pressed.length - secretcode.length);
if (pressed.join('') == secretcode) {
window.location.href = 'http://tudomino.com/navidad.html';
}
});
3.2 Cambiando una imagen
Para cambiar el fondo, podemos tener dos variaciones, cambiar imagen o cambiar fondo
Si es una imagen en el header, tal como en el theme TwentySeventeen, podemos usar:
const pressed = [];
const secretcode = 'navidad';
window.addEventListener('keyup', e => {
pressed.push(e.key);
pressed.splice(-secretcode.length -1, pressed.length - secretcode.length);
if (pressed.join('') == secretcode) {
var imgHeader = document.querySelector('#wp-custom-header img');
imgHeader.src = 'http://tudominio.com/wp-content/uploads/2017/12/img-navidad.jpg';
}
});
Si queremos definir una imagen de fondo, podemos usar:
const pressed = [];
const secretcode = 'navidad';
window.addEventListener('keyup', e => {
pressed.push(e.key);
pressed.splice(-secretcode.length -1, pressed.length - secretcode.length);
if (pressed.join('') == secretcode) {
var imgFondo = document.querySelector('.site-content');
imgFondo.style.backgroundImage = 'url(http://tudominio.com/wp-content/uploads/2017/12/img-navidad.jpg)';
}
});