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:

<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;
}

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

.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]

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

<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]

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

[genericon icon=wordpress size=4x]

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

Referencias:

  1. BeginWP
  2. WP sites

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(3 votos, promedio: 4)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 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.

2 comentarios en “Cómo añadir y usar «Genericons» en WordPress”

  1. los4fantasticos

    Ayudaran a hacer mas vistosos nuestros post en wordpress, y creo que la mejor opción es la instalación sin plugins sin duda, menos plugins menos recursos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido