SummArg | Cursos y recursos para webmasters

Clase 12: archive.php y plantillas por categoría, fecha, autor, taxonomía, etiqueta.

Antes de arrancar con las plantillas de archivo en general, vamos a actualizar un poco el header.php de nuestro theme en función de adaptarlo a los requerimientos actuales con Facebook. Antes que nada, incluyamos un favicon, porque sino el theme se ve aburrido en nuestros navegadores.

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico">

favicon1

Acto seguido, vayamos colocando algunas etiquetas para que Facebook tome la información como nosotros queremos en cuanto al home, los interiores los dejaremos para que naturalmente tome los datos del cuerpo del contenido.

<?php if (is_home() || is_front_page()) { ?>
<meta property='og:locale' content='es_ES'/>
<meta property='og:type' content='website'/>
<meta property='og:title' content='themeTaller'/>
<meta property='og:description' content='Un theme WordPress para aprender'/>
<meta property='og:url' content='http://www.summarg.com/demos/themetaller/'/>
<meta property='og:site_name' content='themeTaller'/>
<meta property="og:image" content="<?php bloginfo('template_directory'); ?>/images/avatar.png">
<?php } ?>

Por avatar.png debemos subir una imagen de mas de 350px x 350px. Para ver la información que Facebook toma de nuestras urls podemos usar la herramienta llamada Depurador.

depurador

Y constantamos en Facebook compartiendo el link en cuestión:

facebook-themetaller

Listo! Ahora si, vamos a lo nuestro.

Como ya vimos en la clase 4, la plantilla archive.php agrupa todos los listados de posts por: categorías, autor, fechas, etiquetas, custom post types archive y custom taxonomies. Esto significa que si solicitamos un listado de entradas de la categoría con id 4 (miblog.com/?cat=4), WordPress primero buscará la plantilla para esa categoría específica, que sería category-4.php. Al no encontrarla, busca la plantillas de categorías en general, category.php. Si no existe, utiliza archive.php, si a su vez tampoco existe entonces buscará index.php. Lo mismo sucede para etiquetas, autor, fecha, y las demás. Existe una jerarquía que WordPress recorre en un orden específico.

Tomemos el caso de dos categorías de nuestra instalación de prueba, la categoría productos (id 111) y la categoría blog (id 45). Podríamos crearles una plantilla para cada uno generando el archivo category-productos.php y category-blog.php, respetando la primera forma que busca WordPress que es category-$slug.php. O bien podríamos llamarlos caregory-111.php y el category-45.php, con el formato category-$id.php.

Pero vamos a usar archive.php con Conditional Tags, sólo por el placer de usar tantos condicionales. En un sitio normal con muchas visitas no nos conviene tener un archivo con tantos condicionales como lo vamos a crear ahora, y resulta mas efectivo crear tantos archivos como sea necesario. Pero estamos aprendiendo y esto es un gran experimento.

Esto es lo que tenemos hasta ahora en nuestro archive.php:

<?php get_header(); ?>
<div id="wrapper">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="dos-tercios listado">
 <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_excerpt(); ?>
 <?php the_time('F jS, Y') ?> | <?php the_author() ?>
 </div><!-- end of dos-tercios -->
<?php endwhile; else: ?>
<h2>No encontrado</h2>
<p>Lo sentimos, intente utilizar nuestro formulario de b&uacute;squedas.</p>
<?php endif; ?>
</div><!-- end of wrapper-->
<?php get_sidebar(); get_footer(); ?>

Vamos a tener dos objetivos simples. El primero es que cuando se muestre la categoría de productos se vea tal como está en la página de productos, así que tomaremos gran parte del código que está en la página personalizada que construimos la clase anterior.

El header y el footer se mantienen, en todas las plantillas necesitamos de estos dos, así que vamos a manejarnos en el medio de ese espacio.

Colocamos debajo de la llamada al header nuestro condicional con el correspondiente else. Cabe mencionar que necesitamos colocar un exit a cada if, ya que cuando se cumpla la condición dada (ej. estamos en la categoría 111) se va a mostrar ese código y adicionalmente también se va a mostrar el que coloquemos dentro del else, ya que ambas condiciones se cumplen de algún modo. El exit corta o escapa a todo el conjunto una vez que una se cumple.

