Последние записи блога на главной

Что получится

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

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

Ещё рецепты