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 resaltar los comentarios del autor en WordPress

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Quieres destacar los comentarios del autor en las entradas de WordPress de tu sitio web?

Destacar los comentarios del autor en su blog de WordPress puede ayudarle a fomentar la participación. Los usuarios son más propensos a dejar un comentario cuando ven que el autor está participando activamente en la discusión.

En este artículo, le mostraremos cómo resaltar fácilmente los comentarios del autor en WordPress para aumentar la participación.

Highting comments by an author in WordPress blog posts

¿Por qué resaltar los comentarios de los autores en WordPress?

Los comentarios son una excelente forma de fomentar la participación de los usuarios en su sitio web. Si quieres conseguir más comentarios en tus artículos, puedes fomentarlo participando activamente en los debates.

En un blog nuevo de WordPress, puedes responder fácilmente a los comentarios y participar en los debates con tus lectores. Si tienes un blog con varios autores, también puedes animar a los autores a colaborar en la moderación de los comentarios.

Sin embargo, la mayoría de los temas de WordPress no distinguen entre comentarios y se listan utilizando el mismo estilo.

Regular comments layout with no author highlighting

Un lector ocasional puede desplazarse por los comentarios sin darse cuenta del contenido adicional aportado por el autor en el debate.

Resaltar los comentarios del autor ayuda a remediarlo y hace que los comentarios del autor destaquen y sean más notorios.

El objetivo final es animar a los nuevos usuarios a participar en los comentarios y, en última instancia, suscribirse a su boletín de noticias o convertirse en clientes.

Dicho esto, veamos cómo resaltar fácilmente los comentarios de los autores en WordPress.

Resaltar el autor del comentario en WordPress

La forma más fácil de resaltar los comentarios por autor de la entrada es añadiendo CSS personalizado a tu tema de WordPress. Esto le permite añadir fácilmente el código necesario y ver una vista previa en vivo de cómo se vería en su sitio web sin guardarlo.

En primer lugar, debe visitar Apariencia ” Personalizar en el área de administrador de WordPress. Esto iniciará la interfaz del Personalizador de temas de WordPress. Verás un montón de opciones en una columna a la izquierda y una vista previa de tu sitio web.

Theme customizer in WordPress

Desde aquí, tienes que hacer clic en la pestaña “CSS adicional”. Esto abrirá un área de texto donde añadirás el CSS personalizado.

Additional CSS tab

Sin embargo, le gustaría ver cómo se verá el CSS personalizado cuando se aplique. Para ello, debe navegar a una entrada del blog que contenga comentarios de un autor de la entrada.

Viewing comments in Theme Customizer

Desplácese hasta la sección de comentarios y añada el siguiente CSS personalizado en el cuadro CSS personalizado de la izquierda.

.bypostauthor { 
background-color: #e7f8fb;
}

Inmediatamente notará que el comentario del autor cambia para coincidir con el CSS personalizado que introdujo.

Author's comment highlighted with a different background color

¿Cómo funciona todo esto?

Como ves WordPress añade algunas clases CSS por defecto a diferentes áreas de tu sitio web. Estas clases CSS están ahí independientemente del tema de WordPress que esté utilizando.

En este código de ejemplo, hemos utilizado la clase CSS .bypostauthor que se añade a todos los comentarios añadidos por el autor de una entrada.

Vamos a añadir algunos estilos CSS más para que destaque aún más. He aquí un ejemplo de código que añade una pequeña etiqueta “Autor” a los comentarios del autor de la entrada y un borde alrededor de la imagen del avatar del autor.

.bypostauthor:before { 
content:"Author";
float:right;
background-color:#FF1100;
padding:5px;
font-size:small;
font-weight:bold;
color:#FFFFFF;
}
.bypostauthor .avatar {
border:1px dotted #FF1100;
}

Así se veía en nuestro sitio web de prueba.

Comment author highlighted with the Author label

Resaltar comentarios por perfil de usuario en WordPress

En la actualidad, muchos blogs de WordPress cuentan con miembros del equipo encargados de responder a los comentarios. En los sitios web más populares, el autor de la entrada, el administrador y los moderadores responden a los comentarios para fomentar la participación de los usuarios.

¿Cómo destacar un comentario añadido por un miembro del personal que no es el autor real de la entrada?

Existe un sencillo truco para conseguirlo. Sin embargo, requiere que añadas código personalizado a tu sitio web WordPress. Si no lo has hecho antes, consulta nuestro artículo sobre cómo pegar fragmentos de código de la web en WordPress.

En primer lugar, debe añadir el siguiente código al archivo functions. php de su tema 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;

En lugar de editar el archivo functions.php de tu tema, te recomendamos añadir este código con WPCode. Este plugin de fragmentos de código hace que sea seguro y fácil añadir código personalizado en WordPress.

WPCode

Para empezar, necesitas instalar y activar el plugin gratuito WPCode. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, diríjase a Fragmentos de código ” Añadir fragmento desde su escritorio de WordPress.

A continuación, pase el ratón por encima de la opción “Añadir su código personalizado (nuevo fragmento)” y haga clic en el botón “Usar fragmento”.

Add a new custom code snippet in WPCode

A continuación, añada un título a su fragmento de código, pegue el código anterior en el cuadro “Vista previa del código” y seleccione “Fragmento PHP” como tipo de código en el menú desplegable.

Paste snippet into the WPCode plugin

Después, sólo tiene que cambiar el conmutador de “Inactivo” a “Activo” y hacer clic en el botón “Guardar fragmento de código” situado en la parte superior de la página.

Activate and save your custom code snippet

Este código simplemente añade la etiqueta del perfil del usuario al lado del nombre del autor del comentario. Así es como se vería sin ningún estilo personalizado.

User role labels added to comments

Hagámoslo un poco más bonito añadiendo algo de CSS personalizado. Ve a la página Apariencia ” Personalizador y cambia a la pestaña CSS adicional.

Después de eso, puedes usar el siguiente CSS para dar estilo a la etiqueta del perfil de usuario en los comentarios.

.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;
}

Así es como se ve en nuestro sitio de prueba. No dudes en modificar el código para adaptarlo a los colores y el estilo de tu tema.

User role highlighted

Para más detalles, puede leer nuestro artículo sobre cómo añadir etiquetas de perfiles de usuario a los comentarios de WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo resaltar los comentarios de los autores en WordPress. Puede que también quieras ver nuestro tutorial sobre cómo resaltar nuevas entradas para visitantes recurrentes en WordPress y nuestra selección de los mejores plugins para 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

21 comentariosDeja una respuesta

  1. Syed Balkhi says

    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. Rafael says

    Not work for me :(

    I use custom theme with comments.php from twenty Twenty Thirteen.

    Where can I add more CSS classes ?

  3. Haina says

    Hi! Whenever somenone leaves a comment on my website, the author name appears in gray. How can I change that do black? Also, a “permalink” word is always bellow the date and time of the comment . How can I get rid of that? Any help will be much appreciated. Thanks.

  4. Peter Huan says

    I tried to it but i could not. I was added to my theme opition by myself.
    May be i was changed “div”…
    Thank you for topic.

  5. Fahad says

    There is a problem with changing the background if the auther is the creator of the comment and someone else replied, since the nested reply will also have the same highlighted background!

  6. deven says

    Nice post … but is there any plugin for doing the same ( there are some but 2-3 yers old ) looking for a new one with more customize options.

    • Editorial Staff says

      Yes, it is possible to assign different color comments for registered users. The class would look like .comment-author-username. Replace username with the author’s username.

      Administrador

  7. Ahmad Raza says

    I followed the way you described but i have not found <li id=”comment-“> template in my comments.php
    Any solution?

  8. Keith Davis says

    Useful tip.
    When I read post comments, I tend to read the author’s comments on the assumption that what he says carries more authority.
    I’m OK with the CSS but never sure about the php.
    You may have enticed me to start messing with the php!

  9. janghuan says

    In my wordpress version,I just need to add a exist class that the wordpress generates.It’s “comment-author-admin”.Maybe the class “bypostauthor” that wordpress generates also does work.

    • Editorial Staff says

      You can probably add a comma and add more user IDs, but it will show all editor’s comment in highlighted version, so yes it will be a fail if you look at it that way.

      Administrador

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.