smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Letzte Artikel in WordPress anzeigen (ohne Plugin/Widget)

25. Juni 2012
Stephan
WordPress

Analog zu der Möglichkeit die letzten Kommentare eures WordPress-Blogs anzuzeigen, könnt ihr euren Besuchern auch eure zuletzt geschriebenen bzw. neuesten Artikel eures Blogs anzeigen.

Hierfür gibt es zwar schon reichlich Plugins und Widgets, die genau diese Funktionalität bereitstellen, aber es geht eben auch ohne Einsatz eines zusätzlichen Plugins.

Einen Code-Schnipsel, der die letzten Artikel eures Blogs anzeigt, findet ihr in diesem Artikel.

Beispiel

Bevor ich euch den Code präsentiere, vorab ein Beispiel, wie die Anzeige der letzten Artikel in eurem Blog aussehen könnte:

WordPress: Letzte Artikel eures Blogs anzeigen

Der Code zum Ermitteln der letzten Artikel

Der folgende Code kann in die functions.php-Datei kopiert werden:

function get_latest_posts($limit = 3)
{
	$latest_posts = get_posts('numberposts=' . $limit);

	$output = '<ul>';
	foreach($latest_posts as $post)
	{
		$post_title = $post->post_title;
		$post_permalink = get_permalink($post->ID);

		$thumbnail = get_the_post_thumbnail(
			$post->ID,
			'thumbnail',
			array(
				'class'	=> '',
				'alt'	=> $post_title,
				'title'	=> $post_title
			)
		);

		$output .= '<li><a href="' . $post_permalink . '" title="Artikel: ' . $post_title . '">';
		$output .= $thumbnail . '<span>' . $post_title . '</span></a></li>';
	}

	$output .= '</ul>';

	return $output;
}

Um die letzten Artikel zu ermitteln benötigen wir, wie ihr sehen könnt, keine einzige Zeile SQL, sondern nur die Funktion get_posts() (Zeile 3) mit dem Parameter numberposts. Standardmätßig, wenn beim Aufruf von get_latest_posts() nichts anderes angegeben wurde, werden die 3 zuletzt verfassten Artikel aus der Datenbank geholt.

Der zweite Teil (Zeile 5 – 23) dient anschließend der Zusammensetzung der Ausgabe. In diesem Beispiel erzeugen wir einfach für jeden Artikel ein Listenelement <li></li>, welches wiederum einen Link enthält, der auf den entsprechenden Artikel verlinkt. Der Link-Text besteht dabei aus unserem Artikel-Thumbnail und dem Titel des Artikels.

Weitere Informtionen zur Funktion get_the_post_thumbnail() und den möglichen Parameter-Einstellungen findet ihr hier: WordPress Codex

Der Code zum Anzeigen der letzten Artikel

Der folgende Code kann an beliebige Stelle in eurem WordPress-Theme platziert werden. Möchtet ihr also z.B. die Liste der letzten 7 Artikel in der Sidebar anzeigen, könnt ihr den folgenden Code z.B. in die sidebar.php einfügen.

echo get_latest_posts(7);

Fazit

Die Ausgabe könnt ihr individuell anpassen und per CSS euren Wünschen nach gestalten.

Nutzt ihr in euren Blogs auch die Möglichkeit in eurer Sidebar auf die letzten und somit aktuellsten Artikel zu verlinken? Nutzt ihr dafür ein Plugin/Widget oder doch eine manuelle Code-Schnipsel-Lösung?

Kommentare  
32 Kommentare vorhanden
1 Patrick schrieb am 6. November 2012 um 07:07 Uhr

Hallo Stephan,

ich habe deinen Code-Schnipsel in die functions.php meines Themes eingefügt.

Kann ich anschließend nicht einfach
echo get_latest_posts(7);
in ein Text/html widget einfügen und somit leichter verschieben?

2 Stephan L. schrieb am 6. November 2012 um 09:29 Uhr

Hallo Patrick,

soweit ich weiß wird PHP-Code, der in das normale Text-Widget eingefügt wird nicht ausgeführt. Alternativ könntest du z.B. das Plugin PHP Code Widget nutzen, bei welchem auch reiner PHP Code eingefügt werden kann.

Gruß Stephan

3 INGENIUMDESIGN schrieb am 17. November 2012 um 09:55 Uhr

Hallo, ich verwende Dein Snippet und es Funktioniert auch alles super!
Nun würde ich gerne Dein Snippet erweitern: zeige nur aus einer bestimmten Kategorie, bzw. zeige nur Beiträge aus Kategorie x und y

Wie müsste ich Dein Code erweitern?

Vielen Dank

