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

Wenn Sie einige der größeren Blogs da draußen besucht haben, wie Mashable, Sie werden vielleicht feststellen, dass sie ein sehr schönes Menüsystem haben, das herunterfällt und Ihnen Einblick in die neuesten Blog-Posts 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, wenn die Seite vollständig geladen ist.

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 jeder zeigen. Wir kennen uns mit WordPress aus, dem WordPress API und jQuery, aber es war nicht, bis ich einen Artikel über gefunden habe Abrufen von Posts nach Kategorie mit jQuery dass wir eine schöne Lösung hatten.

HINWEIS: Ein Aspekt ihrer Methode, den ich nicht für eine gute Lösung halte, besteht darin, den gesamten query_post-String über JavaScript zu übergeben… es scheint mir, dass Sie sich einem Hacking öffnen! Ich habe das Skript für diese Site so geändert, dass ich nur die erforderlichen Parameter im Befehl query_posts übergebe.

Das Tutorial führt den Benutzer durch das Erstellen einer Vorlage zum dynamischen Abrufen der Beiträge und anschließend durch das Erstellen von Links, die die Anforderung initiieren können. Es wäre einfach gewesen, wenn wir nur ein paar Links machen wollten, aber eigentlich wollten wir das eingebaute Navigationsmenü von WordPress verwenden. Unglücklicherweise haben die Menülinks von WordPress beim Hinzufügen und Entfernen von Menüelementen Nummern generiert ... aber sie enthalten keine Informationen zu der Kategorie, die Sie in Ihrem Ajax-Aufruf abrufen und übergeben 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! Also 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 DK New Media, Stephen Coley (zum Glätten des Menüs), wir haben ein sehr schönes Untermenüsystem!

Die gesamte Arbeit wurde in unseren Themendateien durchgeführt. Wir haben die Navigationsmenüfilter in der functions.php geladen, das Untermenü div zur header.php-Datei unseres Themes hinzugefügt, eine Untermenü-Vorlage zu unseren hinzugefügt und eine Untermenü-JavaScript-Datei in unseren Header geladen – um sicherzustellen, dass jQuery bereits in unserem Theme geladen ist auch. Ich hoffe, Sie schätzen die Arbeit, es war ein lustiges Update der Website!