<?php if (is_category(111)) { ?>
<div id="wrapper-full">
 <h1>Productos</h1>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="producto">
 <?php the_post_thumbnail('producto'); ?>
 <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 </div>
<?php endwhile; endif; ?>
<div class="navigation"><?php posts_nav_link('','<p align="right">Siguientes</p>','<p align="left">Anteriores</p>'); ?></div>
</div><!-- end of wrapper-full -->
<?php exit; } else { ?>

Antes de la llamada al footer hay que colocar otra llave cerrando todo.

<?php get_sidebar(); ?>
<?php } ?>
<?php get_footer(); ?>

Cabe destacar que lo que tendríamos que lograr es que no haya tantas aperturas y cierres de php, por lo que  la línea anterior bien la podríamos convertir en esto:

<?php get_sidebar(); } get_footer(); ?>

Pero como dijimos antes, estamos aprendiendo y la intención es que les resulte bien claro lo que vamos haciendo. Lo importante es que tengan presente que lo que ven acá es un pantallazo para entender como funciona el tema y de ahí progresar.

Ahora si vamos a nuestra categoría de productos, podemos ver el listado de productos de la categoría “productos” y de sus subcategorías, en el formato que escogimos. Podemos ver el resultado en el demo online.

Pasemos a darle un formato diferente a las entradas en la categoría blog para que quede del siguiente modo, sin barra lateral:

theme1

En la línea superior a la del else, colocamos la nueva condición y le daremos un formato distinto a nuestros contenedores.

