Сторінка блогу: стрічка, рубрики й номери сторінок

Що вийде

<body wp-fields-group="Blog">
<header class="blog-hero">
  <h1 wp="post-title">From the blog</h1>
  <p class="blog-hero__lead" fld-area="Blog lead">Notes from the roastery: new beans, brewing tips and events.</p>
</header>
<nav class="blog-cats" wp-term-query="category">
  <a class="blog-cats__link" href="#" wp="term-link"><span wp="term-title">Coffee</span> <span class="blog-cats__count" wp="term-count">5</span></a>
</nav>
<div class="posts" wp="posts">
  <article class="post-card">
    <a href="#" wp="post-link"><img src="images/news.jpg" alt="" wp="post-image"></a>
    <p class="post-card__date" wp="post-date">October 1</p>
    <h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
    <div class="post-card__text" wp="post-excerpt">Pumpkin latte is back, and so is the apple pie.</div>
  </article>
</div>
<div class="posts__empty" wp="no-results">No posts yet</div>
<div class="pagination" wp-paginate="mid_size=1&prev_text=Newer&next_text=Older"></div>
</body>

Покроково

1. Назвіть групу полів

   wp-fields-group на <body> сторінки archive-post.html — з неї збирається шаблон сторінки блогу.

   <body wp-fields-group="Blog">

2. Заголовок і вступний текст

   wp="post-title" над стрічкою виводить заголовок сторінки «Blog», fld-area — її поле. Клієнт редагує їх як звичайну сторінку.

   <h1 wp="post-title">From the blog</h1>
   <p class="blog-hero__lead" fld-area="Blog lead">Notes from the roastery: new beans, brewing tips and events.</p>

3. Рубрики з лічильниками

   wp-term-query="category" перебирає рубрики блогу. Зразок — перший елемент: посилання wp="term-link", у ньому назва й кількість записів (wp="term-title", term-count).

   <nav class="blog-cats" wp-term-query="category">
     <a class="blog-cats__link" href="#" wp="term-link"><span wp="term-title">Coffee</span> <span class="blog-cats__count" wp="term-count">5</span></a>
   </nav>

4. Стрічка записів

   wp="posts" — головний список сторінки, записи блогу один за одним. Усередині — картка запису, поруч — wp="no-results" на випадок порожнього блогу.

   <div class="posts" wp="posts">
     <article class="post-card">
       <a href="#" wp="post-link"><img src="images/news.jpg" alt="" wp="post-image"></a>
       <p class="post-card__date" wp="post-date">October 1</p>
       <h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
       <div class="post-card__text" wp="post-excerpt">Pumpkin latte is back, and so is the apple pie.</div>
     </article>
   </div>
   <div class="posts__empty" wp="no-results">No posts yet</div>

5. Номери сторінок

   wp-paginate на порожньому блоці після стрічки; підписи «Newer» і «Older» — у значенні атрибута.

   <div class="pagination" wp-paginate="mid_size=1&prev_text=Newer&next_text=Older"></div>

Що важливо

• Яка сторінка є блогом і скільки записів на ній показувати — Налаштування → Читання: «Сторінка записів» і «Відображати не більше».
• Рубрики без записів у списку не показуються.
• Сторінка однієї рубрики — окремий шаблон, див. рецепт «Сторінка рубрики».

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

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

<div class="posts" wp="posts">
  <article class="post-card">
    <h3 wp="post-title">New autumn menu</h3>
  </article>
  <div class="pagination" wp-paginate="mid_size=1"></div>
</div>

<div class="posts" wp="posts">
  <article class="post-card">
    <h3 wp="post-title">New autumn menu</h3>
  </article>
</div>
<div class="pagination" wp-paginate="mid_size=1"></div>

<nav class="blog-cats" wp-term-query="category">
  <a href="#" wp="term-title">Coffee</a>
</nav>

<nav class="blog-cats" wp-term-query="category">
  <a href="#" wp="term-title-link">Coffee</a>
</nav>

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

Ще рецепти