Um de nossos leitores perguntou se era possível destacar o papel do usuário ao lado de cada comentário do WordPress? A exibição do rótulo de função do usuário dá peso aos comentários feitos por usuários registrados em seu site da Web, especialmente autores, editores e administradores. Neste tutorial, mostraremos como adicionar facilmente um rótulo com função de usuário ao lado de comentários no WordPress.

adicione um rótulo sobre o papel de user.png

Por que exibir o rótulo da função do usuário ao lado de um comentário no WordPress?

Se você permitir o registro de usuário em seu site da Web ou se você executar um site da Web WordPress de vários autores, os rótulos de usuário podem apresentar os usuários uns aos outros com base em suas funções de usuário.

Por exemplo, os usuários com a função de usuário “Editor” terão um emblema próximo ao seu nome nos comentários, o que permitirá que outros usuários saibam que esse comentário foi feito por um editor.

Ele constrói a confiança do usuário e aumenta o envolvimento do usuário em comentários em seu site.

muitos Temas do WordPress apenas destaque comentários feitos pelo autor da postagem. Eles não mostram rótulos para outras funções de usuário, mesmo que outros comentários sejam feitos por usuários registrados ou administradores do site.

Dito isso, vamos dar uma olhada em como adicionar facilmente a tag de função do usuário ao lado dos comentários no WordPress.

Adicionar um rótulo de função do usuário ao lado de um comentário

Este tutorial requer que você adicione código aos seus arquivos. tema WordPress. Se você ainda não fez isso, veja como personalizar seu tema WordPress .

A primeira coisa a fazer é adicionar o seguinte código ao arquivo functions.php do seu tema ou a um plugin ativo no site.

if (! class_exists ('BPC_Comment_Author_Role_Label')): class BPC_Comment_Author_Role_Label {public function __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')); } // Obter função de função de autor de comentário bpc_get_comment_author_role ($ author, $ comment_id, $ comment) {$ authoremail = get_comment_author_email ($ comment); // Se o usuário está registrado if (email_exists ($ authoremail)) {$ commet_user_role = get_user_by ('email', $ authoremail); $ comment_user_role = $ commet_user_role-> funções [3]; // Conteúdo a ser adicionado ao lado do nome $ this-> comment_user_role = ' '. ucfirst ($ comment_user_role). ' '; } else {$ this-> comment_user_role = ''; } return $ author; } // Mostra o autor da função de comentário bpc_comment_author_role ($ author) {return $ author. = $ This-> comment_user_role; }} novo BPC_Comment_Author_Role_Label; fim se;

Este código curto acima se conecta aos filtros do WordPress usados ​​para exibir o nome do autor do comentário para incluir o rótulo da função do usuário.

Agora você pode visitar qualquer postagem com comentários para vê-la em ação. Comentários feitos por usuários registrados exibirão sua função de usuário ao lado do nome do autor do comentário. Quaisquer comentários feitos por usuários não registrados exibirão apenas o nome do autor do comentário.

exemplo de comentário com o usuário role.png

Agora que adicionamos a função de usuário, é hora de estilizá-la e torná-la limpa.

Em nosso código, adicionamos uma classe CSS para cada função de usuário, para que possamos usar essas classes CSS para personalizar cada crachá de usuário de maneira diferente (ou seja, usar cores diferentes, etc.)

Você pode usar o seguinte exemplo de CSS como ponto de partida:

.comment-author-label {padding: 5px; tamanho da fonte: 14px; raio de borda: 3px; } .com-author-label-editor {background-color: #efefef; } .com-author-label-author {background-color: #faeeee; } .com-author-label-contribuidor {background-color: #f0faee; } .comment-author-label-subscriber {background-color: #eef5fa; } .com-author-label-administrator {background-color: #fde9ff; }

Sinta-se à vontade para ajustar o CSS ao seu gosto. Aqui está a aparência de nosso site de demonstração:

site de demonstração de resultados css.png

Isso é tudo para este tutorial, espero que permita que você adicione um crachá ao lado dos textos dos membros de sua equipe.