Les derniers articles du blog sur la page d’accueil

Ce que vous obtenez

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

Étape par étape

1. La requête sur le bloc des cartes

   wp-query indique quoi afficher : ici, trois articles du blog. La première carte à l’intérieur sert de modèle pour chaque article.

   <div class="news__grid" wp-query="'post_type'=>'post','posts_per_page'=>3">

2. Image, date, titre

   wp="post-image" est l’image mise en avant de l’article, wp="post-date" sa date, wp="post-title-link" le titre avec un lien vers l’article. Le lien autour de l’image est wp="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>

3. L’extrait

   Placez wp="post-excerpt" sur un <div> : WordPress enveloppe lui-même l’extrait dans un paragraphe.

   <div class="news-card__text" wp="post-excerpt">Pumpkin latte is back, and so is the apple pie.</div>

4. Quand il n’y a aucun article

   Un bloc wp="no-results" placé juste après la liste ne s’affiche que tant qu’il n’y a encore aucun article.

   <div class="news__empty" wp="no-results">No posts yet</div>

À retenir

• Les autres cartes de la maquette peuvent être supprimées ou conservées : sur le site, de vrais articles les remplacent.
• Si un article n’a pas d’image mise en avant, le thème affiche une image de remplacement ; vous pouvez la changer ou la désactiver dans les réglages du thème.

Erreurs fréquentes

Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.

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

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

Attributs de cette recette

Autres recettes