Navigare cu j şi k între articolele din WordPress


Scriind articolul Navigare cu j şi k din heading în heading m-am gândit: oare cât de greu o fi să faci deplasarea cu j şi k între articolele unui sit WordPress? Ei bine, se poate rezuma la nici 20 de linii de cod. Dar să ne înţelegem clar: depinde puţin de tema WordPress ce o folosiţi şi de versiunea de WordPress. Presupunând că sunteţi la zi, atunci în header-ul paginii apar indicate legăturile spre articolul anterior şi respectiv următor. Le-am evidenţiat în captura următoare. Teoretic şi la Dvs ar trebui să existe.

imagine

Dacă nu există problema e puţin mai complicată, WordPress-ul neoferind permalinkul către articolul următor/anterior, doar “grupajul” HTML ce include permalinkul. A doua premisă: folosirea jQuery. Din nou, tema ce o folosesc eu are inclus jQuery şi cam aşa va fi la orice temă modernă. Dacă nu… trebuie inclus. Având aşezate premisele, nu ne rămâne decât să folosim un cod ca mai jos, de pus în functions.php. Desigur, calea spre biblioteca MouseTrap, subiect al unor articole din ultimele zile, trebuie adaptată după unde aţi pus Dvs fişierul cu pricina.

Vă las deci cu codul şi vă invit să verificaţi că merge apăsând j, respectiv k. Nu abuzaţi :). Sper să vă placă navigarea mai rapidă şi poate o veţi implementa în siturile/proiectele Dvs.

function navigareJK() {
    echo '<script type="text/javascript" src="http://calea/spre/mousetrap.min.js"></script>';
	?>
	<script type="text/javascript">
		jQuery(function () {
			jQuery("link[rel=next]").each(function (){
				linkn=jQuery(this).attr("href");
				Mousetrap.bind('k', function() { window.location=linkn;});
			});
			jQuery("link[rel=prev]").each(function (){
				linkp=jQuery(this).attr("href");
				Mousetrap.bind('j', function() { window.location=linkp;});
			});
		});
	</script>
	<?php
}

add_action('wp_head', 'navigareJK');

PS: Evident, se poate schimba ca de exemplu Ctrl-SageataDreapta să ducă spre articolul anterior… sau ce perechi găsiţi Dvs că sunt mai inspirate.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *