Konami personalizado en tu sitio WordPress sin usar plugins

[ 5 diciembre 2017 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

js

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)';
	}
});

 
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.

Valora este artículo : (3 votos, promedio: 5,00 de 5)

Cargando...