Uno de nuestros lectores preguntó si era posible resaltar el rol del usuario al lado de cada comentario de WordPress. Mostrar la etiqueta de función del usuario da peso a los comentarios realizados por usuarios registrados en su Sitio web, especialmente autores, editores y administradores. En este tutorial, le mostraremos cómo agregar fácilmente una etiqueta con el rol de usuario junto a los comentarios en WordPress.

agregue una etiqueta en el rol de user.png

¿Por qué mostrar la etiqueta de función de usuario junto a un comentario en WordPress?

Si permite el registro de usuario en su Sitio web o si ejecutas un Sitio web WordPress de múltiples autores, las etiquetas de usuario pueden presentar a los usuarios entre sí según sus roles de usuario.

Por ejemplo, los usuarios con la función de usuario "Editor" tendrán una insignia junto a su nombre en los comentarios, lo que permitirá a otros usuarios saber 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 resalta los comentarios hechos por el autor de la publicación. No muestran etiquetas para otras funciones 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 la etiqueta de función de usuario junto a los comentarios en WordPress.

Agregar una etiqueta de función de usuario junto a un comentario

Este tutorial requiere que agregue código a sus archivos. tema de WordPress. Si no lo ha hecho antes, eche un vistazo a cómo personalizar su tema de WordPress .

Lo primero que debe hacer es agregar el siguiente código al archivo functions.php de su tema oa un complemento activo en el sitio.

if (! class_exists ('BPC_Comment_Author_Role_Label')): class BPC_Comment_Author_Role_Label {función pública __construct () {add_filter ('get_comment_author', array ($ this, 'bpc_get_comment_author_role);), 10, add_filter ('get_comment_author_link', array ($ this, 'bpc_comment_author_role')); } // Obtener función de función de autor de comentario bpc_get_comment_author_role ($ autor, $ id_comentario, $ comentario) {$ authoremail = get_comment_author_email ($ comentario); // Si el usuario está registrado if (email_exists ($ authoremail)) {$ commet_user_role = get_user_by ('email', $ authoremail); $ comment_user_role = $ commet_user_role-> roles [3]; // Contenido para agregar junto al nombre $ this-> comment_user_role = ' '. ucfirst ($ comment_user_role). ' '; } else {$ this-> comment_user_role = ''; } return $ autor; } // Muestra el autor de la función de comentario bpc_comment_author_role ($ author) {return $ author. = $ This-> comment_user_role; }} nuevo BPC_Comment_Author_Role_Label; terminara si;

Este código corto 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 puedes visitar cualquier publicación con comentarios para verla en acción. Los comentarios hechos 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.

comentario de ejemplo con usuario role.png

Ahora que hemos agregado el rol de usuario, es hora de darle estilo y limpiarlo.

En nuestro código, agregamos 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; tamaño de letra: 14px; border-radius: 3px; } .com-author-label-editor {background-color: #efefef; } .com-author-label-author {background-color: #faeeee; } .com-author-label-contributor {background-color: #f0faee; } .comment-author-label-subscriber {background-color: #eef5fa; } .com-author-label-administrator {background-color: #fde9ff; }

Siéntase libre de ajustar el CSS a su gusto. Así es como se veía nuestro sitio de demostración:

sitio de demostración de resultados css.png

Eso es todo por este tutorial, espero que le permita agregar una insignia junto a los textos de los miembros de su personal.