WordPress – Category Icons (Iconos de Categorías)

Category Icons es un plugin de WordPress, con el que podemos poner imágenes delante o detrás de cada categoría en nuestra barra lateral (sidebar), pero veremos mas adelante que podemos hacer mas cosas con este interesante plugin.

Este plugin fue creado por Brahim Machkouri y podemos descargar su ultima versión desde la web http://www.category-icons.com

Como me parecía muy sosa la manera que tiene WordPress para mostrar las categorías decidí meterle delante de cada categoría un símbolo, pero después lo pensé mejor y quería una imagen por cada categoría, me puse a buscar por google y encontré varios plugins que mas o menos hacían lo que quería, probé unos cinco plugin para añadir iconos/imágenes a las categorías y el que mas me gusto fue el plugin Category Icons (Iconos de Categorías), para que se entienda lo que buscaba hacer pondré lo que muestra por defecto WordPress y como lo deje finalmente con los iconos.

Categorias por defecto WordPress
Categorías por defecto WordPress
Categorias usando el plugin
Categorías usando el plugin

Como se puede apreciar tiene mejor estética el blog con iconos en las categorías.


Instalación
Descargamos el plugin de la pagina mencionada anteriormente:  http://www.category-icons.com

Esta comprimido en zip, así que lo descomprimimos y nos genera la carpeta “category-icons”.

Subimos por ftp la carpeta “category-icons” a nuestra carpeta de plugins de nuestro blog que es “/wp-content/plugins/”

Ya tenemos nuestro plugin subido, ahora toca activarlo, para ello en la administración de nuestro blog vamos a la sección “plugins>Instalados“.

Activar plugin Category Icons
Activar plugin Category Icons

Una vez activado nos crea un nuevo widget que pondremos en nuestra barra lateral(sidebar), para ello vamos en la administración de nuestro WordPress a “Apariencia>Widgets” y en el centro de la pantalla veremos los widgets disponibles, buscamos el que se llama “Iconos de Categorías”, le pinchamos y sin soltar lo llevamos a nuestra barra lateral, si tenéis varias barras laterales lo ponéis en la que mejor os venga, en mi caso lo pongo en la segunda barra lateral y en la primera posición como muestra esta imagen.

Activar widget Category Icons
Activar widget Category Icons

Ya tenemos nuestro widget funcionando, nos queda añadir los iconos que queremos mostrar para cada categoría, también se puede poner un solo icono para todas las categorías, pero en este caso serán distintos.

Para ello en nuestro panel de administración de WordPress vamos a “plugins>instalados” y pinchamos en opciones.

Opciones Category Icons
Opciones Category Icons

Como veis dentro de opciones podemos personalizar este plugin en función de vuestras necesidades, como poner el icono al lado izquierdo o derecho de cada categoría, usar un solo icono para todas las categorías, las distancias entre el icono y el texto de cada categoría, etc….., pero nosotros ahora lo que queremos hacer es añadir los iconos, así que pulsamos arriba en “Icons“.

Opcion Icons
Opcion Icons

Para añadir iconos pulsamos en el nombre de la categoría que queremos agregar el icono, nos saldrá un menú desde el que subimos la imagen a nuestro servidor donde tenemos nuestro blog.

Elegimos el icono pequeño y el icono (grande), el pequeño sera el que aparezca donde las categorías, el grande no hace falta usarlo, pero yo si lo use y mas adelante mostrare el porque, pues después de elegir los iconos pulsamos en el botón de “Selecciona Iconos“.

Category Icons - Seleccionar iconos
Category Icons - Seleccionar iconos

Ese paso hay que hacerlo con todas las categorías que queremos que aparezca un icono y el resultado final es este.

Category Icons - Bordes en iconos
Category Icons - Bordes en iconos

Como vemos, aparece un borde al lado de los iconos que hace que quede mal y que debemos solucionar. En la web del autor(ingles) tiene una sección muy interesante que es “How to“, en la que encontramos tutoriales de como hacer diversas cosas con el plugin, una de ellas es “How to remove the border around icons” (Como quitar el borde alrededor de los iconos), que es justo lo que necesitamos.

Para ello vamos al panel de administración de nuestro WordPress y a “Apariencia>Widgets“, vamos a la barra lateral donde tenemos metido nuestro widget “Iconos de Categorías” y pinchamos en la flechita que tiene a su derecha para que salgan las opciones de configuración, debemos añadir donde pone “parámetros de put_cat_icons():” el valor “class=myicons&link=false” como muestra la imagen.

Category Icons - Parametros del widget
Category Icons - Parametros del widget

Después en la hoja de estilos(css) de nuestro theme debemos añadir el siguiente codigo:

.myicons {
 border: 0px;
 vertical-align: middle;
 padding: 1px 15px 1px 0px;
}

Con este código css decimos que no tengan bordes los iconos, que se alinee verticalmente con el texto de las categorías y la última línea indica las distancias alrededor del icono en pixel.

Y el resultado final es el siguiente:

Categorias por defecto WordPress
Categorias por defecto WordPress
Categorias usando el plugin
Categorias usando el plugin

Para finalizar, voy a explicar para que use la imagen en grande de las categorías. Lo que hice fue poner la misma imagen de las categorías, en la pagina que sale cuando se pincha en cualquier categoría, pero un poco más grande para que se vea mejor, con la siguiente imagen se entenderá mejor.

Category Icons - Icono en pagina categorias
Category Icons - Icono en pagina categorias

Ahora vemos que cuando pinchamos en la categoría de humor por ejemplo, sale la página de categorías y la izquierda donde nos indica en que categoría estamos vemos como aparece la misma imagen de la categoría humor pero en grande.

Para hacer esto, dependerá del theme que estemos usando, en la web del plugin podemos encontrar diversas maneras de cómo hacerlo, yo lo explicare para mi theme para que se entienda como se hace.

Edito el archivo wp-content\themes\Pristine1.0\archive.php que es el encargado de mostrar el archivo de categorías, busco el texto “Archivos de la categoría” porque a la izquierda de ese texto es donde pondré la imagen, el código seria este:

Archivos de la categoria ‘’

Ahora añado el código que me dieron en la web del plugin para mostrar los iconos grandes y lo pongo delante del texto anterior, quedaría así:

Archivos de la categoria ‘’

Como veis en la línea 2 que añadí nueva para que muestre las imágenes se ve un nuevo estilo “class=myicons_big“, que deberos de añadir a nuestra hoja de estilos, al igual que hicimos anteriormente con nuestro estilo de categorías “myicons”, para ello añadimos este código a nuestra hoja de estilos(css).

.myicons_big {
 border: 0px;
 vertical-align: middle;
 padding: 10px 8px 15px 10px;
}

Una vez editados archive.php y style.css guardamos los cambios y subimos al server los archivos actualizados, el resultado final sería el mostrado anteriormente:

Category Icons - Icono en pagina categorias
Category Icons - Icono en pagina categorias

Esos fueron todos los cambios que realice para instalar Category Icons para mi blog de WordPress, pero recomiendo visitar la web del plugin para que veáis que se pueden hacer muchas más cosas con este plugin.

¿Quieres compartirlo?
Share on Google+1Share on Facebook0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0Share on Tumblr0Digg thisEmail this to someone