dashicons-widgets

Personalizando widgets Wp con Dashicons

En un post anterior vimos cómo usar Dashicons para personalizar nuestro menú de WordPress.

En este post, a modo de continuación de aquel, vamos a ver cómo usar Dashicons de WordPress para personalizar los widgets de nuestro blog.


Personalizando widgets Wp con Dashicons

Cargando Dashicons

Vamos a hacer uso de la misma función que usamos en el post anterior. Edita el archivo functions.php de tu tema y añade el siguiente código.

add_action( 'wp_enqueue_scripts', 'estilos_iconos' );
 function estilos_iconos() {
wp_enqueue_style( 'dashicons' );
}

Usando Dashicons

Desde la página de Dashicons podrás escoger los que más te gusten. Para este ejemplo vamos a personalizar nuestros widgets de Entradas Recientes, Categorías y Archivos, de la barra lateral.

Como dirían Los Ramones, Hey Ho! Let’s Go.

Personalizando el widget “entradas recientes” con Dashicons

Aunque es bastante funcional, el widget que muestra los últimos post es bastante simple, mostrando, dependiendo de los ajustes, un listado con las entradas recientes.

Podemos darle un poco más de vidilla añadiendo, a la lista, un icono representativo.

A estas alturas podrás decir, pero, para eso puedo usar un plugin que me muestre las entradas más recientes con una imagen en miniatura destacada.

Por supuesto, estás en tu derecho de usar los plugins que creas “necesarios” para mantener tu blog. Simplemente, queremos que veas que puedes dar un aspecto diferente a tu blog si necesidad de tanto plugin.

Como iba diciendo, a los títulos, un icono que pueda identificar el widget.

Para este ejemplo usaremos un tema hijo del Twenty Fifteen. Además usamos el inspector de elementos de Google.

Vamos paso a paso

Una vez que tenemos el tema activado ponemos en el área de widgets de la barra lateral nuestros tres widgets.

Si actualizas la página verás cómo se muestran cada uno, según el orden que los hayas colocado.

dashicons-widgets-sin

Nos situamos sobre una de las entradas recientes y hacemos clic derecho y le damos a inspeccionar elemento (num 1 en la imagen).

Se nos divide la pantalla en dos partes, en la de abajo puedes ver el código fuente de tu página.

dashicons-inspector-google

En la parte inferior derecha es donde aparecen los estilos. Observa que al elemento de esa lista lo llaman .widget_recent_entries a (num 2 en la imagen).

Pues bien, sabiendo esto sólo tenemos que añadir los iconos. Desde la página de Dashicons hemos escogido los siguientes.

Para cada elemento de la lista

Para el título de Entradas Recientes

Para el título de Categorías

Para el título de Archivos

Añadimos estas reglas CSS a nuestro archivo style.css.

.widget_recent_entries a:before { 
 color: #FC5F05; 
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 font: normal 20px/1 'dashicons';
 vertical-align: top;
 margin-right: 5px;
 margin-right: 0.5rem;
 content: "\f109";
}

Y ya está, cada elemento de la lista con su icono. También serviría usar el id #recent-posts-2 como se indica en la imagen anterior con el número 3. Continuemos.

Ahora vamos a usar un icono para el título. No podemos usar la clase .widget-title porque eso haría que todos los títulos tuvieran el mismo icono. Añadimos las siguientes reglas CSS a nuestro archivo haciendo uso del id antes mencionado.

#recent-posts-2 h2:before {
 color: #FC5F05; 
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 font: normal 20px/1 'dashicons';
 vertical-align: top;
 margin-right: 5px;
 margin-right: 0.5rem;
 content: "\f123";
}

Ya está. Ahora tienes un icono para el título de Entradas recientes y otro para cada elemento de la lista.

Personalizando el widget Categorías

Vuelve a hacer lo mismo que para las entradas. En este caso usan el id #tag_cloud-3 así que añadiendo esto a nuestro archivo de estilos.

#tag_cloud-3 h2:before {
 color: #FC5F05; 
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 font: normal 20px/1 'dashicons';
 vertical-align: top;
 margin-right: 5px;
 margin-right: 0.5rem;
 content: "\f323";
}

Personalizando el widget Archivos

#archives-2 h2:before {
 color: #FC5F05; 
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 font: normal 20px/1 'dashicons';
 vertical-align: top;
 margin-right: 5px;
 margin-right: 0.5rem;
 content: "\f480";
}

Listo, como puedes ver en la imagen puedes mejorar bastante el aspecto de tu web usando la biblioteca de iconos que WordPress trae por defecto.

dashicons-widgets

Espero que este post te haya resultado útil.

Y Tú. ¿Usas Dashicons para tu blog?

Comenta, comparte, difunde. Gracias.

Carlos A para FreelanceEvolution®

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *