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

Uno de nuestros lectores preguntó si era posible resaltar el rol del usuario junto a cada comentario en WordPress. La visualización de la etiqueta de función 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 función de usuario junto a los comentarios en WordPress.

¿Por qué mostrar la etiqueta de función 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 de 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.

Genera confianza en los usuarios y aumenta su participación en los comentarios de su sitio web.

Muchos temas de WordPress solo resaltan los comentarios realizados 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 función de usuario junto a los comentarios en WordPress.

Agregar etiqueta de función de usuario junto al nombre del autor del comentario en WordPress

Este tutorial requiere que agregue código a sus archivos de tema de WordPress. Si no ha hecho esto 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 sitio específico plugin.




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 que se utilizan para mostrar el nombre del autor del comentario para incluir la etiqueta del rol 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.

Etiqueta de función de usuario que se muestra junto a su comentario

Ahora que hemos agregado el rol de usuario, es hora de darle estilo y hacer que se vea 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.)

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:

Insignias de roles de usuario mostradas con sus comentarios

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. Es posible que también desee ver nuestra guía sobre cómo cargar gravatars de forma diferida en los comentarios de WordPress.

Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.

Fuente: wpbeginner

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *