Останні записи блогу на головній

Що вийде

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

Покроково

1. Вибірка — на блок із картками

   wp-query визначає, що показувати: тут три записи блогу. Перша картка всередині — зразок для кожного запису.

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

2. Картинка, дата, заголовок

   wp="post-image" — мініатюра запису, wp="post-date" — дата, wp="post-title-link" — заголовок із посиланням на запис. Посилання навколо картинки — 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. Анонс

   wp="post-excerpt" ставте на <div>: WordPress сам обгортає анонс в абзац.

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

4. Якщо записів немає

   Блок wp="no-results" одразу після списку показується, лише коли записів ще немає.

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

Що важливо

• Решту карток із макета можна видалити або залишити: на сайті їх замінять справжні записи.
• Якщо запис не має мініатюри, тема підставить картинку-заглушку; її можна замінити або вимкнути в налаштуваннях теми.

Типові помилки

Журнал збирання — вкладка «Логи» вашого проєкту на themeforge.pro; ті самі зауваження показує безплатна перевірка розмітки.

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

Атрибути в рецепті

Ще рецепти