4 Stephan L. schrieb am 17. November 2012 um 17:59 Uhr

Hi,

dafür müsstest du Zeile 3 anpassen:

$latest_posts = get_posts('numberposts=' . $limit . '&category=3,4');

In diesem Fall werden nur Artikel aus den Kategorien mit der ID 3 und 4 berücksichtigt bzw. angezeigt.

Gruß Stephan

5 Namida schrieb am 20. November 2012 um 21:39 Uhr

Hallo,

erst einmal vielen Dank für den Artikel.
Leider funktioniert der Code bei mir aber nicht richtig. Ich habe den oberen Code in den functions.php eingefügt und dann per PHP Code Plugin den zweiten, aber leider wird es mir nicht angezeigt.
Kannst du mir vielleicht helfen? Meine Homepage ist: http://judys-tears.de/

Vielen Dank 🙂

6 Stephan L. schrieb am 21. November 2012 um 12:55 Uhr

Hallo Namida,

hast du den Code in die functions.php, die sich in deinem Theme-Verzeichnis befindet, eingefügt? Wenn ich das Plugin PHP Code Widget nutze, brauche ich im Widget nur Folgendes eintragen:

<?php echo get_latest_posts(7); ?>

Vielleicht hast du einfach nur die PHP-Tags (<?php >) vergessen?

Gruß Stephan

7 Bettina schrieb am 28. Februar 2013 um 12:18 Uhr

Hi Stephan,

sehr interessant, danke. Ich bin mit dem Code auch gerade am basteln, nur bringe ich leider den Textausschnitt bis zum „read more“ nicht in die Auflistung. Kannst du mir da helfen?

8 Stephan L. schrieb am 28. Februar 2013 um 17:10 Uhr

Hey Bettina,

könntest du deine Frage bzw. dein Problem noch mal präzisieren – was genau funktioniert bei dir nicht bzw. möchtest du erreichen? Würde dir gerne helfen aber stehe gerade irgendwie auf dem Schlauch. 😕

Gruß

Stephan

9 Bettina schrieb am 28. Februar 2013 um 18:02 Uhr

Hi Stephan,

danke für dein Feedback. Ich möchte den Textausschnitt neben Thumbnail und Titel angezeigt bekommen. Möglichst eben bis zum Read-More Tag, der in jeden Artikel angegeben ist.

Desweitere versuche ich mit tags zu arbeiten und zwar, dass immer nur ein related artikel erscheint, wenn ich bei beiden den gleichen tag vergeben habe.
Und zwar so:
$latest_posts = get_posts(’numberposts=‘ . $limit . ‚&category=6‘ . ‚&tag=x‘);
Nur weiß ich nicht, wie ich jetzt an der Stelle x den tag des aktuellen artikels auslese?

Vielen Dank!

10 Stephan L. schrieb am 28. Februar 2013 um 19:06 Uhr

Also was die Tags & Related Artikel angeht – ist das nicht genau das, was ich im Artikel Ähnliche Artikel in WordPress anzeigen beschrieben habe?

Um das mit dem Textauszug hinzubekommen, fällt mir auf die Schnelle Folgendes ein:

Nach Zeile 7 (bezieht auf den Code in diesem Artikel) fügst du das hier ein:

setup_postdata($post);

Nach Zeile 19:

$excerpt = get_the_excerpt();

Anschließend kannst du bei $output die Variable $excerpt hinzufügen.

Achso und nach der foreach-Schleife (am besten direkt vor dem return) fügst du noch diese Zeile Code hinzu:

wp_reset_postdata();

Hoffe das bringt dich ein Stück weiter?!

Grüße

Stephan

11 Bettina schrieb am 1. März 2013 um 10:15 Uhr

Hi Stephan,

ganz genau. Super. Genau das habe ich gebraucht und ich hab gestern immer versucht das selber zu basteln. 😉 Danke.

Jetzt muss ich nur noch schauen, dass ich bei der Tag-Variante die selbe Formatierung hinbekomme wie auf meinen Blog-Seiten.

kannst du dich evtl. per Mail dazu kurz bei mir melden?
Das wär super lieb, danke.

12 Bettina schrieb am 1. März 2013 um 11:16 Uhr

Oder auch hier. Ich möchte noch die thumbnails in die andere Funktion einbauen, das klappt aber irgendwie nicht so richtig.

13 Stephan L. schrieb am 1. März 2013 um 11:52 Uhr

Habe dir eine Mail mit kurzer Erklärung geschickt. 😉

Gruß

Stephan

14 Kai schrieb am 25. März 2013 um 19:45 Uhr

Hallo Stephan,

