Cómo añadir y usar "Genericons" en WordPress • Ayuda WordPress

Publicado por Fernando Tellado el 9 Mar, 2013

Índice de contenidos

1 … 1. Añadir genericons manualmente …
2 … 2. Añadir genericons con plugin …

No te quepa duda, los Genericons se van a hacer muy populares, y no solo porque sean un proyecto hijo de WordPress. Integrados cómo estarán en el nuevo tema por defecto, Twenty Thirteen, ofrecen unas bonitas fuentes de iconos pensadas para su uso en blogs.

Pero no tienes que limitarte únicamente a Twenty Thirteen sino que puedes usarlos en cualquier instalación de WordPress, y para eso tenemos dos maneras sencillas de hacerlo.

… 1. Añadir genericons manualmente …

Para añadirlos manualmente a nuestra instalación lo primero es descargar el paquete actual de la página oficial. Una vez descargado descomprime el zip y sube la carpeta de las fuentes y el fichero genericons.css donde quieras usarlos.

Lo normal en una instalación en uso sería subirlos a la carpeta de tu tema activo (o del tema hijo) y luego enlazar el CSS desde la cabecera HTML de tu tema (header.php), añadiendo este código:

<link href="http://misitio.com/wp-content/themes/mitema/genericons.css" rel="stylesheet">

1	<link href="http://misitio.com/wp-content/themes/mitema/genericons.css" rel="stylesheet">

Con eso ya puedes usarlos, aunque si lo prefieres puedes cambiar los colores de los iconos o aplicar efectos a los mismos creando clases CSS específicas:

Por ejemplo, para cambiar el color de todos los iconos:

.genericon {
   color: #1c7fd7;
}

.genericon {

color: #1c7fd7;

}

O esto otro para cambiar solo el color de un icono:

.genericon-twitter {
 color: #1c7fd7;
}

.genericon-twitter {

color: #1c7fd7;

}

… 2. Añadir genericons con plugin …

Ahora bien, si no quieres complicarte nada hay ya un plugin que nos facilita la tarea. Simplemente instala y activa uno llamado Genericon’d.

Una vez lo tienes activo puedes insertar los “genericons” usando HTML o un shortcode, ya sea en entradas, páginas o incluso widgets de texto. Para saber qué shortcode o HTML usar en cada caso tienes la lista e instrucciones en la página del plugin, que encontrarás en “Apariencia -> Genericon’d”

Por ejemplo, para insertar el icono de WordPress usa este shortcode:

[genericon icon=wordpress]

1	[genericon icon=wordpress]

Y para insertarlo cómo HTML usarías este código:

<div alt="f205" class="genericon genericon-wordpress"></div>

1	<div alt="f205" class="genericon genericon-wordpress"></div>

También es muy práctico aplicar tamaños o colores directamente en el HTML o incluso en el shortcode. Por ejemplo, para poner el icono de WordPress en azul lo harías así:

[genericon icon=wordpress color=#4099FF]

1	[genericon icon=wordpress color=#4099FF]

Y para aumentar su tamaño simplemente habría que hacerlo de este modo:

[genericon icon=wordpress size=4x]

1	[genericon icon=wordpress size=4x]

Y ya, no se si lo vas a usar o no ¿te lo habías planteado?

Referencias:

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.