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
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.
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.
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.
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
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
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.
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
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)
