Сторінка рубрики: шапка й записи

Що вийде

<body wp-fields-group="Category">
<header class="category">
  <img class="category__cover" src="images/coffee.jpg" alt="" tax-image="Category cover">
  <h1 wp="term-title">Coffee</h1>
  <div class="category__lead" wp="term-desc">
    <p>Beans, brewing and the people who roast them.</p>
  </div>
  <p class="category__tagline" tax-text="Category tagline">Roasted on Mondays</p>
</header>
<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>
  </article>
</div>
<div class="posts__empty" wp="no-results">No posts in this category yet</div>
</body>

Покроково

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

   wp-fields-group на <body> сторінки archive.html. З неї збирається шаблон, яким WordPress показує рубрики й позначки.

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

2. Назва й опис

   wp="term-title" і wp="term-desc" виводять те, що задано в рубриці. Опис WordPress ділить на абзаци, тому він на <div>.

   <h1 wp="term-title">Coffee</h1>
   <div class="category__lead" wp="term-desc">
     <p>Beans, brewing and the people who roast them.</p>
   </div>

3. Обкладинка

   tax-image на <img>: у кожної рубрики своя картинка, клієнт вибирає її в налаштуваннях рубрики.

   <img class="category__cover" src="images/coffee.jpg" alt="" tax-image="Category cover">

4. Власне поле рубрики

   tax-text — рядок, якого в рубрик WordPress немає: тут це підзаголовок.

   <p class="category__tagline" tax-text="Category tagline">Roasted on Mondays</p>

5. Записи рубрики

   wp="posts" — головний список сторінки: WordPress сам відбирає записи відкритої рубрики. Усередині — картка запису, як у wp="post-title", поруч — блок 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>
     </article>
   </div>
   <div class="posts__empty" wp="no-results">No posts in this category yet</div>

Що важливо

• Скільки записів показувати за раз — Налаштування → Читання. Якщо їх більше, додайте пагінацію.
• Поля рубрики з’являються в усіх рубрик і позначок. Заповнювати їх треба в кожній: «Завантажити дані» їх не переносить.
• Той самий шаблон відкривається для позначки: term-title виведе назву позначки, поля рубрики — її значення.

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

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

<div class="posts" wp-query="'post_type'=>'post','posts_per_page'=>6">
  <article class="post-card">
    <h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
  </article>
</div>

<div class="posts" wp="posts">
  <article class="post-card">
    <h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
  </article>
</div>

<p class="category__tagline" fld-text="Category tagline">Roasted on Mondays</p>

<p class="category__tagline" tax-text="Category tagline">Roasted on Mondays</p>

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

Ще рецепти