Mostrar iconos junto a la información de los artículos en Genesis Sample

Algo que me gusta personalizar es la información de los artículos. Vamos a ver como mostrar iconos junto a la información de los artículos en Genesis Sample.

Un ejemplo real

La información del artículo es una de las cosas que si las añadimos dan mucha personalidad a un diseño. En un desarrollo que he llevado a cabo hace poco, el cliente quedó muy contento con este detalle. Basado en Genesis Sample, aunque difiere un poco del diseño original, os dejo captura.

Mostrar iconos en la información del artículo
Mostrar iconos en la información del artículo

Por supuesto, es un nombre de usuario ficticio :).

Bien maquetado, respetando los espacios y con una iconografía clara, queda un diseño muy limpio.

En la captura lo hice con Line Awesome. En el caso del tutorial, lo haremos con Dashicons, la tipografía de iconos que viene con Genesis Sample por defecto.

Pasaremos de esto:

Información del artículo sin iconos
Información del artículo sin iconos

A esto otro:

Información del artículo con iconos en Genesis Sample
Información del artículo con iconos en Genesis Sample

Y por supuesto, las categorías y las etiquetas al pie de los artículos.

Información meta del artículo con iconos en Genesis Sample
Información meta del artículo con iconos en Genesis Sample

Veamos los pasos.

Editamos el functions.php

Dado que Genesis Sample viene configurado para usar Dashicons no necesitaremos incluir el código para usarlos como ya conté en el artículo que explicaba como usar los Dashicons en Genesis.

Lo siguiente será editar la información del artículo para eliminar lo que no necesitemos. Introduce el siguiente código en el archivo functions.php de Genesis Sample.

Este contenido está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

Por supuesto, puedes poner en el orden que quieras los shortcodes para mostrar la información que creas más importante primero.

Sin CSS no hay iconos

El resto es CSS. Aplicar estilos para situar cada icono donde corresponde. Coloca este código CSS al final del archivo style.css de tu Genesis Sample.

Este contenido está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

Conclusión

Teniendo en cuenta que podemos variar el orden de la información, colores de los iconos e incluso los propios iconos, tenemos muchísimas posibilidades para adaptar esto casi a cualquier diseño.

Cualquier duda que tengas, déjala en los comentarios. Estaré encantado de responderla. Feliz Día! 🙂

El soporte en comentarios está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

¿Olvidaste tu contraseña?