Cómo agregar una etiqueta de rol de usuario junto a los comentarios en WordPress

Uno de nuestros lectores preguntó recientemente si es posible resaltar los roles de usuario junto a cada comentario en WordPress. Esta es una pregunta común y tiene sentido, ya que los comentarios pueden volverse difíciles de seguir rápidamente, especialmente en blogs o sitios comunitarios muy activos.

Mostrar una etiqueta de rol de usuario junto a cada comentario ayuda a sus visitantes a ver instantáneamente qué comentarios provienen de usuarios de confianza, como autores, editores o administradores. Agrega contexto, genera credibilidad e incluso puede fomentar interacciones más significativas en su comunidad.

Hemos ayudado a muchos propietarios de sitios a agregar esta función, y es una forma sencilla de hacer que su sección de comentarios sea más organizada y profesional.

En este artículo, le mostraremos cómo agregar fácilmente una etiqueta de rol de usuario junto a los comentarios en WordPress, para que sus lectores puedan reconocer rápidamente quién está contribuyendo.

¿Por qué mostrar la etiqueta del rol de usuario junto al nombre del autor del comentario en WordPress?

Si permite el registro de usuarios en su sitio web o administra un sitio web de WordPress con varios autores, mostrar etiquetas de roles de usuario puede ayudar a los visitantes a comprender rápidamente quién está comentando y cuál es su rol de usuario.

Por ejemplo, un usuario con el rol de editor puede tener una insignia junto a su nombre en los comentarios, indicando a otros que el comentario proviene de un editor.

Esto no solo genera confianza con tu audiencia, sino que también fomenta interacciones y participación más significativas en tu sitio.

Muchos temas de WordPress solo resaltan los comentarios hechos por el autor de la publicación. No muestran etiquetas para ningún otro rol de usuario, incluso si otros comentarios son hechos por usuarios registrados, administradores o editores. Agregar estas etiquetas asegura que todos los contribuyentes clave en tu sitio sean fácilmente reconocidos.

Ahora que entiendes los beneficios, veamos cómo agregar fácilmente una etiqueta de rol de usuario junto a los comentarios en WordPress.

Agregar una etiqueta de rol de usuario junto al nombre del autor del comentario en WordPress

Este tutorial requiere que agregues código a los archivos de tu tema de WordPress. Si no has hecho esto antes, por favor, consulta nuestra guía sobre cómo copiar y pegar fragmentos de código en WordPress.

Lo primero que necesitas hacer es agregar el siguiente código al archivo functions.php de tu tema, en un plugin específico del sitio, o en un plugin de fragmentos de código.

if ( ! class_exists( 'WPB_Comment_Author_Role_Label' ) ) :
class WPB_Comment_Author_Role_Label {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'wpb_get_comment_author_role' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'wpb_comment_author_role' ) );
}
 
// Get comment author role 
function wpb_get_comment_author_role($author, $comment_id, $comment) { 
$authoremail = get_comment_author_email( $comment); 
// Check if user is registered
if (email_exists($authoremail)) {
$commet_user_role = get_user_by( 'email', $authoremail );
$comment_user_role = $commet_user_role->roles[0];
// HTML output to add next to comment author name
$this->comment_user_role = ' <span class="comment-author-label comment-author-label-'.$comment_user_role.'">' . ucfirst($comment_user_role) . '</span>';
} else { 
$this->comment_user_role = '';
} 
return $author;
} 
 
// Display comment author                   
function wpb_comment_author_role($author) { 
return $author .= $this->comment_user_role; 
} 
}
new WPB_Comment_Author_Role_Label;
endif;

Este código de función anterior se engancha a los filtros de WordPress utilizados para mostrar el nombre del autor del comentario e incluir la etiqueta del rol del usuario.

En WPBeginner, siempre recomendamos agregar este código usando WPCode, el mejor plugin de fragmentos de código para WordPress.

Usar WPCode es más seguro y fácil que editar directamente el archivo functions.php de tu tema. Previene errores que podrían dañar tu sitio, mantiene tus personalizaciones organizadas y asegura que tus cambios no se pierdan cuando actualices tu tema.

Para empezar, necesitas instalar y activar el plugin gratuito WPCode. Para obtener instrucciones detalladas, consulta este tutorial sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activado, navega a Fragmentos de código » + Agregar fragmento desde el panel de WordPress.

Desde allí, haz clic en el botón '+ Agregar fragmento personalizado' debajo de la opción 'Agrega tu código personalizado (Nuevo fragmento)'.

A continuación, debe seleccionar 'Fragmento PHP' como tipo de código de la lista de opciones que aparecen en la pantalla.

Esto te llevará a la página Crear fragmento personalizado.

Desde aquí, necesitas agregar un título para tu fragmento de código. Puede ser cualquier cosa que te ayude a recordar para qué es el código.

Luego, pegue el código de arriba en el cuadro 'Vista previa del código'.

Después de eso, simplemente mueve el interruptor de 'Inactivo' a 'Activo' en la parte superior de la página.

Finalmente, haz clic en el botón 'Guardar fragmento'.

Ahora puedes visitar cualquier publicación con comentarios para verlo en acción.

Los comentarios realizados por usuarios registrados mostrarán su rol de usuario junto al nombre del autor del comentario. Cualquier comentario realizado por usuarios no registrados solo mostrará el nombre del autor del comentario.

Ahora que hemos agregado el rol de usuario, es hora de darle estilo y hacerlo lucir limpio.

En nuestro código, hemos agregado una clase CSS para cada rol de usuario, por lo que podemos usar estas clases CSS para personalizar cada insignia de usuario de manera diferente (es decir, usar diferentes colores, etc.).

Puedes usar el siguiente CSS de ejemplo como punto de partida:

.comment-author-label {
    padding: 5px;
    font-size: 14px;
    border-radius: 3px;
}
 
.comment-author-label-editor {  
background-color:#efefef;
}
.comment-author-label-author {
background-color:#faeeee;
}
 
.comment-author-label-contributor {
background-color:#f0faee;   
}
.comment-author-label-subscriber {
background-color:#eef5fa;   
}
 
.comment-author-label-administrator { 
background-color:#fde9ff;
}

Siéntete libre de ajustar el CSS a tu gusto. Así es como se veía en nuestro sitio web de demostración:

Para más detalles, consulta nuestra guía sobre cómo agregar fácilmente CSS personalizado a tu sitio de WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo agregar una etiqueta de rol de usuario junto a los comentarios en WordPress. También te puede interesar nuestra guía sobre cómo cargar perezosamente Gravatars en los comentarios de WordPress y nuestras selecciones expertas de los mejores plugins para mejorar los comentarios de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.