Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress Loop mal anders: So heben Sie den ersten Beitrag ab

Eine häufig genutzte Funktion des beliebtesten CMS der Welt ist die unterschiedliche Darstellung des ersten Artikels in der Blogansicht, wie es auch hier bei Dr. Web auf der Startseite realisiert ist. Allerdings ergeben sich bei der Umsetzung dieser Aufgabe Fallstricke, die es zu umgehen gilt. Ich zeige Ihnen heute, wie Sie etwa den ersten Artikel anders darstellen können und so Darstellungsprobleme vermeiden.

wordpress-loop-teaser_DE

WordPress Loop

Den ersten Beitrag auf der Übersichtsseite eines WordPress-Blogs von anderen Beiträgen zu unterscheiden, ist erst einmal recht einfach. Der WordPress-Codex schlägt für die Aufgabe eine Kombination zweier WP-Query-Abfragen vor.

Diese Firmen suchen nach Mitarbeitern (via jobs.drweb.de)

Der Code ist dabei sehr schlank gehalten. Um die Blogübersicht – meistens die Startseite – zu beeinflussen, muss der Code in der index.php des Themes geändert werden. Bitte machen Sie vor der Bearbeitung der Datei ein Backup. Die Datei bearbeiten Sie bitte nur in einem HTML-Editor.

Die vom WordPress-Codex vorgeschlagene Lösung mit 2 Loops.
die-standard-loop-fuer-zwei-abfragen
Wenn Sie diese Kombination von Loops verwenden, werden Sie schnell festellen, dass sie scheinbar funktionieren. Allerdings nur scheinbar, denn ohne explizite, zusätzliche Angaben werden einige Probleme auftauchen. Manche Probleme werden sofort ersichtlich sein, andere nur in gewissen Situationen.

Zwei offensichtliche Probleme – die Artikel-Doppelung

Die erste Loop oben wird sich alle Artikel ziehen, die auf der Blogübersicht erscheinen sollen. Die zweite Loop macht exakt dasselbe. Wir haben also eine ganze Menge doppelter Artikel auf der Website. Das sieht nicht nur blöd aus, es ist auch nicht das, was wir erreichen wollten.

Die Lösung der doppelten Beiträge

Mit etwas zusätzlichem PHP können wir unseren beiden Loops den Fehler abgewöhnen. Das geht recht einfach.

bessere-loop-mehr-code

Zeile 1 legt hierbei fest, dass der erste Artikel nur auf der Startseite (Seite 1) auftaucht und nicht auf den weiteren Seiten der Blogübersicht. In der zweiten Zeile haben wir den WP_Query() Code um ein wichtiges Detail ergänzt, es wird nur noch ein einziger Artikel von dieser Loop gezogen und dargestellt. Zeile 4 und Zeile 13 teilen den beiden Loops mit, dass kein Beitrag doppelt angezeigt werden soll.

Scheinbar haben wir mit diesem Code nun genau das erreicht, was wir erreichen wollten, nämlich eine fehlerfreie, dabei unterschiedliche Darstellung des ersten Artikels auf der Seite.

So kann das Ergebnis aussehen

Ein optimales Endergebnis

Warum das Ergebnis trotzdem noch Fehlerhaft ist

Ab und an braucht man mal einen sogenannten Sticky-Post. Ein Beitrag, der auf der Startseite immer oben gehalten wird. In unserem Fall wäre es also der erste Beitrag mit dem großen Artikelbild. Wie Sie sehen, funktioniert das auch. Allerdings wird der Artikel, der nach dem Sticky-Artikel erstellt wurde, ebenfalls groß dargestellt.

Die Fehler in der Loop

schlechte-loop
Oben ist ein Sticky-Artikel zu sehen, der zweite Artikel ging einen Tag später online. In diesem Fall werden Sticky-Beitrag und erster Artikel groß dargestellt. Zudem taucht der Sticky-Artikel noch zusätzlich in der zweiten Loop mit den kleinen Beitragsbildern auf. Wir haben hier also gleich zwei Fehler, die es zu beheben gilt.

Dieser Code stellt alles optimal dar

Ein Klick öffnet das Gist bei Github. Dort kann der Code heruntergeladen werden.
Die optimale Loop für die unterschiedliche Darstellung des ersten Beotrags
Erst wenn wir dem Code der Loops einige Ergänzungen hinzufügen, funktioniert alles in jeder Situation fehlerfrei. In Zeile 3 teilen wir der Loop mit, dass sie entweder einen Sticky-Post, oder den letzten Beitrag anzeigen soll. In der zweiten Loop werden hingegen keine Sticky-Posts angezeigt.

Zeile 24 teilt der zweiten Loop mit, dass sie die Artikel auf Seiten aufteilen soll, wie es auch mit der Standard-Loop auf der Blogübersicht funktioniert. Zeile 25 sorgt dafür, dass keine Sticky-Posts angezeigt werden, während die Zeile 26 dafür sorgt, dass keine doppelten Beiträge auf der Website erscheinen.

Dieser Code ist recht aufwändig für die Blogübersicht (index.php), doch er funktioniert in allen denkbaren Varianten.

Das fehlerfreie Endergebnis

Endergebnis in Natura ansehen
Ein optimales Endergebnis

Fazit

Manche Aufgaben scheinen auf den ersten Blick einfach umsetzbar, doch der Teufel steckt im Detail. Mit dem von mir vorgeschlagenen Code sind Sie in jeder Hinsicht immer auf der richtigen Seite, denn er kommt aus der Praxis. Vielleicht mag es bessere, elegantere Lösungen geben. Das würde ich gerne sehen. Fühlen Sie sich also so frei, in den Kommentaren besseren Code posten.

Links zum Beitrag:

Das Gist von Github mit dem kompletten Code zum downloaden
(dpe)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.