Die neuesten Blogbeiträge auf der Startseite
Dein Kunde schreibt einen Beitrag unter „Beiträge“, und er erscheint von selbst auf der Startseite, mit Bild, Datum und Auszug. Von Hand wird nichts übertragen: Der Abschnitt zeigt die drei neuesten Beiträge.
Das Ergebnis
<section class="news">
<h2 fld-text="News title">From the blog</h2>
<div class="news__grid" wp-query="'post_type'=>'post','posts_per_page'=>3">
<article class="news-card">
<a href="#" wp="post-link"><img src="images/news.jpg" alt="" wp="post-image"></a>
<p class="news-card__date" wp="post-date">October 1</p>
<h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
<div class="news-card__text" wp="post-excerpt">Pumpkin latte is back, and so is the apple pie.</div>
</article>
</div>
<div class="news__empty" wp="no-results">No posts yet</div>
<a class="button" href="/blog">All posts</a>
</section>- New autumn menu
- We roast on Mondays now
- Open late on Fridays
- Summer cold brew
Die Beiträge sind normale WordPress-Beiträge; ein Feld ist nur die Überschrift des Abschnitts.
Schritt für Schritt
Die Abfrage kommt an den Block mit den Karten
wp-query legt fest, was gezeigt wird: hier drei Blogbeiträge. Die erste Karte darin ist die Vorlage für jeden Beitrag.
<div class="news__grid" wp-query="'post_type'=>'post','posts_per_page'=>3">
Bild, Datum, Titel
wp="post-image"ist das Beitragsbild,wp="post-date"das Datum,wp="post-title-link"der Titel mit Link zum Beitrag. Der Link um das Bild istwp="post-link".<a href="#" wp="post-link"><img src="images/news.jpg" alt="" wp="post-image"></a> <p class="news-card__date" wp="post-date">October 1</p> <h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
Der Auszug
Setz
wp="post-excerpt"an ein<div>: WordPress packt den Auszug selbst in einen Absatz.<div class="news-card__text" wp="post-excerpt">Pumpkin latte is back, and so is the apple pie.</div>
Wenn es keine Beiträge gibt
Ein Block mit
wp="no-results"direkt nach der Liste wird nur gezeigt, solange es noch keine Beiträge gibt.<div class="news__empty" wp="no-results">No posts yet</div>
Worauf es ankommt
- Die übrigen Karten aus dem Design kannst du löschen oder behalten: Auf der Website ersetzen echte Beiträge sie.
- Hat ein Beitrag kein Beitragsbild, zeigt das Theme ein Platzhalterbild. Du kannst es in den Theme-Einstellungen ersetzen oder abschalten.
Typische Fehler
Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.
<div class="news__grid" wp-query="'post_type'=>'post','posts_per_page'=>3">
<article class="news-card">
<h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
</article>
<div class="news__empty" wp="no-results">No posts yet</div>
</div>Der Block „keine Beiträge“ in der Liste: Der Build ersetzt deinen Text durch die Standardphrase „No results found.“ und schreibt das ins Protokoll.
<div class="news__grid" wp-query="'post_type'=>'post','posts_per_page'=>3">
<article class="news-card">
<h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
</article>
</div>
<div class="news__empty" wp="no-results">No posts yet</div>Der Block steht direkt nach der Liste, außerhalb von ihr.