Die Kategorieseite: Kopfbereich und Beiträge

Das Ergebnis

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

Schritt für Schritt

1. Benenne die Feldgruppe

   wp-fields-group am <body> der Seite archive.html. Daraus entsteht das Template, mit dem WordPress Kategorien und Schlagwörter anzeigt.

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

2. Name und Beschreibung

   wp="term-title" und wp="term-desc" zeigen, was bei der Kategorie eingetragen ist. Die Beschreibung teilt WordPress in Absätze auf, deshalb steht sie an einem <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. Das Titelbild

   tax-image am <img>: Jede Kategorie hat ihr eigenes Bild, dein Kunde wählt es in den Kategorie-Einstellungen.

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

4. Ein eigenes Feld der Kategorie

   tax-text ist eine Zeile, die WordPress-Kategorien nicht haben: hier ein Untertitel.

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

5. Die Beiträge der Kategorie

   wp="posts" ist die Hauptliste der Seite: WordPress wählt die Beiträge der geöffneten Kategorie selbst aus. Darin steht eine Beitragskarte wie bei wp="post-title", daneben ein Block wp="no-results" für eine leere Kategorie.

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

Worauf es ankommt

• Wie viele Beiträge auf einmal erscheinen, steht unter Einstellungen → Lesen. Sind es mehr, füge Seitenzahlen hinzu.
• Die Felder der Kategorie erscheinen bei allen Kategorien und Schlagwörtern. Ausgefüllt werden sie bei jeder einzeln: „Daten laden“ überträgt sie nicht.
• Dasselbe Template öffnet sich auch für ein Schlagwort: term-title zeigt den Namen des Schlagworts, die Felder der Kategorie zeigen seine Werte.

Typische Fehler

Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.

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

Attribute in diesem Rezept

Weitere Rezepte