SummArg | Cursos y recursos para webmasters

04/09/2010

Cómo hacer una sección de catálogo con WordPress?

Muchos usuarios se desalientan al no encontrar con rapidez el modo de hacer que su WordPress muestre una sección como si fuera un catálogo de productos. La modificación requiere de algunos conocimientos de HTML + CSS, y familiarizarse un poco con algunos scripts que existen para la plataforma.

En este pequeño tutorial vamos  a hacer paso a paso que una categoría muestre su contenido en forma de catálogo con imagenes y opcionalmente con texto. Hacia el final del tutorial entregaremos los archivos para que puedan observar el código y reciclarlo, mientras tanto veamos de que se compone nuestra modificación:

Timthumb

Ya hemos visto como se utiliza este script en este artículo, pero básicamente necesitas saber que hay que descargar el script de la página de su autor y colocarlo en el raíz de nuestro theme. Luego creamos una carpeta llamada cache y le asignamos permisos 777. La imagen que colocamos es un ejemplo de la estructura que deberá tener.

functions.php

Contendrá la función catch_that_image que ya vimos en este artículo, la función the_content_limit de labitacora.net para cortar el texto en donde deseamos y finalmente la función the_title2 que se limitará a cortar el título de nuestras entradas.

category.php

Si nuestro catálogo de productos se ubica en la categoría 3 y sólo a esa categoría queremos aplicar nuestro nuevo layout, entonces el archivo deberá llamarse category-3.php. Si no especificamos un category ID entonces la plantilla se aplicará a cualquier categoría siempre que pidamos un listado de entradas por categoría.

Al inicio de la plantilla debemos colocar el loop, luego llamaremos al título de la entrada (que cortaremos a los 25 caracteres) y finalmente a la miniatura. La miniatura será generada por timthumb y buscada automáticamente por catch_that_image.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="producto">
<h2><a href="<?php the_permalink() ?>" title="Enlace a <?php the_title(); ?>">
<?php the_title2('', '...', true, '25'); ?></a></h2>
<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo catch_that_image(); ?>&h=140&w=260&zc=1" alt="<?php the_title(); ?>" />
</div><!-- end of producto -->

En nuestro style.css podemos ir agregando alguna propiedad para la clase producto. A modo de ejemplo vamos a colocar un borde para poder apreciar en donde termina exactamente nuestra caja de producto.

.producto {
width:260px;
height:200px;
padding:10px;
float:left;
margin: 0px 5px 5px 0px;
border: 1px solid #000;
}

El resultado serían 10 artículos de una categoría ordenados del siguiente modo:

Agreguemos a nuestro producto los tags debajo de la imagen.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div>
<h2><a href="<?php the_permalink() ?>" title="Enlace a <?php the_title(); ?>">
<?php the_title2('', '...', true, '25'); ?></a></h2>
<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo catch_that_image(); ?>&h=140&w=260&zc=1" alt="<?php the_title(); ?>" />
<span><?php the_tags(); ?></span>
</div><!-- end of producto -->

Para finalizar coloquemos texto proveniente del cuerpo de la entrada con la función the_content_limit. En este caso elaboraremos la siguiente condición:

Si existe imagen, entonces coloquemos imagen + 100 caracteres de texto.
Sino, coloquemos 500 caracteres de texto.

Entonces nuestra condición en la plantilla category.php quedaría de la siguiente manera:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div>
<h2><a href="<?php the_permalink() ?>" title="Enlace a <?php the_title(); ?>">
<?php the_title2('', '...', true, '25'); ?></a></h2>
<?php // buscamos si existe una miniatura
if (catch_that_image()) { ?>
<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo catch_that_image(); ?>&h=140&w=260&zc=1" alt="<?php the_title(); ?>" />
<?php the_content_limit(100, ""); ?>
<?php } // finaliza la primer condición
// en caso de que no exista una miniatura
else {  the_content_limit(500, ""); } ?>
</div><!-- end of contenido -->
<?php endwhile; ?>

Con esta modificación cuando nuestra plantilla no encuentre una imagen en una entrada entonces procederá a poner una porción mas larga de texto, compensando así el espacio vacio que resulta de la falta de imagen.

Por supuesto que con imaginación y CSS se puede embellecer nuestro improvisado catálogo en WordPress para que se ajuste a lo que necesitamos, ya sea lucir imagenes de productos solamente como servirnos para armar un theme estilo magazine. Esperamos les haya sido de utilidad esta pequeña guía y les dejamos los archivos para descargar:

Descargar archivos.

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Muchos usuarios se desalientan al no encontrar con rapidez el modo de hacer que su WordPress muestre una sección como si fuera un catálogo de productos. La modificación requiere de algunos conocimientos de HTML + CSS, y famil…..

  2. datasitesweb

    realmente excelente el tuto ! lo voy aplicar en algunas plantillas !

  3. You’re the one with the brains here. I’m wachntig for your posts.

Dejar un comentario