Twitter  Facebook

955 325 241 - 656 26 01 65

Mapa del Sitio Compartir RSS Mailing List

Categorías con imágenes en WordPress 3 (Category Images WP)
Imprimir  
0
Categoría Hacks & Mods, Themes & Templates
Escrito el Lunes 21 may 2012 por Pedro J. Martín Villalba

Hemos preparado un hack muy simple para que, en las paginas de navegacion de categorias (category.php) se puedan visulizar las subcategorias junto con una imagen representativa, el nombre (enlazado) y la descripción de las mismas.

En primer lugar crea dentro de tu theme una carpeta “cats” dentro de la carpeta “images” (images/cats) que será la que contenga las imágenes (se nombran en función del ID de la categoría relativa).

Crea imágenes de hasta 240pixeles (según este ejemplo) de ancho y mételas dentro de la carpeta que has creado, atendiendo únicamente a que exista una imagen con cada ID de categoría en tu sitio web. EJ. La imagen de la categoría “Referencias” es: “39.png”

Luego, en category.php inserta el código:


<ul id="listcategories">
<?php
global $ancestor;
$childcats = get_categories('child_of=' . $cat . '&hide_empty=0');
foreach ($childcats as $childcat) {
 if (cat_is_ancestor_of($ancestor, $childcat->cat_ID) == false){
 echo '<li>';
 echo '<img src="' . get_bloginfo('template_directory') . '/images/cats/' . $childcat->cat_ID . '.png" alt="' . $childcat->cat_name . '" class="thumbshot" /><br clear="left"/>';
 echo '<a href="'.get_category_link($childcat->cat_ID).'">';
 echo $childcat->cat_name . '</a>';
 echo '<p> '.$childcat->category_description.' </p></li>';
 $ancestor = $childcat->cat_ID;
 }
}
?>
</ul>
<hr />

Anuncios GRATIS de Pisos en Alquiler www.pisosenalquileren.com

Y para darle el estilo que te enseñamos más arriba, pega en tu css:


/* Listados en category.php */
#listcategories, #listcategories ul { text-align:center}
#listcategories li {display: inline-table; list-style:none; margin-bottom:20px; margin-right:25px; width:240px; text-align:left}
#listcategories li a { display: inline-table; list-style:none; margin:0 20px -10px 0; font-family:'Oswald',sans-serif; font-weight:normal; font-size:16px; color:#454545; text-transform: uppercase; vertical-align:text-top; line-height:1em;}
#listcategories li p {font-size:11px; text-transform: none; font-family:Arial, Helvetica, sans-serif; padding:0px; }

img.thumbshot, a img.thumbshot{margin-right:15px; margin-bottom:12px; border:1px #ddd solid; padding:5px; background:#fafafa; margin-left:0; -moz-border-radius:2px;  -webkit-border-radius:2px;  -khtml-border-radius:2px;  border-radius:2px}

Simple ;) ¿no?

Como sabes siempre puedes mostrar un icono en la vista de categoría, vinculado a tus RSS con el codigo:

<h2><a href="<?php echo $_SERVER['REQUEST_URI'] . '/feed' ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/rss.png" border="0" alt="RSS" /></a> <?php echo single_cat_title(); ?></h2>
Autor
Contactar con Pedro J. Martín Villalba
Propietario de la marca comercial FCSITES (diseñador web freelance workaholic con +15 años de experiencia profesional). Aficionado a las artes marciales y conocido como "Formado Comprido" en el mundo de la capoeira. Autor del libro en español: "Ao som do berimbau: Capoeira".

Imprimir  


  • Hosting

    Alojamiento Web

    desde 40€/año

    Paquetes de alojamiento web estandar y personzalidos
  • Páginas Web

    Websites

    desde 34,90€/mes

    Diseño web profesional, webs presenciales, cms y portales
  • Tiendas

    Tiendas Virtuales

    desde 54,90€/mes

    La oferta de Tienda Virtual más completa del sector
  • SEO

    Promoción SEO

    desde 340€/t

    Promoción y optimización para motores de búsqueda
  • Scripts

    Instalación de scripts

    desde 399€

    Instalación, configuración y personalización de scripts