Primero que nada, he aquí una imagen de la versión anterior de la lista de entradas publicadas en el blog:

Ver imagen…

Sus características son:

• Atajo para solamente nueve entradas, del 1 al 9.
• La última entrada es la número 1, por lo que cada nueva entrada desplaza la navegación.

Por supuesto, esas dos características tienen tres problemas marcados:

1. Es una interfaz inconsistente, pues solo unos cuantos elementos tienen acceso mediante teclado.
2. También es inconsistente en el sentido que rompe con los accesos: cada nueva entrada cambia el atajo que alguna vez se utilizó.
3. Al presionar los dígitos del 1 al 9, la página se cambia automáticamente: ahora habrá dos dígitos “de seguridad”.

Retomando lo visto en la navegación mediante teclas con mousetrap, se crea la lógica para la lista de entradas del tema.

Primero que nada, se utilizará el conteo de entradas totales, porque es el identificador dentro de nuestra lista:

// Total de entradas.
$count = wp_count_posts()->publish;

Dentro del ciclo para imprimir entradas, se utilizará este contador con un padding a dos dígitos:

$post_shortcut = str_pad($count, 2, '0', STR_PAD_LEFT);

Y el código de HTML será:

<td id="main-post-<?php echo $post_shortcut; ?>" class="mousetrap-link">
    <a id="post-link-<?php echo $post_shortcut; ?>" class="mousetrap-link-a" href="/<?php echo $arcresult->post_name; ?>">
        <?php echo strip_tags(apply_filters('the_title', $arcresult->post_title)); ?>
    </a>
</td>

Por lo tanto, tenemos nuestra clase .mousetrap-link-a, y cada uno de esos enlaces tiene un id con el formato #post-link-{dígito}{dígito} (i.e. #post-link-01).

Antes de crear los eventos, hay que transformar el dígito de dos caracteres contenidos en el id en una cadena separada por espacios, según mousetrap:

/**
 * Toma la cadena numérica del id de una entrada (i.e. "post-link-13") y la
 * transforma a una secuencia de mousetrap.
 * Es decir, el "13" e inserta espacios entre los caracteres, terminando con
 * una cadena como "1 3" (que es una secuencia de teclas para mousetrap).
 */
function conversionMoustrapShortcut(elemento)
{
	var link_id = elemento.id;
	var link_number = link_id.substring(link_id.lastIndexOf("-") + 1);
	var mousetrapString = "";
	for (var i = 0; i < link_number.length; i++) {
		mousetrapString += link_number[i] + " ";
	}

	return mousetrapString.trim();
}

Con esa función, podemos iterar por todos los elementos con la clase .mousetrap-link-a y atar el evento de un atajo de teclado con la cadena creada por nuestra función anterior:

// Buscar el binding para atajos numéricos para entradas.
var atajosParaEntradas = document.getElementsByClassName("mousetrap-link-a");
if ( atajosParaEntradas ) {
	for (var i = 0; i < atajosParaEntradas.length; i++) {
		mousetrapString = conversionMoustrapShortcut(atajosParaEntradas[i]);
		Mousetrap.bind(mousetrapString, function(e, combo) {
			// Una vez que entramos aquí, realizamos la operación contraria, removiendo
			// los espacios para obtener el id:
			var element_id = 'post-link-' + combo.replace(/\s/g, "");
			url_enlace = document.getElementById(element_id).getAttribute("href");
			visitar(url_enlace);
		});
	}
}

De esta manera, tenemos que las primeras 99 entradas tienen atajo de teclado garantizado, y la última entrada tiene su número de entrada cronológicamente asignado:

Ver imagen…