Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir la etiqueta de perfil de usuario a continuación de los comentarios en WordPress

Uno de nuestros lectores nos preguntó recientemente si es posible resaltar los perfiles de los usuarios a continuación de cada comentario en WordPress. Es una pregunta común, y hemos ayudado a muchos propietarios de sitios web a añadir esta característica para crear un sentido de comunidad más fuerte.

Al mostrar la etiqueta del perfil del usuario, puede señalar al instante qué comentarios proceden de usuarios de confianza de su sitio web, como autores, editores y administradores.

En este artículo, le mostraremos cómo añadir fácilmente la etiqueta de perfil de usuario junto a los comentarios en WordPress.

Add user role next to comments in WordPress

¿Por qué mostrar la etiqueta de perfil de usuario a continuación del nombre del autor del comentario en WordPress?

Si permite el registro de usuarios en su sitio web o gestiona un sitio web WordPress con varios autores, las etiquetas de usuario pueden presentar a los usuarios entre sí en función de sus perfiles de usuario.

Por ejemplo, los usuarios con el perfil de editor mostrarán una acreditación / insignia / distinción junto a su nombre en los comentarios para que los demás usuarios sepan que ese comentario ha sido realizado por un editor.

Genera confianza con su público y aumenta la participación de los usuarios en los comentarios de su sitio web.

Muchos temas de WordPress solo resaltan los comentarios hechos por el autor de la entrada. No muestran etiquetas para otros perfiles de usuario, incluso si otros comentarios son hechos por usuarios registrados o administradores del sitio.

Dicho esto, echemos un vistazo a cómo añadir fácilmente la etiqueta de rol de usuario junto a los comentarios en WordPress.

Añadir etiqueta de perfil de usuario siguiente al nombre del autor del comentario en WordPress

Este tutorial requiere que añadas código a los archivos de tu tema de WordPress. Si no lo has hecho antes, echa un vistazo a nuestra guía sobre cómo copiar y pegar fragmentos de código en WordPress.

Lo primero que debe hacer es añadir el siguiente código al archivo functions. php de su 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 de arriba se engancha en los filtros de WordPress utilizados para mostrar el nombre del autor del comentario para incluir la etiqueta de rol de usuario.

Recomendamos añadir este código usando WPCode, el mejor plugin de fragmentos de código para WordPress. Es la forma más segura y sencilla de añadir código sin editar el archivo functions.php de tu tema.

WPCode

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

Una vez activado el plugin, vaya a Fragmentos de código ” + Añadir fragmento desde el escritorio de WordPress. Desde allí, haga clic en el botón “Usar fragmento de código” debajo de la opción “Añadir su código personalizado (nuevo fragmento de código)”.

Add a new custom code snippet in WPCode

A continuación, añade un título para el fragmento de código en la parte superior de la página. Puede ser cualquier cosa que te ayude a recordar para qué sirve el código.

A continuación, pegue el código anterior en el cuadro “Vista previa del código” y seleccione “Fragmento de código PHP” como tipo de código en la lista desplegable de la derecha.

Paste code snippet into the Code Preview box and select PHP Snippet

Después, sólo tiene que mover el interruptor de “Inactivo” a “Activo” y hacer clic en el botón “Guardar fragmento de código”.

Activate and save your custom code snippet

Ahora puede visitar cualquier entrada con comentarios para verlo en acción.

Los comentarios realizados por usuarios registrados mostrarán su perfil de usuario a continuación del nombre del autor del comentario. Los comentarios realizados por usuarios no registrados solo mostrarán el nombre del autor del comentario.

User role label shown next to their comment

Ahora que hemos añadido el perfil de usuario, es el momento de darle estilo y hacer que se vea limpio.

En nuestro código, hemos añadido una clase CSS para cada perfil de usuario, por lo que podemos utilizar estas clases CSS para personalizar cada acreditación de usuario de forma diferente (es decir, utilizar diferentes colores, etc.).

Puede utilizar el siguiente ejemplo de CSS 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;
}

No dudes en ajustar el CSS a tu gusto. Así es como se ve en nuestro sitio web de demostración:

User role badges displayed with their comments

Para más detalles, consulte nuestra guía sobre cómo añadir fácilmente CSS personalizado a su sitio WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo añadir la etiqueta de perfil de usuario a continuación de los comentarios en WordPress. También puede marcar / comprobar nuestra guía sobre cómo diferida gravatars de carga en los comentarios de WordPress y nuestra selección de expertos de los mejores plugins para mejorar los comentarios de WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

11 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jack

    What if a user has multiple roles? Let say, I have a user with “verified” and “subscriber” roles. I need to put verified badge next to the comment author with “verified” role. How can I do this?

    • WPBeginner Support

      By default WordPress only allows a user to have 1 role at a time, if you’re using a plugin to allow for multiple roles then it would depend on the specific plugin that you are using :)

      Administrador

  3. John

    How to integrate it in Profile Page or lets say, i want to add a code in about Me widget.

  4. Matt

    Hey,

    Great tutorial.

    Is there anyway to customize the text within the badge?

    Instead of the user role, displaying something like “Post Author”? I feel like displaying ‘Administrator’ for some blogs is a bit of a buzz kill and too serious.

  5. Kelly

    Instead of saying “Administrator” or whatever their role beside their name, if I wanted to show an icon based on user role, how could I do that? I’ve tried playing with your code but cannot figure out how to display a different icon based on user role.

    • Eddie

      That would be great. I’m looking for this so I can show an icon only for contributors

  6. Mahmudul Hasan

    where put the css code..?

  7. javad

    Hi this code is wrong and when I put it on functions.php my website got 500 error!!!

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.