icon mail

WordPress: Categorías con diseño diferente en Theme-Plantilla

febrero 8, 2018

Hay proyectos WordPress que necesitan tener un diseño diferente en cada categoría, en el desarrollo de temas para wordpress es muy recurrente utilizar diferentes plantillas/diseños para las categorías, existen varias formas de realizar dicha practica pero hoy vamos a aprender la manera correcta de como hacerlo bien y de una forma ordenada, el siguiente tutorial esta basado en el codex de wordpress, es por ello que considero que es la mejor solución, vamos a ello!

Paso 1: Entender la jerarquía que wordpress da a las páginas de categorías.

El sistema de wordpress tiene un poderoso gestor de plantillas y esta permite crear un theme de wordpress usando diferente diseños de plantilla para cada sección de tu sitio web, en este caso solo nos enfocaremos en las plantillas para las categorías, para eso necesitamos entender como wordpress busca las plantillas de las categorías en orden jerárquico, busca las plantillas en el siguiente orden:

category-slug.php → category-id.php → category.php → archive.php → index.php

Explicando mas a detalle: Primero WordPress necesita encontrar una plantilla/archivo específica para esa categoría en particular y lo hará usando el slug de la categoría, por ejemplo: si la categoría se llama «noticias» buscará el archivo category-noticias.php esta plantilla se usará para mostrar todos los post de la categoría «noticias» de no encontrar una plantilla/archivo con el nombre del slug (noticias), entonces WordPress buscará una plantilla/archivo con el ID de la categoría, el ID es un número único que el sistema de wordpress asigna a cada categoría creada, puedes saber su ID de cada categoría en el menú Entradas > Categorías  de tu panel de control, ahora haz clic en editar en alguna de las categorías y busca en la URL esto: category&tag_ID=8 en mi caso el ID de mi categorías noticias es 8, entonces wordpress buscará category-8.php. De no encontrar ninguna de las 2 pasará a buscar la plantilla genérica de las categorías que es category.php. Si no hay ninguna de las plantillas de categoría antes mencionada, ni la genérica presente, WordPress buscará una plantilla de archivo genérica, es decir archive.php. y por último, usará la plantilla index.php para mostrar la categoría, este es el último archivo que buscará.

Paso 2: Creando nuestra plantilla genérica de categoría en WordPress

Antes de empezar a personalizar nuestra categoría debemos de tener una base, que será nuestro archivo genérico category.php el código podría ser el siguiente. solo estoy usando algunas etiquetas básicas de html para este archivo.


<header> 
 <?php get_header();?>
</header>
<main>
 <?php if ( have_posts() ) : // Verifica si hay publicaciones para mostrar ?>
 <h1 class="archive-title">Category: <?php single_cat_title( '', false ); ?></h1>
 <?php
 if ( category_description() ) : // Mostrar descripción de categoría (opcional)
 echo category_description();
 endif;
 ?>
 <?php while ( have_posts() ) : the_post(); //El Loop ?>
 <h2>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
 <?php the_title(); ?>
 </a>
 </h2>
 <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small> 
 <?php the_content(); ?> 
 <?php endwhile; ?>
 <?php else: ?>
 <p>lo sentimos, ningun texto coincide con tu Criteria.</p>
 <?php endif; ?>
</main>
<footer>
<?php get_footer(); ?>
</footer>

Paso 3: Creando nuestra plantilla personalizada category en wordpress

En el paso 1 hablamos de la jerarquía que wordpress usa para encontrar los archivos de categorías dentro del theme, en nuestro ejemplo hacíamos referencia a una categoría llamada noticias, ahora vamos a realizar las diferentes formas de crear tu archivo categoría personalizado para que tenga un diseño y/o estructura diferente por cada categorías, nuestro archivo llevalla el nombre de category-noticias.php


<header> 
 <?php get_header();?>
</header>
<main id="noticias">
 <?php if ( have_posts() ) : // Verifica si hay publicaciones para mostrar ?>
 <h1 class="archive-title">Category: <?php single_cat_title( '', false ); ?></h1>
 <?php
 if ( category_description() ) : // Mostrar descripción de categoría (opcional)
 echo category_description();
 endif;
 ?>
 <?php while ( have_posts() ) : the_post(); //El Loop ?>
 <h2>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
 <?php the_title(); ?>
 </a>
 </h2>
 <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small> 
 <?php the_content(); ?> 
 <?php endwhile; ?>
 <?php else: ?>
 <p>lo sentimos, ningun texto coincide con tu Criteria.</p>
 <?php endif; ?>
</main>
<footer>
<?php get_footer(); ?>
</footer>

Como veras he copiado el archivo category.php y lo he pegado tal cual, lo único que he agregado es un id a la etiqueta main del HTML para hacer una pequeña diferencia entre ellos, porque el archivo category-noticias.php puede ser modificado como quieras, de aquí en adelante el diseño/contenido será el que tu desees, este archivo trabaja de manera independiente y todo lo que hagas dentro de ese archivo solo afectara a esa única categoría (noticias).

Como lo vimos al inicio también puedes llamar por el número de ID de la categoría al archivo, en este ejemplo sería el ID 8 que es el que pertenece a noticia, por lo tanto el archivo se llamaría category-8.php, de no crear ningún archivo con el ID o nombre de la categoría a personalizar, WordPress imprimiría el archivo category.php y así sucesivamente como lo menciono en el paso 1.

Relacionados