super Tool! Nur eine Frage hätte ich.
Wärs möglich sich jeweils eine Zeile über dem Post-Titel, dass Datum anzeigen zu lassen? Und wenn ja, wie?
So wie dort (http://lautwerfer.de/) bei „Aktuelles“.

Wäre super wenn das möglich wäre.

LG Kai

15 Stephan L. schrieb am 25. März 2013 um 20:23 Uhr

Hi Kai,

das ist eigentlich kein Problem. Füge in Zeile 10 Folgendes ein:

$post_date = new DateTime($post->post_date);
$post_date = $post_date->format('d.m.Y');

Anschließend kannst du in Zeile 22 vor der Ausgabe von $post_title das Datum mittels $post_date ausgeben lassen.

Gruß

Stephan

16 Simon schrieb am 22. Mai 2013 um 20:31 Uhr

Hi, eine Frage wie kann man die -thumbnails Größe änder?

Viele Grüße,
Simon

17 Stephan L. schrieb am 23. Mai 2013 um 08:20 Uhr

Hallo Simon,

wie du die Thumbnail-Größe änderst, erfährst du hier: Individuelle Thumbnail-Größe in WordPress festlegen.

Oder meintest du das speziell für die Funktion get_the_post_thumbnail? Die Größe ist über den zweiten Parameter steuerbar. Im konkreten Fall musst du also Zeile 13 ändern und deine gewünschte Thumbnail-Größe angeben. Entweder gibst du ein Keyword, wie z.B. „thumbnail“ oder „medium“ an oder aber direkt die Höhe und Breite in Pixeln als Array (array(32, 32)).

Grüße

Stephan

18 Simon schrieb am 23. Mai 2013 um 09:16 Uhr

Hallo,

Dankeschön hat funktioniert. Jetzt würde mich nur noch interessieren, wie ich denn Text wegbekommen. Hätte gerne nur die Bilder.

LG

19 Stephan L. schrieb am 23. Mai 2013 um 09:47 Uhr

Dafür musst du eigentlich nur in Zeile 22 den Titel des Artikels löschen – also <span>' . $post_title . '</span> kannst du rausnehmen. Anschließend wird nur noch das Thumbnail/Bild des jeweiligen Artikels angezeigt.

20 Simon schrieb am 23. Mai 2013 um 10:03 Uhr

Hey, danke für die rasche Antwort. Momentan schaut es so aus http://d.pr/i/JRdN Gibt es eine Möglichkeit das ich 2 Reihen mache mit jeweils 3 Artikeln? Und das noch alles in der mittig ist 😉 Viele Grüße

21 Stephan L. schrieb am 23. Mai 2013 um 14:56 Uhr

Ja, dafür müsstest du dann einfach CSS nutzen (wobei du auch ne Tabelle mit 3 Spalten und 2 Zeilen erstellen könntest).

Mittels CSS gibt es wahrscheinlich mehrere Möglichkeiten das umzusetzen. Beispielsweise könntest du der Liste ul ne bestimmte Breite width geben und den Listenelementen li eine Breite von z.B. 33%. Damit dann auch wirklich drei Listenelemente in einer Reihe angezeigt werden, die Listenelemente noch auf display: inline-bock setzen.

Habe das jetzt nicht ausprobiert, aber so ungefähr sollte das funktionieren.

Gruß

Stephan

22 Altmann M.L. schrieb am 25. Juli 2013 um 13:24 Uhr

Hallo Stephan,
wo finde ich die funktions.php Datei? Ich möchte das meine zuletzt geschriebenen Einträge vorne erscheinen.

LG Marie-Luise

23 Stephan L. schrieb am 25. Juli 2013 um 21:14 Uhr

Hallo Marie-Luise,

die functions.php findest du in dem Verzeichnis, in dem sich alle deine Theme-Dateien befinden.

Standardmäßig findest du die Datei im Verzeichnis: {server-pfad}/wp-content/themes/{name-deines-themes}/

Viele Grüße

Stephan

24 Alex schrieb am 20. August 2013 um 19:02 Uhr

Hi,

ich finde deinen Ansatz super und er funktioniert auch. Nur leider habe ich keinen blassen Schimmer, wie ich das Ganze jetzt in CSS bearbeiten soll. Ich habe bereits verschiedenste Befehle in meiner style.css probiert aber es passiert nie irgendwas.

Ich hätte das Ganze sehr gerne ähnlich gelöst wie du, mit einer Box um die neuesten Artikel, die dann wiederum eingerahmt werden. Kannst du mir weiterhelfen?

25 Stephan L. schrieb am 20. August 2013 um 19:44 Uhr

Hi Alex,

danke dir! 😉 Wo genau hapert es denn mit der CSS-Umsetzung? Im einfachsten Fall musst du ja nur ein border für ul und eines für li setzen. Am besten du schaust dir mal mit deinem Webbrowser und dem jeweils integrierten Entwicklertool meine „Neue Artikel“-Box an. Dann siehst du welche CSS-Anweisungen ich gesetzt habe.

Beste Grüße

Stephan

26 Alex schrieb am 20. August 2013 um 20:51 Uhr

Ja das hab ich gemacht und auch mal deine Befehle eingefügt. Leider ändert sich in meiner style.css rein gar nichts, wenn ich versuche in der Sidebar etwas zu ändern, auch nicht wenn ich einfach versuche, deine Befehle zu kopieren.

Bei mir ist auch leider keine ganze „Box“ die ich mit Fireburg auswählen und untersuchen kann wie bei dir, ich kann nur die einzelnen Beiträge auswählen, aber das ist ja nicht das was ich brauche 🙁

27 Stephan L. schrieb am 21. August 2013 um 14:23 Uhr

Um welche Seite handelt es sich denn? Deine verlinkte varsity-culture-Seite? Also ich kann deine ul-Liste in deiner Sidebar kannst ganz einfach mit Firebug auswählen und CSS-Anweisungen testen.

Am besten du gibst der ul-Liste noch eine id mit, so dass du sie in deiner style.css eindeutig ansprechen kannst. Im vorgestellten Code hier in diesem Artikel dazu einfach Zeile 5 anpassen:

$output = '<ul id="lastPosts">';

Joah, und dann einfach in deiner style.css mit CSS nach Belieben designen:

#lastPosts {
    border: 1px green solid;
}

