Bisher hatte ich wenig mit jQuery zu tun - ich habe es eigentlich nie großartig gebraucht. 😁

Ein Wunder also, dass ich diesen Artikel schreiben kann: Ich habe ein kleines jQuery-Skript auf Basis eines Skripts von reallysimpleworks.com (via davidhellmann.com) erstellt, mit dem man zwischen Artikeln auf WordPress blättern kann.

Werbung

Werbeblocker aktiv?

Vermutlich aufgrund eines Werbeblockers kann an dieser Stelle leider keine Werbung angezeigt werden. Als Blog ist diese Website jedoch darauf angewiesen, um diverse Kosten abdecken zu können. Vielleicht möchtest du Servaholics ja in deinem Werbeblocker als Ausnahme hinzufügen und so unterstützen? 🙂

Intuitiv lässt sich nun mit den Pfeiltasten links und rechts zum nächst alten bzw. neuen wechseln. Grundlage hierfür sind die zwei link-Tags prev und next, die WordPress standardmäßig einbindet.

Bemerkung: Das Skript funktioniert (absichtlich 😛) nicht in input- und textarea-Elementen.

Eingebunden werden sollte es natürlich nur für die Ansicht einzelner Artikel (in WordPress normalerweise single.php), und nach dem Einbinden einer jquery.js. 🙂

  1. (function ($) {
  2. 	jQuery(document).keydown(function(e) {
  3. 		var element = e.target.nodeName.toLowerCase();
  4.  		if (element != 'input' && element != 'textarea') {
  5. 			var url = false;
  6. 			if (e.which == 37) {
  7. 				if ($("link[rel='prev']").length > 0) {
  8. 					url = $("link[rel='prev']").attr('href');
  9. 				}
  10. 			} else if (e.which == 39) {
  11. 				if ($("link[rel='next']").length > 0) {
  12. 					url = $("link[rel='next']").attr('href');
  13. 				}
  14. 			}
  15. 			if (url) {
  16. 				window.location = url;
  17. 			}
  18. 		}
  19. 	});
  20. })(jQuery);

Nachtrag:

Sollte das jQuery-Skript nicht funktionieren, kann dies unter anderem folgende zwei Gründe haben:

  1. Keine Version eines jQuery-Bibliothek wurde eingefügt.
  2. Die Meta-Tags "prev" und "next" fehlen. Folgender PHP-Code, eingefügt in die functions.php-Datei des Themes, sollte funktionieren (getestet unter WordPress 3.3.1):
    1. <?php
    2. add_action('wp_head', 'adjacent_posts_rel_link_wp_head');
    3. ?>

Deine Meinung zu diesem Artikel?


5 Kommentare zu "jQuery: Zwischen WordPress-Artikeln mit Pfeiltasten navigieren" (RSS)

Super Artikel, das ist genau das was ich gesucht habe.

Leider klappt das bei mir nicht, schon mein php-editor meckert gleich zu Anfang des Codeschnippsels rum.

Woran könnte das liegen, fehlt da vllt etwas?
Die Fehlermeldung, die ich erhalte lautet:

Parse error: syntax error, unexpected T_FUNCTION in /home/***/domains/**.com/public_html/wp-content/themes/gridlocked/single.php on line 17

Hoffe du kannst mir weiterhelfen 🙂
Der obige Codeschnipsel ist ein JavaScript-Codeschnipsel, kein PHP-Codeschnipsel. 😉
Am besten du bindest ihn in <script>-Tags in der footer.php-Datei deines WordPress-Themes ein.

Viele Grüße, Chris 🙂
Vielen Dank für deine schnelle Antwort, das ist sehr löblich.
Habe dir mal eine Nachricht bei FB hinterlassen, da ich dir hier deinen Artikel nicht zumüllen möchte 🙂

Würde mich freuen, wenn du dir das mal anschauenst.
Wäre schon ok gewesen. Hilft ja vielleicht auch anderen. 🙂