Uno de nuestros lectores preguntó si era posible resaltar el rol del usuario junto a cada comentario en WordPress. Mostrar la etiqueta de rol de usuario da peso a los comentarios realizados por usuarios registrados en su sitio web, específicamente autores, editores y administradores. En este artículo, le mostraremos cómo agregar fácilmente una etiqueta de rol de usuario junto a los comentarios en WordPress.
¿Por qué mostrar la etiqueta de rol de usuario junto al nombre del autor del comentario en WordPress?
Si permite el registro de usuarios en su sitio web o ejecuta un sitio web de WordPress de varios autores, las etiquetas de usuario pueden presentar a los usuarios entre sí en función de sus roles de usuario.
Por ejemplo, los usuarios con la función de usuario editor mostrarán una insignia junto a su nombre en los comentarios para que otros usuarios sepan que este comentario fue realizado por un editor.
Aumenta la confianza del usuario y aumenta la participación del usuario en los comentarios de su sitio web.
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 los usuarios registrados o los administradores del sitio realizan otros comentarios.
Dicho esto, echemos un vistazo a cómo agregar fácilmente una etiqueta de rol de usuario junto a los comentarios en WordPress.
Agregar etiqueta de rol de usuario junto al nombre del autor del comentario en WordPress
Este tutorial requiere que agregue código a sus archivos de temas de WordPress. Si no lo ha hecho antes, consulte nuestra guía sobre cómo copiar y pegar código fácilmente en WordPress.
Lo primero que debe hacer es agregar el siguiente código al archivo functions.php de su tema o un complemento específico del sitio.
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 conecta a los filtros de WordPress utilizados para mostrar el nombre del autor del comentario para incluir la etiqueta de función del usuario.
Ahora puede visitar cualquier publicación con comentarios para verla en acción. Los comentarios realizados por usuarios registrados mostrarán su función 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 diseñarlo y hacer que se vea limpio.
En nuestro código, hemos agregado una clase de CSS para cada rol de usuario, por lo que podemos usar estas clases de CSS para personalizar cada insignia de usuario de manera diferente (es decir, usar 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;
}
Siéntase libre de ajustar el CSS a su gusto. Así es como se veía en nuestro sitio web de demostración:
Esperamos que este artículo le haya ayudado a aprender cómo agregar una etiqueta de función de usuario junto a los comentarios en WordPress. También es posible que desee ver nuestra guía sobre cómo cargar gravatars de forma diferida en los comentarios de WordPress.
.