(zuletzt bearbeitet )

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? Das wäre jedenfalls sehr nett! :-)

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. ?>

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

13. März 2012 05:15 UhrAntworten#
Thomas
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?
13. März 2012 05:17 UhrAntworten#
Thomas
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 🙂
13. März 2012 10:59 UhrAntworten#
Chris (Administrator)
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 🙂
13. März 2012 12:47 UhrAntworten#
Thomas
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.
13. März 2012 12:57 UhrAntworten#
Chris (Administrator)
Wäre schon ok gewesen. Hilft ja vielleicht auch anderen. 🙂

Jetzt bist du dran: Was denkst du?

Bitte beachte: Auch wenn das Angeben einer E-Mail-Adresse optional ist, so bist du doch nicht vollständig anonym, denn u.a. deine IP-Adresse wird mit dem Absenden dieses Formulars gespeichert.



Tastenkürzel


Überall

j: Älterer Artikel

k: Neuerer Artikel

s: Suchen

h: Hilfe


Auf Artikel-Seiten

t: Auf Twitter posten

f: Auf Facebook posten

g: Auf Google+ posten