how to add arrow key keyboard navigation in wordpress og Cómo agregar navegación de teclado con teclas de flecha en WordPress

Cómo agregar navegación de teclado con teclas de flecha en WordPress

¿Quiere agregar navegación con teclas de flecha a su sitio web?

La navegación con el teclado puede hacer que su sitio web sea más fácil de usar. Permite a sus visitantes pasar de una publicación a otra usando estas teclas de flecha. Sin embargo, WordPress no proporciona estas funciones de navegación de forma predeterminada.

En este artículo, le mostraremos cómo agregar navegación con teclas de flecha en WordPress.

Cómo agregar navegación con teclas de flecha en WordPress

¿Por qué agregar navegación con teclas de flecha en WordPress?

Agregar navegación con teclado a su sitio web de WordPress facilita a los usuarios navegar por las publicaciones de blog en su sitio web. Los usuarios pueden ver las publicaciones de blog anteriores y siguientes haciendo clic en las teclas de flecha derecha e izquierda de su teclado.

Esta característica es útil cuando desea que los usuarios exploren fácilmente las publicaciones en orden secuencial, como cuando usa publicaciones de blog para publicar capítulos de libros, artículos de cartera, eventos históricos y más.

Agregar navegación con teclas de flecha puede ser una excelente manera de mejorar la experiencia del usuario en su blog de WordPress, ya que alentará a los usuarios a explorar más su sitio.

Dicho esto, veamos cómo agregar navegación con teclas de flecha en WordPress usando un complemento.

Método 1. Agregar navegación con teclas de flecha usando un fragmento de código (recomendado)

Puede agregar navegación con teclas de flecha a su blog de WordPress agregando código al archivo functions.php de su tema de WordPress. Sin embargo, agregar código personalizado a los archivos principales de WordPress puede ser riesgoso, ya que un pequeño error puede dañar su sitio.

Por eso siempre recomendamos usar Código WP. Es el complemento de fragmento de código más fácil y seguro disponible.

Al agregar este código a su sitio web, sus usuarios pueden cambiar entre diferentes páginas y publicaciones en su sitio usando las teclas de flecha en su teclado.

Primero necesitas instalarlo y activarlo. Complemento WPCode gratuito. Para obtener más información, consulte nuestra guía sobre cómo instalar un complemento de WordPress.

Después de la activación, vaya a Fragmentos de código » Agregar fragmentoen su panel de administración de WordPress. Haga clic en el botón ‘Agregar nuevo’ para ir a la página ‘Agregar fragmento’.

Vaya a Fragmentos de código y haga clic en Agregar nuevo

Allí, busque la opción ‘Agregar su código personalizado (nuevo fragmento)’.

Pase el mouse sobre él y luego haga clic en el botón «Usar recorte».

Haga clic en el botón Usar fragmento

Una vez que esté en la página «Crear fragmento personalizado», comience a escribir un nombre para su fragmento de código.

A continuación, seleccione «Fragmento universal» como «Tipo de código» en el menú desplegable de la esquina derecha.

Observación: No seleccione ‘JavaScript’ como su tipo de código. Aunque es un código JavaScript, el código solo funcionará en su sitio si selecciona la opción ‘Universal Snippet’.

Elija el tipo de código Unviersal para la navegación con teclas de flecha

Luego copie y pegue el siguiente código en la ‘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>

Este fragmento permite la navegación con teclas de flecha en su sitio web.

Pegue el código para la navegación con la tecla de flecha

Luego, desplácese hacia abajo hasta el cuadro «Insertar» para elegir la ubicación del fragmento de código.

En el menú desplegable junto a «Ubicación», simplemente elija «Pie de página de todo el sitio».

Elija Pie de página en todo el sitio de la lista desplegable Ubicación

A continuación, debe elegir un ‘Método de inserción’. Seleccione la opción ‘Insertar automáticamente’ para mostrar el fragmento en cualquier lugar de su sitio web.

Si desea navegar con las teclas de flecha solo en ciertas páginas, elija la opción «Código corto». Después de guardar el fragmento de código, aparecerá un código abreviado aquí para que lo copie/pegue.

Elija un método de inserción

Luego simplemente regrese a la parte superior de la página y cambie la palanca de «Inactivo» a «Activo».

Después de eso, todo lo que tiene que hacer es hacer clic en el botón ‘Guardar fragmento’.

Guarde el clip de navegación con las teclas de flecha

¡Eso es! Ha agregado correctamente la navegación con teclas de flecha a su sitio web.

Método 2. Agregue navegación con teclas de flecha usando el complemento de navegación de teclas de flecha

Si no desea agregar ningún código a su sitio web, puede utilizar el Navegación con teclas de flecha enchufar.

Este complemento le permite navegar a través de las publicaciones anteriores y siguientes en su sitio usando las teclas de flecha derecha e izquierda de su teclado.

Entonces, lo primero que debe hacer es instalar y activar el complemento Teclas de flecha de navegación.

Para obtener más información, consulte nuestra guía paso a paso para instalar un complemento de WordPress.

Observación: Este complemento no se ha actualizado recientemente. Sin embargo, lo probamos con la última versión de WordPress y todavía funciona.

Activar el complemento

Dado que es un complemento muy simple, no se requiere ninguna configuración adicional. Después de activar el complemento, ahora puede usar las teclas de flecha para cambiar entre diferentes publicaciones en su sitio.

Tenga en cuenta que este complemento solo le permite cambiar entre diferentes publicaciones en su sitio web, por lo que no puede usar las teclas de flecha para pasar de una página a otra.

Por ejemplo, no puede usar las teclas de flecha para cambiar de su página de ‘Inicio’ a su página de ‘Contacto’.

Después de activar el complemento, puede agregar un mensaje o una ventana emergente a su sitio web para informar a los usuarios que ahora pueden navegar a través de diferentes publicaciones del blog simplemente usando las teclas de flecha para pasar de una publicación a la siguiente.

Navegación con teclas de flecha para control deslizante de WordPress y galerías de imágenes

Las dos soluciones anteriores permiten a los usuarios navegar por las publicaciones de su blog con las teclas de flecha, pero a veces es posible que desee agregar otras funciones, como permitir a los usuarios mover imágenes con las teclas de flecha, o tal vez mover el control deslizante con las teclas de flecha.

En estos casos, debe usar un complemento de galería de WordPress y/o un complemento de control deslizante de WordPress. Los complementos de galería y control deslizante más populares están integrados con funciones de navegación con teclas de flecha.

Esperamos que este artículo le haya ayudado a aprender cómo agregar navegación con teclas de flecha en WordPress. También puede consultar nuestra selección de los mejores complementos de WordPress. Si está interesado, también puede consultar nuestra guía sobre cómo agregar caracteres especiales en WordPress.

Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.

La publicación Cómo agregar navegación con teclado con teclas de flecha en WordPress apareció primero en AprenderWP.

Su Calificación Nos Ayuda a Mejorar