En este artículo mostraré cómo he mejorado el diseño de los meta datos de los posts utilizando dashicons. 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.

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

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

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

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

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 con Siteground tendréis que purgar la caché desde el cPanel de vuestra cuenta con Siteground.

Dime qué te ha parecido el artículo...

rating off Divi: Añade dashicons a los meta datos de los postsrating off Divi: Añade dashicons a los meta datos de los postsrating off Divi: Añade dashicons a los meta datos de los postsrating off Divi: Añade dashicons a los meta datos de los postsrating off Divi: Añade dashicons a los meta datos de los posts (Ninguna valoración todavía)
loading Divi: Añade dashicons a los meta datos de los postsCargando…
Advertisements

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Puedes suscribirte con total tranquilidad de que no recibirás spam. Lo odio igual que tu. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

¡Gracias por suscribirte!

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!