Monthly Archives: June 2010

Páginas diferentes por categorías en wordpress (distintas single, page y category por categoría)

Si trabajas con WordPress, es más que posible que hayas necesitado crear una página (page.php), una plantilla para listar post (category.php) y/o una plantilla específica para mostrar las entradas de una categoría específica.
Por ejemplo: una página de contacto que tenga un diseño diferente al resto de las páginas estáticas de tu sitio, o una plantilla para mostrar las entradas de una determinada categoría (ejemplo para mostrar tu portfolio) de forma distinta a como se muestran las entradas del resto de categorías (por ejemplo el blog). Y por consecuencia con esta última, necesitas mostrar con diferentes plantillas las entradas individuales (single.php) de tu portfolio y las de tus entradas del blog.

Las dos primeras, wordpress te lo hace facilmente, para el último caso tendremos que crear un pequeño snippet. Vamos por partes:

1. Distintas plantillas para cada listado de post por categorías (category.php)

Esta es facil. WordPress entiende que si creas una plantilla category-n.php, donde n es la id de la categoría que quieres mostrar de distinta forma, entonces esa es la plantilla que tiene que usar para listarla. Por ejemplo, si siguiendo el ejemplo anterior, queremos enseñar el listado de nuestros trabajos, que hemos categorizado con la categoría padre “portfolio” , de distinta forma a como mostramos el listado de post normales (blog), y la id de la categoría “portfolio” es 1, simplemente tenemos que crear un nuestro theme una plantilla llamada category-1.php donde estará la plantilla para mostrar el portfolio.
De esta manera tendremos una plantilla category.php que será la plantilla por defecto, y otra llamada category-1.php que será la que use wordpress ara mostrar los post de la categoría portfolio.

2. Distintas páginas estáticas ad hoc (page.php)

Esto aún es más sencillo. WordPress usa page.php como plantilla por defecto para mostrar las páginas estáticas. Pero si creas una página estática llamana por ejemplo contacto comercial, y quieres que tenga una plantilla diferente, simplemente tienes que crear un template llamado como tu enlace permanente (si este fuera: www.tusitioweb/contacto), la plantilla se llamaría contacto.php, esto es, el nombre del permalink (http://tusitioweb/contacto).

3. Distintas plantillas para mostrar tus entradas individuales, dependiendo de la categoría (diferentes single.php para cada categoría).

En este caso WordPress no nos ofrece ningún método mágico y tendremos que crear algo de código. Afortunadamente en google se encuentra todo. Veamoslo con un ejemplo.

Caso: queremos mostrar los detalles de nuestros trabajos (categoría padre portfolio) de distinta forma a cómo se muestran los post de nuestro blog (todas las demás categorías menos aquellas cuya categoría padre es portfolio).
El problema es que la categoría padre portfolio se subdivide en bastantes más categorías hijas y nietas (como por ejemplo: desarrollo web o diseño de interacción).

Solución: En la plantilla single.php, que es la encargada de mostrar las entradas individuales, preguntamos al loop cual es la categoría padre del post que queremos mostrar, ojo la categoría final, no la propia categoría del post, sino la de nivel superior. Si la categoría superior es la que queremos discriminar, le decimos que use una plantilla que hemso creado para ella y si no lo es, le decimos que use una plantilla single por defecto.

Vemoslo: Para empezar creamos las dos plantillas diferentes, por un lado la plantilla que va a mostrar las entradas pertenecientes a portfolio y la llamamos (como queramos pero por seguir un patrón) single-1.php (esto es con el -n donde n es la id de la categoría, para seguir un patrón reconocible y por semejanza a como se hace con las plantillas de listados de categorías o category.php). Por otro lado creamos una plantilla por defecto para mostrar el resto de las entradas que no caen en el caso anterior y la llamamos single-default.php. Y ya está prácticamente todo hecho, sólo tienes que crear el interruptor en php necesario en tu single.php (que es la plantilla a la que wordpress irá automáticamente cuando quiera mostrar una entrada individual). De esta manera basta con cortar y pegar el sguiente código, sustituyendo el nombre de la categoría por el tuyo:

<?php
 if ( have_posts() ) { the_post(); rewind_posts(); }
 $category = get_the_category();
 $parent = get_cat_name($category[0]->category_parent);
 if ( $parent=='el-nombre-de-tu-categoría' ) {
 include(TEMPLATEPATH . '/single-1.php');
 } else {
 include(TEMPLATEPATH . '/single-default.php');
 }
?>

[También se puede hacer sin preguntar por la categoría padre, sino por las propias categorías (ver cómo), pero me parece que lo normal es que se haga siempre por una categoría padre, así que este código es un poco más sofisticado].

Y eso es todo. Cualquier cosilla que no me haya explicado bien, o cualquier errata, se agradece que se comente.

PD. Aquí no he hablado de cómo hacer plantillas, porque asumo que si llegas a este problema es que ya te desemvuelves con los themes de wordpress lo suficiente como para hacer temas sencillos para blogs. Y además se asume que tiene ya bien aprendida la jerarquía de plantillas de wordpress.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

La diferencia entre diseñador de interacción y diseñador gráfico

eye-tracking

El diseñador gráfico tiene la intención de atraer una respuesta emocional visualmente. Mientras el diseñador de interfaces (de interacción) tiene la intención de provocar una repuesta lógica mentalmente.

Un buen artículo de Michael Dick donde explica de forma sencilla la diferencia entre diseñador gráfico y diseñador de interacción y repite algo que todavía muchos no han entendido: el diseño web no es diseño gráfico.

Lee el resto del artículo

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter