Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Tipps, Tricks & Tutorials » WordPress Loop mal anders: So heben Sie den ersten Beitrag ab

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

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Dr. Web Redaktion
  • 6. August 2015

Inhaltsverzeichnis

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.

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)

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

WP Agentur

wp-agentur.de | WordPress-Agentur

Köln

Farbentour-Logo.

Farbentour®

Mettmann

Netkin Digital Marketing.

netkin digital Marketing

Köln

SEOfolgreich Local SEO Agentur Muenchen

SEOfolgreich – Local SEO Agentur München

München

SEO-Sicht Agentur Berlin Logo.

SEO-Sicht

Berlin

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