Laden Sie die neuesten Beiträge nach Kategorie über das WordPress-Menü mit jQuery load

jquery

Wenn Sie einige der größeren Blogs da draußen besucht haben, mögen Sie MashableSie werden vielleicht bemerken, dass sie ein sehr schönes Menüsystem haben, das herunterfällt und Ihnen Einblick in die neuesten Blog-Beiträge aus jeder Kategorie bietet. Um sicherzustellen, dass das Laden der Seite nicht ewig dauert, laden sie diesen Inhalt mit Ajax… und laden ihn erst vor, nachdem die Seite vollständig geladen wurde.

WordPress Ajax Untermenü

Das wollten wir hier auch machen Martech Zone. Um einen Einblick in die Kategorien zu geben, die wir haben, wollte ich einige Beiträge in jedem zeigen. Wir sind mit WordPress, dem WordPress, bestens vertraut API und jQuery, aber erst als ich einen Artikel über fand Abrufen von Posts nach Kategorie mit jQuery dass wir eine schöne Lösung hatten.

HINWEIS: Ein Aspekt ihrer Methode, von dem ich nicht glaube, dass er eine gute Lösung ist, besteht darin, den gesamten query_post-String über JavaScript zu übergeben. Mir scheint, Sie öffnen sich für ein Hacking! Ich habe das Skript für diese Site so geändert, dass ich nur die Parameter übergebe, die im Befehl query_posts erforderlich sind.

Das Lernprogramm führt den Benutzer durch das Erstellen einer Vorlage zum dynamischen Abrufen der Beiträge und anschließend durch das Erstellen von Links, mit denen die Anforderung initiiert werden kann. Es wäre einfach gewesen, wenn wir nur ein paar Links erstellen wollten, aber wir wollten tatsächlich das in WordPress integrierte Navigationsmenü verwenden. Leider haben die Menü-Links von WordPress beim Hinzufügen und Entfernen von Menüelementen Nummern generiert. Sie enthalten jedoch keine Informationen zu der Kategorie, die Sie in Ihrem Ajax-Anruf abrufen und weiterleiten möchten.

Um die Menülistenelemente richtig zu kennzeichnen, haben wir den Code von WPreso integriert. Hinzufügen einer Seiten- / Post-Slug-Klasse zu Menüelementklassen.

Nur ein Problem… es funktioniert für die Seite oder den Beitrag, aber nicht für die Kategorie! Deshalb haben wir die Anfrage für die Schnecke aktualisiert mit:

$ slug = get_cat_slug ($ id);

Und fügte die Funktion von WPRecipes hinzu, WordPress-Trick: Holen Sie sich Kategorie Slug mit Kategorie-ID, um den Kategorie-Slug in ein Datenattribut im Navigationsmenü zurückzuziehen.

Also… dank der Zusammenarbeit von 3 WordPress-Sites und einigen Feinabstimmungen durch unseren jQuery-Guru bei Highbridge, Stefan Coley (zum Glätten des Menüs), wir haben ein sehr schönes Untermenüsystem!

Alle Arbeiten wurden in unseren Themendateien durchgeführt. Wir haben die Navigationsmenüfilter in functions.php geladen, das Untermenü div zur header.php-Datei unseres Themas hinzugefügt, eine Untermenüvorlage zu unseren Themen hinzugefügt und eine Untermenü-JavaScript-Datei in unseren Header geladen, um sicherzustellen, dass jQuery bereits in unser Thema geladen ist auch. Ich hoffe, Sie schätzen die Arbeit, es war ein lustiges Update der Website!

8 Kommentare

  1. 1

    Zeigen oder verkaufen Sie diesen Code irgendwo? Ich habe versucht, es zum Laufen zu bringen, aber ich kann nicht herausfinden, wie ich es mit einem Walker in wp_nav_menu einfügen soll ...

  2. 6
  3. 8

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.