<?php } if (is_category(45)) { ?>
<div id="wrapper-full">
 <h1>Blog</h1>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="blog">
 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
 <h2><?php the_title(); ?></h2>
 <?php the_post_thumbnail('thumb'); ?>
 <?php the_excerpt(); ?>
 </a>
 </div>
<?php endwhile; endif; ?>
<div class="navigation"><?php posts_nav_link('','<p align="right">Siguientes</p>','<p align="left">Anteriores</p>'); ?></div>
</div><!-- end of wrapper-full -->
<?php exit; } else { ?>

Y en el CSS definimos este nuevo contenedor para que tenga su propio estilo.

.blog {
width: 435px;
height: 210px;
float:left;
margin: 5px;
padding:5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #e9e9e9;
background-color: #f4f4f4;
}
.blog a {
text-decoration:none;
color: #333;
}
.blog img {
float:left;
margin: 5px 10px 0 0;
border: 2px solid #e9e9e9;
}
.blog h2 {
margin-top:5px;
font-size:20px;
line-height:24px;
}
.blog a h2 {
text-decoration:none;
color: #333;
}
.blog:hover {
background-color: #ccc;
}

Podemos ver el resultado del ejercicio en esta ubicación.

Ahora hagamos una plantilla para mostrarse cuando el usuario solicite las entradas de un autor. Al igual que en el caso de las categorías, cuando se solicite el listado por autor, WordPress dará prioridad a la búsqueda de plantillas de la siguiente manera:

  1. author-$nicename.php: En donde $nicename es el nombre de usuario del autor solicitado.
  2. author-$id.php: En donde $id es el id de usuario del autor.
  3. author.php: Plantilla genérica para todos los autores
  4. archive.php: El nuestro!
  5. index.php

Vamos a usar nuevamente un condicional tag y a pensar en cómo queremos mostrar la página. Nuestro objetivo será colocar arriba del listado (fuera del loop) la información que podamos sobre el autor solicitado. Y aquí tenemos un problema puesto que todas las funciones con get_the_author() y similares funcionan dentro del loop. Pero una de las maravillas de WordPress es su documentación y la enorme comunidad que escribe sobre estos temas, así que le echamos una leída al snippet que publicó Kevin Muldon en WPHub y tomamos lo que necesitamos para construir nuestro recuadro de autor.

author

Luego del recuadro de autor (identificado con la class authorInfo) procedemos a colocar el bucle como siempre, con unos contenedores que esta vez contemplarán el espacio que necesita la sidebar para mostrarse. El código PHP quedará de la siguiente manera:

<?php } if (is_author()) { ?>
<div id="wrapperUnTercio">
 <?php if(isset($_GET['author_name'])) :
 $curauth = get_userdatabylogin($author_name);
 else :
 $curauth = get_userdata(intval($author));
 endif; ?>
 <h1>Art&iacute;culos escritos por <?php echo $curauth->nickname; ?></h1>
 <div class="authorInfo">
 <h2><?php echo $curauth->nickname; ?></h2>
 <p><strong>Sitio web</strong>: <a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a></p>
 <p><strong>Sobre <?php echo $curauth->nickname; ?></strong>: <?php echo $curauth->user_description; ?></p>
 </div>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="unTercio">
 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
 <h2><?php the_title(); ?></h2>
 <?php the_post_thumbnail('thumb'); ?>
 <?php the_excerpt(); ?>
 </a>
 </div>
<?php endwhile; endif; ?>
<div class="navigation"><?php posts_nav_link('','<p align="right">Siguientes</p>','<p align="left">Anteriores</p>'); ?></div>
</div><!-- end of wrapper -->
<?php get_sidebar(); ?>
<?php exit; } else { ?>

El CSS para esta nueva sección quedaría de la siguiente manera:

.authorInfo {
 width: 586px;
 padding: 10px;
 float:left;
 margin: 0 0 20px 20px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 border: 1px solid #e9e9e9;
 background-color: #f4f4f4;
 }
.authorInfo h2 {
 color: #7ec5ff;
 }
.unTercio {
 width: 285px;
 float:left;
 margin: 0 0 20px 20px;
 border-bottom:1px solid #e9e9e9;
 }
 .unTercio a {
 text-decoration:none;
 color: #333;
 }
 .unTercio img {
 float:left;
 margin: 5px 10px 0 0;
 border: 2px solid #e9e9e9;
 }
 .unTercio h2 {
 margin-top:5px;
 font-size:20px;
 line-height:24px;
 }
 .unTercio a h2 {
 text-decoration:none;
 color: #333;
 }
 .unTercio:hover {
 background-color: #f4f4f4;
 }

Y el resultado puede verse en el siguiente ejemplo con un autor de nuestro demo.

Finalmente vamos a construir una plantilla para tags (etiquetas) que sea prácticamente igual a la de autor con la diferencia de que queremos que se muestre la nube de etiquetas arriba de todo en un estilo que se adapte a nuestro trabajo.

tags

El código PHP deberá utilizar el tag single_tag_title() para llamar al nombre del tag y utilizarlo en nuestro título, luego colocamos la función wp_tag_cloud() sin parámetros para mostrar la nube de tags y el bucle sigue igual que en el de autor.

<?php } if (is_tag()) { ?>
<div id="wrapperUnTercio">
 <h1>Listado de art&iacute;culos con la etiqueta <?php single_tag_title(); ?></h1>
 <div class="tagCloud">
 <?php wp_tag_cloud(); ?>
 </div>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="unTercio">
 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
 <h2><?php the_title(); ?></h2>
 <?php the_post_thumbnail('thumb'); ?>
 <?php the_excerpt(); ?>
 </a>
 </div>
<?php endwhile; endif; ?>
<div class="navigation"><?php posts_nav_link('','<p align="right">Siguientes</p>','<p align="left">Anteriores</p>'); ?></div>
</div><!-- end of wrapper -->
<?php get_sidebar(); ?>
<?php exit; } else { ?>

Para el CSS unicamente añadimos lo siguiente:

.authorInfo, .tagCloud {
width: 586px;
padding: 10px;
float:left;
margin: 0 0 20px 20px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #e9e9e9;
background-color: #f4f4f4;
}
.tagCloud a{
text-decoration:none;
}

Comprobamos que la nube y el listado se muestren correctamente en este link. 

Pueden descargar el theme desde aquí: themeTaller 12 (216)

Dejar un comentario

  1. Gracias Nekko!!! Era lo que necesitaba. Todas las semanas desde hace mucho tiempo vengo entrando a tu sitio y me iba desilusionado. Hoy quede sorprendido. Y encima con EXTRAS!!!!. Sos una Genia

  2. Chechu

    Gracias por tus palabras y mil disculpas a los lectores en general por las demoras… es complicado organizar el trabajo de modo de poder volver a dedicarle las energías que este sitio se merece.

  3. […] Clase 12: archive.php y plantillas por categoría, fecha, autor, taxonomía, etiqueta. […]

  4. […] Clase 12: archive.php y plantillas por categoría, fecha, autor, taxonomía, etiqueta. […]

  5. […] Clase 12: archive.php y plantillas por categoría, fecha, autor, taxonomía, etiqueta. […]

  6. David Villanueva

    Hola tengo un problema he creado el archivo category-20.php y no funciona pues la categoria sigle ocn la plantilla del index que puedo estar haciendo mal?

Dejar un comentario