Crear un tema WordPress desde cero – Página de categorías y tags

La mayor parte de los blogs o páginas desarrolladas con WordPress disponen de un listado de artículos o posts de una misma categoría, asociado a una etiqueta, son de un autor, etc.

Nuestra plantilla no va a ser menos y va a disponer del mismo listado de artículos tanto para las categorías como para los tags. Los autores de los posts nos da igual, por tanto, no lo vamos a considerar.

El archivo archive.php va a ser el que vamos a utilizar para estos listados. Este archivo se utiliza para mostrar entradas basadas en un criterio seleccionado, un rango de fechas, los posts de un determinado autor, una categoría o una etiqueta.

Si deseas crear una plantilla diferente para tags y categorías, por ejemplo, tendríamos que crear los archivos correspondientes con sus peculiaridades, es decir: category.php y tag.php.

Si quisieramos mostrar de forma distinta los posts de un determinado autor deberemos crear un archivo personalizado para author.php.

Nosotros tan solo vamos a crear el archive.php porque todos los listados de entradas nos interesa que sean iguales.

En nuestro archivo archive.php añadiremos el siguiente código:

Source code

<?php get_header(); ?>
<div id="sidebar_left" class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Left') ) : endif; ?>
</div>
 
<div id="content" class="col-xs-12 col-sm-8 col-md-6 col-lg-6">
    <?php 
    if ( have_posts() ) : 
        the_archive_title( '<h1 class="page-title">', '</h1>' );
        the_archive_description( '<div class="taxonomy-description">', '</div>' );
    ?>
        <ul class="archive row">
            <?php while ( have_posts() ) : the_post(); ?>
                <li class="col-xs-12 col-sm-4 col-md-3 col-lg-3">  
                    <a href="<?php echo get_permalink(); ?>">
                        <?php the_post_thumbnail('thumbnail', array('class' => 'img-responsive')); ?>
                        <h5><?php the_title(); ?></h5>
                    </a>
                </li>
            <?php endwhile; ?>
        </ul>
    <?php endif; ?>
</div>
 
<div id="sidebar_right" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Right') ) : endif; ?>
</div>
<?php get_footer(); ?>

Igual que hicimos para las páginas y entradas lo primero que hacemos es incluir la cabecera de nuestra estructura y finalmente nuestro pie de página. Añadimos las 2 columnas y nuestro contenido central y así mantenemos la estructura de nuestro tema mytheme.

El objetivo de este tema es centrarnos en el contenido central de este archivo archive.php.

Lo primero que hacemos es revisar si hay información disponible para la taxonomía que se está solicitando ya sea una categoría, tag o archivos clasificados por fechas.

Con the_archive_title() obtenemos el titular de la taxonomía.

Con the_archive_description() obtenemos la descripción de la taxonomía.

Seguidamente, tenemos una lista con los post de la taxonomía donde tan solo estamos mostrando la imagen destacada del post y el título.

La función the_post_thumbnail() es la que nos devuelve la imagen destacada de un determinado post. Fíjate que le estamos pasando como parámetro un tamaño de los definidos ya por WordPress y además le pasamos un parámetro más con class a añadir en la imagen. Recuerda o considera que en bootstrap esta clase es importante añadírsela a las imágenes para que se vean correctamente en los dispositivos móviles.

La función the_title() nos devuelve el titular del post.

Con una maquetación mínima, nuestras categorías, tags y archivos temporales se verán así:

La maquetación ya os la dejo a vuestro gusto siempre modificando y añadiendo los estilos en el archivo style.css.

Indice de contenido