#lastPosts li {
    border: 1px red solid;
}

Hoffe ich konnte dir etwas weiterhelfen?

Beste Grüße

Stephan

28 Alex schrieb am 22. August 2013 um 15:33 Uhr

Vielen Dank, du hast mir geholfen!

29 Mightymagic schrieb am 1. Oktober 2013 um 10:21 Uhr

Hallo,

erstmal super, dass Du so hilfsbereit bist. Vielleicht kann Du mir ja auch helfen, denn der Code ist, glaube ich, fast genau das was ich suche.

Ich habe den Code (zeitbedingt) noch nicht eingefügt, würde aber gerne nicht den letzten geschriebenen Post, sondern den letzten geschriebenen „Sticky“-Post verwenden. Ausserdem sollte der Titel des Artikels (ohne Date oder Author) bis zu einer Anzahl X Zeichen erscheinen mit einem [weiterlesen…] .

Wie müsste ich den Code dann ggf. anpassen?

Zum Posten brauche ich dann also nur einfach

echo get_latest_posts(1);

z.B. in meiner index.php angeben?

Jetzt schon mal Danke für die Hilfe.

30 Stephan L. schrieb am 6. Oktober 2013 um 13:15 Uhr

Hallo,

zwecks deiner Frage bzgl. den Sticky-Posts hilft dir vielleicht das hier weiter: How to make my front page display only the most recent sticky post, plus usual widgets?.

Grüße

Stephan

31 Dennis Schröder schrieb am 20. Juli 2014 um 15:44 Uhr

Hallo…erstmal vielen Dank für den Codesnippet…war auch das was ich gesucht habe!

ich brauche für ein Projekt jedoch eine Modifkation des LINKS. Ich nutze nicht den permalink sondern eine customized link. Daher habe ich die entsprechende Zeile wie folgt geändert.

$post_permalink = get_posts(‚categoryname=‘) . „/#post“ . get_the_ID();

Der Link besteht bei mir aus dem namen der kategorie und einem anker….der wiederum aus #post + der beitragsID bestehen soll…ich bekomme das leider nicht hin.

Kannst Du mit helfen?

32 mike schrieb am 27. August 2015 um 16:03 Uhr

Hallo zusammen ….
Hoffe du kannst mir weiter helfen ….
Mit dem original Widget bei WordPress „letzte Beiträge“ werden mir die letzten 5 Beiträge angezeigt … auch so wie es üblich ist … das der letzte neue beitrag ganz oben ist…
Aber ich hätte es gerne anders … und zwar so das der älteste Beitrag immer ganz oben ist…. Eine Idee wie ich das umsetzen kann ? bzw. wenn ich mich nicht Irre müsste es mit deinem Code gehen …. aber man müsste in Zeile 3 dann noch irgendwas mit sort by DESC oder so ähnlich machen ?! aber kenne mich mit sowas nicht so gut aus ….
Danke im voraus
mike

2 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!