Divi: Añade dashicons a los meta datos de los posts

En este artículo os mostraré cómo utilizar dashicons en Divi para que podáis modificar el diseño por defecto de Divi de los meta datos de los posts.

El diseño que trae por defecto Divi es algo solo, sin iconos, y con demasiado texto plano, haciendo que sea díficil distinguir cuándo terminan las categorías de las etiquetas, o cualquiera de otros campos. Aunque por defecto muestra una barra vertical separadora, el diseño es bastante simple. Por eso he decidido mejorar esta parte del diseño de una manera sencilla.

También te puede interesar:

→ ¿Qué es Divi?
→ Cómo configurar Yoast SEO en WordPress
→ Cómo eliminar un rol de WordPress
→ Qué plugins y themes usa una web echa con WordPress

¿Qué son los Dashicons?

En un post anterior os presenté el uso de los Daishicons en Divi: Cómo utilizar los Dashicons en módulos de texto de Divi

Os recomiendo leerlo para que veáis su utilidad y lo práctico que pueden ser. Son muy fáciles de utilizar y os ayudarán a darle un toque más profesional a vuestra web.

Diseño por defecto de los meta datos de los posts en Divi

Este es el diseño por defecto que trae Divi. Te muestra e autor, la fecha de publicación, las categorías y los comentarios. Todos ellos separados por una barra vertical | para poder distinguir cada uno de los campos de información. En su día yo le añadí que mostrara las etiquetas. Abajo tenéis el código por si lo queréis utilizar.

Pero lo que os quiero mostrar es cómo mejorar el diseño de esa parte de la plantilla Divi para que os quede como en la siguiente imagen.

Diseño renovado de los meta datos de los posts en Divi

Como podéis ver, el diseño ha mejorado bastante. Ahora en vez de mostrar la palabra "autor" muestra el icono correspondiente a un usuario. Junto a la fecha de publicación he decidido mostrar el icono de un calendario. Con las categorías he reemplazado la "Categorías" por un icono de una carpeta. En el caso de las etiquetas he hecho igual pero con el icono de tags. Y con los comentarios he incluido un icono de chat.

Todos esos iconos, y más, podéis elegirlos entre todos los que se muestran en la web de WordPress: Dashicons WordPress

De esta manera, los meta datos de los posts en Divi quedarán con un diseño renovado y diferente al por defecto que te hará marcar la diferencia frente a otras webs.

Cómo implementar el cambio de diseño

El cambio es muy sencillo. Solo tenemos que tocar dos ficheros de nuestro Divi Child Theme:

• functions.php
• style.css

Empezando por el fichero style.css:

Basta con añadir el siguiente código:

/* Metadatos de los POST con dashicons */
.dashicons {

vertical-align: middle;
margin: 5px;
}

Con este código lo que conseguimos es que el texto salga a la derecha del icono y con una separación de 5px.

Ahora tenemos que modificar el fichero functions.php. Yo por defecto tenía lo siguiente, para poder mostrar las etiquetas (que por defecto no las muestra):

if ( ! function_exists( 'et_divi_post_meta' ) ) :
function et_divi_post_meta() {
	$postinfo = is_single() ? et_get_option( 'divi_postinfo2' ) : et_get_option( 'divi_postinfo1' );

	if ( $postinfo ) :
		echo '';
		echo et_pb_postinfo_meta( $postinfo, et_get_option( 'divi_date_format', 'M j, Y' ), esc_html__( '0 comments', 'Divi' ), esc_html__( '1 comment', 'Divi' ), '% ' . esc_html__( 'comments', 'Divi' ) );
echo ''. the_tags( ' Etiquetas: ', ', ', '' );
		echo '';
	endif;
}
endif;

Pero con el siguiente cambio podremos obtener el resultado que os mostraba al principio:

/*
 * Sobreescritura de la funcion de Divi para mostrar los meta datos de los post
 * Autor: @blogjavierrguez
 */

if ( ! function_exists( 'et_pb_postinfo_meta' ) ) :
function et_pb_postinfo_meta( $postinfo, $date_format, $comment_zero, $comment_one, $comment_more ){
	$postinfo_meta = '';

	if ( in_array( 'author', $postinfo ) )
		$postinfo_meta .= ' ' . ' <span class="author vcard dashicons dashicons-admin-users"></span>' . et_pb_get_the_author_posts_link();

	if ( in_array( 'date', $postinfo ) ) {
		if ( in_array( 'author', $postinfo ) ) $postinfo_meta .= ' ';
		$postinfo_meta .= '<span class="published dashicons dashicons-calendar-alt"></span>' . esc_html( get_the_time( wp_unslash( $date_format ) ) );
	}

	if ( in_array( 'categories', $postinfo ) ) {
		$categories_list = get_the_category_list(', ');

		// do not output anything if no categories retrieved
		if ( '' !== $categories_list ) {
			if ( in_array( 'author', $postinfo ) || in_array( 'date', $postinfo ) )	$postinfo_meta .= ' ';

			$postinfo_meta .= '<span class="dashicons dashicons-category"></span>' .$categories_list;
		}
	}
	
	if(has_tag()) { // if tags
		$tags_list = get_the_tag_list('<span class="dashicons dashicons-tag"></span>',',','');
		
		// do not output anything if no tags retrieved
		if ( '' !== $tags_list ) {
			if ( in_array( 'author', $postinfo ) || in_array( 'date', $postinfo ) )	$postinfo_meta .= ' ';

			$postinfo_meta .= $tags_list;
		}
	} 
	
	if ( in_array( 'comments', $postinfo ) ){
		if ( in_array( 'author', $postinfo ) || in_array( 'date', $postinfo ) || in_array( 'categories', $postinfo ) ) $postinfo_meta .= ' ';
		$postinfo_meta .= et_pb_get_comments_popup_link( $comment_zero, $comment_one, $comment_more );
	}

	return $postinfo_meta;
}
endif;

/*
 * Sobreescritura de la funcion de Divi para mostrar los meta datos de los post
 * Autor: @blogjavierrguez
 */
if ( ! function_exists( 'et_pb_get_comments_popup_link' ) ) :
function et_pb_get_comments_popup_link( $zero = false, $one = false, $more = false ){
	$id = get_the_ID();
	$number = get_comments_number( $id );

	if ( 0 == $number && !comments_open() && !pings_open() ) return;

	if ( $number > 1 )
		$output = str_replace( '%', number_format_i18n( $number ), ( false === $more ) ? __( '% Comments', $themename ) : $more );
	elseif ( $number == 0 )
		$output = ( false === $zero ) ? __( 'No Comments', 'et_builder' ) : $zero;
	else // must be one
		$output = ( false === $one ) ? __( '1 Comment', 'et_builder' ) : $one;

	return '<span class="comments-number dashicons dashicons-format-chat"></span>' . '<a href="' . esc_url( get_permalink() . '#respond' ) . '">' . apply_filters( 'comments_number', esc_html( $output ), esc_html( $number ) ) . '</a>';
}
endif;

Después de modificar los dos ficheros, solo tenéis que refrescar el navegador. Pero si tenéis problemas de caché debéis leer el siguiente apartado.

Limpiar caché

Ahora sólo tendréis que limpiar la cache de vuestro WordPress para poder visualizar los cambios. Si utilizáis Cloudflare tendréis que purgar la caché desde el panel de Cloudflare o desde vuestro plugin de caché.