Cómo añadir y usar “Genericons” en WordPress

genericons wordpress

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.

genericons

… 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:

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:

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

… 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:

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

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í:

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

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

Referencias:

  1. BeginWP
  2. WP sites

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.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (2 votos, promedio: 4,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest