La página de una categoría: cabecera y entradas
Un solo diseño para todas las categorías del blog: en la cabecera, el nombre, la descripción y la portada de la categoría abierta; debajo, sus entradas. El cliente crea una categoría nueva y ya tiene su página.
Qué obtienes
<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>- Name: Coffee
- Description: Beans, brewing and the people who roast them.
Beans, brewing and the people who roast them.
Roasted on Mondays, sold out by Friday
El nombre y la descripción son campos estándar de la categoría; la portada y el subtítulo, campos de tu marcado.
Paso a paso
Ponle nombre al grupo de campos
wp-fields-group en el
<body>dearchive.html. Con él se genera la plantilla con la que WordPress muestra las categorías y las etiquetas.<body wp-fields-group="Category">
Nombre y descripción
wp="term-title" y
wp="term-desc"muestran lo que está definido en la categoría. WordPress divide la descripción en párrafos, así que va en un<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>
La portada
tax-image en el
<img>: cada categoría tiene su propia imagen, y el cliente la elige en los ajustes de la categoría.<img class="category__cover" src="images/coffee.jpg" alt="" tax-image="Category cover">
Un campo propio de la categoría
tax-text es una línea que las categorías de WordPress no tienen: aquí, un subtítulo.
<p class="category__tagline" tax-text="Category tagline">Roasted on Mondays</p>
Las entradas de la categoría
wp="posts"es la lista principal de la página: WordPress selecciona por su cuenta las entradas de esta categoría. Dentro va una tarjeta de entrada como en wp="post-title"; al lado, un bloquewp="no-results"por si la categoría está vacía.<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>
Lo importante
- Cuántas entradas se muestran a la vez se ajusta en Ajustes → Lectura. Si hay más, añade la paginación.
- Los campos de la categoría aparecen en todas las categorías y etiquetas. Hay que rellenarlos en cada una: «Cargar datos» no los lleva.
- Una etiqueta abre la misma plantilla:
term-titlemuestra su nombre, y los campos de la categoría, sus valores.
Errores frecuentes
El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.
<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>wp-query en lugar de la lista principal: la página de cada categoría muestra todas las entradas del blog seguidas. El registro no dice nada.
<div class="posts" wp="posts">
<article class="post-card">
<h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
</article>
</div>wp="posts" muestra solo las entradas de esa categoría.
<p class="category__tagline" fld-text="Category tagline">Roasted on Mondays</p>fld-text en la cabecera lee un campo de la entrada o de la página, no de la categoría: la categoría no tiene valor propio. El registro no dice nada.
<p class="category__tagline" tax-text="Category tagline">Roasted on Mondays</p>tax-text es el campo de la propia categoría.