Beliebteste Posts als Widget mit Beitragsbild anzeigen - Guru 2.0
Beliebteste Posts als Widget mit Beitragsbild anzeigen

Beliebteste Posts als Widget mit Beitragsbild anzeigen

WordPress

Widget mit beliebtesten Posts

Ich bin heute in einer FaceBook-Gruppe über eine interessante Frage gestolpert und die hat es in sich gehabt. Irgendwie bin ich dadurch ins Nachdenken gekommen und habe mal ein wenig gesurft und probiert. Und dabei ist dann gleich ein Widget entstanden und eine Idee für einen Post. Denn der Blog soll ja wieder aktiv betrieben werden (was auch gerade passiert). Aber oft fehlen mir die Ideen, wenn man schon Jahre mit WordPress arbeitet, hat man das Gefühl schon alles beschrieben zu haben oder alles funktioniert doch eh so leicht. Und da war die Ideengeberin nicht so schlecht, denn damit hatte ich wiedermal eine gute Idee für einen Post.

BILDVORSCHAU BLOGARTIKEL

in ihrer rechten leiste sieht man die blogartikel und DIE haben ein foto davor stehen.

Und genau hat es bei mir Klick gemacht. Denn mein Kommentar “das ist leicht zu programmieren” führte zu diesem Post. Also schauen wir uns an wie das geht!

Shortcodes im Text-Widget verwenden

Das ist das erste was wir wirklich brauchen. Wir schreiben in das Textwidget von WordPress einen Shortcode und der sollte ausgewertet werden. Wenn Du das einfach so machst, wird es nicht funktionieren!

Shortcode in einem Text-Widget

Shortcode in einem Text-Widget

Damit der Shortcode von WordPress erkannt wird, brauchen wir die Datei functions.php aus deinem aktiven Theme. Ganz am Ende (aber vor dem ?>) fügst Du folgende Zeile ein und es klappt.

Einen neuen Shortcode erzeugen

Nun brauchen wir einen Befehl um WordPress einen neuen Shortcode zu lernen. Und auch eine Funktion welche diesen Shortcode mit Leben erfüllt.

Diesen Code können wir direkt nach der vorherigen Zeile in die Datei functions.php einfügen. Damit haben wir einen Shortcode guru20_postwidget erzeugt, welcher die Funktion g20_postwidget aufruft und deren Ergebnis anzeigt.

Nun müssen wir nur mehr die passenden Posts in der Funktion ermitteln. Am einfachsten legen wir dazu eine neue Abfrage an, gehen die ermittelten Posts schrittweise durch und stellen uns eine unsortierte Liste zusammen. Das ganze geben wir zurück und das war’s dann auch schon.

Eigentlich ist es nicht schwer! Mit posts_per_page=5 geben wir an wieviele Posts angezeigt werden sollen. Dafür ist die Sortierung der Posts. Danach erzeugen wir einen Schleife welche durch alle gefundenen Posts durch geht. In dieser holen wir zuerst den Post und fragen danach vier Eigenschaften ab, welche wir in Variable speichern. Nun prüfen wir ob ein Beitragsbild gespeichert ist und legen das Bild mit 80×80 Pixel in eine Variable $thumb. Wurde kein Bild gefunden, verwenden wir das erste Bild im Inhalt des Posts oder ein Standardbild. Am Ende geben wir noch das ul-Element der Variablen $popular zurück.

Das erste Bild des Post-Contents finden

Ja diese Kleinigkeit haben wir noch übersehen. Aber wir erzeugen am Ende der Datei <functions.php noch folgende Funktion und schon klappt alles perfekt.

Damit wird das erste Bild gefunden und der Dateiname zurückgegeben. Falls aber auch kein Bild im gesamten Content vorhanden ist, brauchen wir ein Standardbild. Dieses wird in der "/path/to/default.png" festgelegt. Einfach den Wert zwischen den Anführungsstrichen anpassen und schon klappt’s mit dem Bild.

Zusammenfassung

Mit ein paar Zeilen in der Datei functions.php kannst Du die Usability deines Blogs weiter verbessern. Nun kannst Du, als kleiner Zusatznutzen, jeden Shortcode in einem Text-Widget benutzen. Ist doch auch nicht so schlecht, oder?
Ich würde mich über Kommentare, Wünsche und Anregungen zu diesem Post natürlich freuen.


Infos:
Das Ermitteln des Bildes habe ich mir bei CSS-Tricks abgeschaut.
Natürlich habe ich auch im Codex von WordPress nachgeschaut.

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.