¿Quieres resaltar los comentarios del autor en las publicaciones de WordPress en tu sitio web?
Destacar los comentarios del autor en su blog de WordPress puede ayudarlo a generar compromiso. Es más probable que los usuarios dejen un comentario cuando ven que el autor participa 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 del autor en WordPress?
Los comentarios son una excelente manera de generar participación de los usuarios en su sitio web. Si desea obtener más comentarios sobre sus artículos, puede alentarlos participando activamente en las discusiones.
Para un nuevo blog de WordPress, puede responder fácilmente a los comentarios durante la moderación de comentarios. Si ejecuta un blog de varios autores, puede alentar a los autores a participar en la discusión también.
Sin embargo, la mayoría de los temas de WordPress no distinguen entre comentarios y los enumeran con el mismo estilo.
Un lector casual puede desplazarse por los comentarios, sin darse cuenta del contenido adicional aportado por el autor en la discusión.
Resaltar los comentarios del autor lo ayuda a remediar eso y hace que los comentarios del autor se destaquen y se noten más.
El objetivo final aquí es alentar a los nuevos usuarios a unirse a los comentarios y, en última instancia, suscribirse a su boletín informativo o convertirse en cliente.
Dicho esto, echemos un vistazo a cómo resaltar fácilmente los comentarios del autor en WordPress.
Resaltar el autor del comentario en WordPress
La forma más fácil de resaltar los comentarios del autor de la publicación es agregar CSS personalizado a su tema de WordPress. Esto le permite agregar 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.
Primero, debes visitar Apariencia » Personalizar en el área de administración de WordPress. Esto iniciará la interfaz del personalizador de temas de WordPress. Notará un montón de opciones en una columna a su izquierda y una vista previa en vivo de su sitio web.
Desde aquí, debe hacer clic en la pestaña CSS adicional. Esto abrirá un área de texto donde agregará el CSS personalizado.
Sin embargo, le gustaría ver cómo se verá el CSS personalizado cuando se aplique. Para hacer eso, debe navegar a una publicación de blog que contenga comentarios del autor de una publicación.
Desplácese hacia abajo hasta la sección de comentarios y luego agregue el siguiente CSS personalizado en el cuadro CSS personalizado a la izquierda.
.bypostauthor {
background-color: #e7f8fb;
}
Inmediatamente notará que el comentario del autor cambia y coincide con el CSS personalizado que ingresó.
¿Entonces, cómo funciona todo esto?
Verá que WordPress agrega algunas clases de CSS predeterminadas a diferentes áreas de su sitio web. Estas clases de CSS están ahí independientemente del tema de WordPress que esté utilizando.
En este código de ejemplo, hemos utilizado el .bypostauthor Clase CSS que se agrega a todos los comentarios agregados por el autor de una publicación.
Agreguemos algunos estilos CSS más para hacerlo aún más prominente. Aquí hay un código de muestra que agrega una pequeña etiqueta de ‘Autor’ a los comentarios del autor de la publicación 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í es como se veía en nuestro sitio web de prueba.
Resaltar comentarios por rol de usuario en WordPress
Ahora, muchos blogs de WordPress tienen miembros del equipo responsables de responder a los comentarios. Los sitios web populares pueden tener autores, administradores y moderadores de publicaciones que respondan a los comentarios para aumentar la participación de los usuarios.
¿Cómo resalta un comentario agregado por un miembro del personal que no es el autor real de la publicación?
Hay un truco fácil para lograrlo. Sin embargo, requiere que agregue un código personalizado a su sitio web de WordPress. Si no lo ha hecho antes, consulte nuestro artículo sobre cómo agregar fácilmente código personalizado en WordPress.
Primero, debe agregar el siguiente código al complemento de fragmentos de código o al archivo functions.php de su tema.
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 simplemente agrega la etiqueta de rol de usuario junto al nombre del autor del comentario. Así es como se vería sin ningún estilo personalizado.
Hagámoslo un poco más bonito agregando un poco de CSS personalizado. Ir a Apariencia » Personalizar y cambie a la pestaña CSS adicional.
Después de eso, puede usar el siguiente CSS para diseñar la etiqueta de función 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ía en nuestro sitio de prueba. No dude en modificar el código para que coincida con los colores y el estilo de su tema.
Para obtener más detalles, puede leer nuestro artículo sobre cómo agregar etiquetas de roles de usuario a los comentarios de WordPress.
Esperamos que este artículo te haya ayudado a aprender a resaltar los comentarios de los autores en WordPress. ¿Quiere ver cómo los usuarios interactúan con su sitio web? Vea nuestro tutorial sobre cómo realizar un seguimiento de la participación de los usuarios en WordPress y cómo agregar notificaciones push web en su sitio de WordPress para aumentar su tráfico.
.