Cómo implementar una navegación usando atajos de teclado

¿Te has preguntado alguna vez cómo es posible implementar una navegación por artículos usando atajos de teclado? Este método es un complemento muy interesante que puedes (y debes) añadir a páginas con mucho contenido estructurado de forma lineal (como blogs, galerías de fotos, portafolios, etc), para que los visitantes puedan moverse de forma mucho más rapida por el contenido. Por si fuera poco, esta implementación tambien mejorará la usabilidad de tu página y ayudará a Google a indexar adecuadamente los contenidos de tu sitio.

keyboard

En este ejemplo voy a mostrar como se puede implementar este tipo de navegación en WordPress. El objetivo es el siguiente: al pulsar la tecla izquierda (←) nos llevará a un post anterior,  y al pulsar la tecla derecha (→), a un post posterior.

En primer lugar vamos a costruir los botones. Este código puedes incluirlo, por ejemplo, en el archivo single.php de tu tema:

<?php
    $prev = get_previous_post();
    $prev_title = esc_attr(strip_tags(get_the_title($prev->ID))); ?>
    <a href="<?php echo get_permalink($prev); ?>" title="<?php echo $prev_title;" rel="prev">&laquo; Anterior</a>
<?php
    $next = get_next_post();
    $next_title = esc_attr(strip_tags(get_the_title($next->ID))); ?>
    <a href="<?php echo get_permalink($next); ?>" title="<?php echo $next_title;" rel="next">Siguiente &raquo;</a>
?>

Ahora vamos a escribir un poco de Javascript que nos ayudará a capturar el evento de la pulsación de las teclas izquierda y derecha, redirigiendo al articulo deseado.

<script type="text/javascript">
    $(document).keydown(function(e) {
        var e = e || event;
        var keycode = e.which || e.keyCode;
        var obj = e.target || e.srcElement;
        // No activar el evento si estamos en un formulario
        if(obj.tagName.toLowerCase()=="textarea") { return; }
        if(obj.tagName.toLowerCase()=="input") { return; }
        // Izquierda
        if(keycode == 37) { location = $("a[rel=prev]").attr("href"); }
        // Derecha
        if(keycode == 39) { location = $("a[rel=next]").attr("href"); }
    });
</script>

Y ya está. Como veis, es muy fácil de implementar, y con un buen diseño, puede facilitar mucho la labor de los usuarios, haciendo que visiten muchas más páginas en tu blog. ¿Alguien se ha animado a probar este efecto con resultados positivos?

Lee ahora: Briconsejo: Obtener el favicon de cualquier página »

  • http://edizzz.com edizzz

    Donde se agrega el script?

  • Lucas García

    edizz, en cualquier parte, funcionará sin problemas.

  • Lucas García

    Lo único que le veo es que si estamos en el último post, no hay siguiente, por lo que el evento retornará una página que no existe. Habría que añadir una comprobación antes de cada evento para que compruebe si existe algún a[rel=next] o a[rel=prev].

    Abrazos