Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

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

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Dr. Web Redaktion
  • 6. August 2015
Bookmarke mich
Share on pocket

Werbeagentur Hannover | 360 Grad Konzept

VABELHAVT

UnitedAds

ARIT Services GmbH

Philipp Pistis - WordPress Agentur

TYPO3 & Shopware Agentur München - 3m5.

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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

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

Agenturpartner

Carmen Hurst | Webdesign

Bad Homburg

Berlin Translate

Berlin

UnitedAds

Starnberg

NETZhelfer GmbH

Ostfildern

Warscher – Digital Experts

Horgen

Alle Agenturpartner

Jobs

Frontend-Entwickler Angular, React

Bonn

Assistent/in der Geschäfts­führung

Innsbruck

Junior Online Marketing Manager

München

Elektroinstallateur – Rechenzentrum

Karlsruhe

WordPress Developer – Vollzeit

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Elementor für WordPress: Was sind die Vor- und Nachteile?

Elementor ist der führende Pagebuilder für WordPress und kann mehr als 7 Millionen (!) aktive Installationen für sich verbuchen. Ich habe mir den Senkrechtstarter für dich angesehen.

 →   

WordPress Block Editor: das ist der neueste Stand

Mit dem Block Editor in WordPress kannst du eigene Blöcke und „Block Patterns“ erstellen. In diesem Beitrag möchte ich dir zeigen, wie du mit dem Block-Editor einen Beitrag mit einer Überschrift, einem Bild und einem Absatz erstellst, unabhängig vom verwendeten Theme.

 →   

WordPress Website erstellen 2022: Eine Anleitung, Schritt für Schritt

WordPress ist das mit großem Abstand führende CMS, aus guten Gründen. Eine WordPress Website zu erstellen ist einfach, wie Du in der folgenden Anleitung sehen wirst:

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.