Cómo resaltar los comentarios de autores en WordPress

Igual has visto en algún blog que los comentarios del autor tienen un estilo diferente al de resto de comentarios.

El objeto de resaltar los comentarios del autor es para que se diferencie del resto, y los encuentren mas fácilmente. O simplemente porque te gusta ser el protagonista, y como es tu blog, pues lo haces y punto :).

Para cambiar el estilo de los comentarios del autor en WordPress, vamos a usar CSS.

No te preocupes, que te voy a dar varios ejemplos, para que solo tengas que copiar y pegar.

Normalmente, todos los themes o plantilas de WordPress, al menos los mas modernos, vienen con la opción de poder añadir código CSS adicional, desde el panel de personalización del propio Theme.

En la plantilla que yo uso GeneratePress, tienes la opción de añadir código CSS adicional desde dicho panel.

A continuación te dejo varios ejemplos, para que añadas el que mas te guste:

Cómo resaltar los comentarios de autores en WordPress
Cómo resaltar los comentarios de autores en WordPress

Fondo y borde

Cómo resaltar los comentarios de autor en WordPress

.comment .bypostauthor {
background-color: #f2f2f2;
border: 1px solid #FF8F4C;
}

Solo fondo

Cómo resaltar los comentarios de autor en WordPress

.bypostauthor {
background: #eee;
}

Fondo con bordes redondeados

Cómo resaltar los comentarios de autor en WordPress

.bypostauthor > article {
background: #e9e9e9;
padding: 1em;
border-radius: 10px;
color: #607D8B;
}

Fondo con borde izquierdo

Cómo resaltar los comentarios de autor en WordPress

.comment-list .comment.bypostauthor,
.comment-list .children .comment.bypostauthor {
background: #f0f7fd;
border: 1px solid #bce8f1;
border-left: 5px solid #428bca;
box-shadow: inset 0 0 0 1px #fff;
}

Varios Autores

Este es como el anterior, solo que sirve para cuando hay varios autores

.comment-list .comment.comment-author-sally,
.comment-list .comment.comment-author-michelle,
.comment-list .comment.comment-author-dave {
background: #f0f7fd;
border: 1px solid #bce8f1;
border-left: 5px solid #428bca;
box-shadow: inset 0 0 0 1px #fff;
}

Fondo con borde superior

Cómo resaltar los comentarios de autor en WordPress

.comment .bypostauthor {
background-color: #FFE6D7;
border-top: 7px solid #FF8F4C;
}

Con imagen de fondo

Y por último, te dejo el código CSS, por si quieres añadir una imagen de fondo
.comment .bypostauthor

{
background: url(‘URL de la imagen de fonde aquí’) no-repeat;
}

Espero que te sean útiles, y que te ayuden a la hora de personalizar tu web.

Yo me he decantado por añadir solo un borde a mis comentarios, pero como ves, con los ejemplos que te he dado, tienes muchas opciones, además de las combinaciones que a ti se te ocurran.

He de decirte que no he encontrado ningún plugin que hagas esto. Si conoces alguno, no dudes en contarlo, porque la verdad es que me ha extrañado.

Cómo resaltar los comentarios de autores en WordPress
5 (100%) 2 votes

8 comentarios en “Cómo resaltar los comentarios de autores en WordPress

  1. Julian me gusto muchos este post , la verdad ni me lo habia pensado, pero genial tendre en cuenta uno de estos codigos para mi web 🙂

    Me gusta el de borde superior, pero primero probare a ver cual le queda mejor y le dare uno que otro retoque al codigo css

    Muchas gracias

  2. Hola Julian ya que en este pos estas hablando de los comentarios, tengo una duda , en los comentario me sale en ingles Leave a Comment ¿como hago para colocarlo en español? , asi como lo tienes tu Deja un comentario

Deja un comentario