Страница рубрики: шапка и записи

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

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

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

Ещё рецепты