• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Konami personalizado en tu sitio WordPress sin usar plugins

Konami personalizado en tu sitio WordPress sin usar plugins

Konami en WordPress

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

js

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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

Antes y despúes de aplicar konami

 

¿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

Código Konami

 

Como Konami personalizado te sugiero usar sólo un conjunto de caracteres alfanuméricos, como: “navidad”, “oferta”, etc. , evitando el uso de caracteres especiales y tildes

 

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.

Para desarrollar los ejemplos de este artículo lo haremos usando un archivo javascript y registrando este archivo en el functions.php

 

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.

 

Puesto que el código es muy simple, usamos sólo javascript nativo, no hay necesidad de usar JQuery

 

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';
	}
});
En el código anterior, asegúrate de cambiar el selector #wp-custom-header img, ya que este puede variar en el caso de tu theme

 
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)';
	}
});
En el código anterior, asegúrate de cambiar la clase .site-content, ya que este puede variar en el caso de tu theme

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

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar endpoints a la API REST de WordPress

Agregar descripción en ítems de menú WordPress

Cabecera fija en theme WordPress

Leer datos desde una API externa en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados