Cómo resaltar los comentarios del autor en WordPress

¿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.

¿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.

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.

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.

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.

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.

¿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.

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.

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”.

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.

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.

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.

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.

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.