Las últimas entradas del blog en la página de inicio

Qué obtienes

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

Paso a paso

1. La consulta va en el bloque de tarjetas

   wp-query indica qué mostrar: aquí, tres entradas del blog. La primera tarjeta de dentro es el patrón de cada entrada.

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

2. Imagen, fecha y título

   wp="post-image" es la imagen destacada de la entrada, wp="post-date" su fecha y wp="post-title-link" el título con enlace a la entrada. El enlace alrededor de la imagen es 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. El extracto

   Pon wp="post-excerpt" en un <div>: WordPress envuelve el extracto en un párrafo por su cuenta.

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

4. Si no hay entradas

   Un bloque wp="no-results" justo después de la lista solo se muestra mientras aún no hay entradas.

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

Lo importante

• Las demás tarjetas del diseño puedes borrarlas o dejarlas: en el sitio las sustituyen las entradas reales.
• Si una entrada no tiene imagen destacada, el tema muestra una imagen de relleno; puedes cambiarla o desactivarla en los ajustes del tema.

Errores frecuentes

El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.

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

Atributos de esta receta

Más recetas