Mejorar la navegación de su sitio web puede potenciar la experiencia del usuario, facilitando a los visitantes la navegación eficiente por el contenido.
Agregar navegación por teclado con teclas de flecha en WordPress permite a los usuarios navegar por las publicaciones de su sitio usando solo sus teclas de flecha. Sin embargo, WordPress no ofrece estas funciones de navegación de forma predeterminada.
En WPBeginner, nos enfocamos en crear una experiencia de usuario fluida y agradable. Con el tiempo, hemos probado varios métodos para mejorar la usabilidad de nuestro sitio, incluida la navegación con teclas de flecha. Si bien esta función no es importante para nuestro blog, entendemos cómo podría ser beneficiosa para autores de libros electrónicos y blogs más pequeños que buscan mejorar la experiencia del lector.
En este artículo, le mostraremos cómo agregar fácilmente navegación por teclado con teclas de flecha en WordPress.
¿Por qué agregar navegación por teclado con teclas de flecha en WordPress?
Agregar navegación por teclado permite a los usuarios navegar por las publicaciones del blog en su sitio web de WordPress fácilmente.
Los usuarios pueden ver las publicaciones de blog siguientes y anteriores haciendo clic en las teclas de flecha derecha e izquierda de sus teclados.
Esta función es útil cuando desea que los usuarios naveguen fácilmente por las publicaciones en orden secuencial. Por ejemplo, si está utilizando publicaciones de blog para publicar capítulos de un libro, elementos de portafolio, eventos históricos o más.
Agregar navegación por teclado con las teclas de flecha también puede ser una excelente manera de mejorar la experiencia del usuario en tu blog de WordPress, alentar a los usuarios a explorar más tu sitio.
Dicho esto, veamos cómo agregar fácilmente navegación por teclado con teclas de flecha en WordPress, paso a paso:
- Método 1: Agregar navegación por teclado con teclas de flecha usando WPCode (Recomendado)
- Método 2: Agregar navegación por teclado con teclas de flecha usando el plugin Arrow Keys Navigation
- Navegación con teclas de flecha para sliders y galerías de imágenes de WordPress
Método 1: Agregar navegación por teclado con teclas de flecha usando WPCode (Recomendado)
Puedes agregar fácilmente navegación con teclas de flecha en tu sitio de WordPress agregando código al archivo functions.php de tu tema de WordPress.
Al hacer esto, los usuarios podrán cambiar entre diferentes páginas y publicaciones en tu sitio usando las teclas de flecha de sus teclados.
Sin embargo, ten en cuenta que agregar código personalizado a los archivos principales de WordPress puede ser arriesgado, y un pequeño error puede romper tu sitio.
Es por eso que siempre recomendamos usar WPCode. Es el mejor plugin de fragmentos de código de WordPress del mercado que hace que sea seguro y fácil agregar código a tu sitio web.
Primero, necesitas instalar y activar el plugin WPCode. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
Nota: WPCode también tiene una versión gratuita que puedes usar para este tutorial. Sin embargo, actualizar al plan de pago desbloqueará más funciones como la biblioteca de fragmentos de código, lógica condicional y más.
Al activar, dirígete a la página Fragmentos de Código » + Agregar Fragmento desde el panel de administración de WordPress.
Luego, puedes hacer clic en el botón ‘Usar Fragmento’ bajo la opción ‘Agregar tu Código Personalizado (Nuevo Fragmento)’.
Esto te llevará a la página ‘Crear fragmento personalizado’, donde puedes empezar escribiendo un nombre para tu fragmento de código.
Aquí, simplemente selecciona ‘Fragmento Universal’ como el ‘Tipo de Código’ en el menú desplegable en la esquina derecha de la pantalla.
Nota: Por favor, no selecciones ‘JavaScript’ como tu tipo de código. Aunque sea código JavaScript, el código solo funciona en tu sitio si seleccionas la opción ‘Fragmento Universal’.
A continuación, simplemente copia y pega el siguiente código en el cuadro ‘Vista previa del código’:
<script type="text/javascript">
document.onkeydown = function (e) {
var e = e || event,
keycode = e.which || e.keyCode;
if (keycode == 37 || keycode == 33)
location = "<?php echo get_permalink(get_previous_post()); ?>";
if (keycode == 39 || keycode == 34)
location = "<?php echo get_permalink(get_next_post()); ?>";
}
</script>
Después de eso, desplázate hacia abajo hasta la sección ‘Inserción’ para elegir una ubicación para el fragmento de código.
Aquí, selecciona la opción ‘Pie de Página de Todo el Sitio’ en el menú desplegable junto a la opción ‘Ubicación’.
A continuación, elige ‘Insertar automáticamente’ como el método de inserción para el código personalizado.
El código ahora se ejecutará automáticamente en tu sitio web tras la activación.
Después de eso, desplázate de nuevo a la parte superior de la página y cambia el interruptor de ‘Inactivo’ a ‘Activo’.
Luego, todo lo que tienes que hacer es hacer clic en el botón ‘Guardar fragmento’.
¡Eso es todo! Has agregado con éxito la navegación con las teclas de flecha izquierda y derecha en tu sitio web.
Método 2: Agregar navegación por teclado con teclas de flecha usando el plugin Arrow Keys Navigation
Si no deseas agregar código a tu sitio web, puedes usar el plugin Navegación con teclas de flecha.
Este plugin te permite navegar por las publicaciones anteriores y siguientes de tu sitio usando las teclas de flecha derecha e izquierda de tu teclado.
Primero, necesitas instalar y activar el plugin Arrow Keys Navigation. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: Este plugin no se ha actualizado recientemente. Sin embargo, lo probamos con la última versión de WordPress y todavía funciona. Para más detalles, puedes ver nuestra guía sobre el uso de plugins desactualizados.
Dado que es un plugin muy simple, no requiere configuración adicional. Una vez que hayas activado el plugin, ahora puedes cambiar entre diferentes publicaciones en tu sitio usando las teclas de flecha.
Ten en cuenta que este plugin solo te permite cambiar entre diferentes publicaciones en tu sitio web, por lo que no podrás usar las teclas de flecha para pasar de una página a otra.
Por ejemplo, no puedes pasar de tu página de ‘Inicio’ a tu página de ‘Contáctanos’ usando las teclas de flecha.
Después de activar el plugin, puedes agregar una barra de alerta o un popup en tu sitio web que le diga a los usuarios que ahora pueden navegar por varias entradas de blog simplemente usando las teclas de flecha para moverse de una entrada a la siguiente.
Para obtener instrucciones detalladas, consulta nuestro tutorial sobre cómo crear una barra de alerta en WordPress.
Navegación con teclas de flecha para sliders y galerías de imágenes de WordPress
Las dos soluciones anteriores permitirán a los usuarios navegar por tus entradas de blog con las teclas de flecha. Sin embargo, a veces es posible que desees agregar otras funcionalidades, como permitir a los usuarios mover imágenes con las teclas de flecha o quizás mover tu slider con las teclas de flecha.
En estos casos, necesitarás usar un plugin de galería de WordPress y/o un plugin de slider de WordPress. La mayoría de los plugins populares de slider y galería vienen con funciones de navegación por teclas de flecha integradas.
Recomendamos usar Envira Gallery porque es el mejor plugin de galería que te permite personalizar tus imágenes según tus preferencias, incluyendo marcas de agua, teclas de flecha y texto alternativo.
Para más detalles, consulta nuestro tutorial sobre cómo crear una galería de imágenes en WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo agregar navegación por teclado con las teclas de flecha en WordPress. También te puede interesar ver nuestras mejores selecciones de los mejores constructores de temas de WordPress para diseñar un sitio web hermoso o los atajos de teclado más útiles para WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Intenté usar el fragmento en el sitio de mi amigo y funciona muy bien. Él tiene un blog de viajes diseñado como un diario de viajes y esta fue una muy buena manera de hacer el sitio más agradable para la gente. Gracias por el código proporcionado.
Brian
Funciona a la perfección, para la primera opción de WP Code. Pero, ¿alguna idea de cómo hacer que esto se 'repita' en todas las publicaciones disponibles de un tipo de publicación? Actualmente, en la primera o última publicación, la implementación simplemente recarga la página de esa publicación.
Soporte de WPBeginner
Por el momento no, ¡pero investigaremos la posibilidad para una futura actualización del artículo!
Administrador
Shiran
¿Por qué esto funciona al revés? Es decir, tengo que presionar la flecha de “atrás” para avanzar…
Soporte de WPBeginner
Puede haber un problema con tu teclado, ¿has intentado usar un teclado en pantalla para ver si el problema ocurre al usar un teclado diferente?
Administrador