• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Konami personalizado en tu sitio WordPress sin usar plugins
Anuncio banner webservi

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

  • Exportar / importar  la configuración del personalizador de temas en WordPressExportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommercePersonalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPressConfigura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamenteAbrir enlaces externos en un nuevo tab automáticamente
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 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 primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Mostrar widget lateral al inicio en móviles

¿Qué son los Hooks de WordPress y Cómo usarlos?

Mover la carga de Javascript y CSS al footer en WordPress

Formatos de entrada en WordPress

Recientes

  • Exportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamente
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad