Cómo crear una sección de comentarios con estilo en WordPress

¿Quieres crear una elegante sección de comentarios para tu sitio web? La sección de comentarios es donde todos sus visitantes discutirán su contenido y dejarán comentarios. La sección de comentarios predeterminada es extremadamente simple y no tiene estilo. Por esta razón, es importante que los desarrolladores web se tomen el tiempo para personalizar completamente sus secciones de comentarios.

Al igual que con todas las formas de estilo en WordPress, este método girará en torno a CSS y HTML, pero no se preocupe, también es accesible para los principiantes. Si tiene su sección de comentarios deshabilitada , puede considerar habilitarla nuevamente. Hoy, demostraré cómo diseñar su sección de comentarios y diferentes diseños que puede usar en WordPress.

¿Por qué es importante diseñar mi sección de comentarios?

Usted puede ser un sitio web nuevo que solo ha tenido un puñado de comentarios y no ve el valor de la sección o simplemente no sabe cómo manejarlos . También puede ser uno de los muchos sitios web que deshabilitan su sección de comentarios para evitar los comentarios negativos que son un problema para la mayoría de las secciones de comentarios. Independientemente, las secciones de comentarios son una parte importante de cualquier sitio web y ayudan a construir un entorno comunitario.

Si no recibe muchos comentarios, puede deberse a que su sección de comentarios no se ve bien. Sí, a la gente realmente le importa cómo se ve el área. Crear un diseño que coincida con el resto del sitio web y ayude a que todos los comentarios se destaquen es extremadamente importante. El estilo no solo es importante, sino que permitir más avatares es otra forma de mejorar la sección de comentarios.

Cómo crear una sección de comentarios con estilo en WordPress

Hoy, demostraré cómo diseñar su sección de comentarios y diferentes diseños que puede usar en WordPress. Los diseños que elija deben combinarse con su tema actual y puede personalizar completamente las opciones de color. Tenga en cuenta que hay cientos para elegir y solo compartiré algunos populares de toda la web.

Si no tienes experiencia en codificación, no te preocupes. Hay dos cosas a tener en cuenta. La primera es que copiar y pegar código que no está escrito para su tema probablemente no funcionará. Por ejemplo, tomar estilos de comentarios para el tema Twenty Twelve y usarlos en un sitio web que tiene Poseidón no tendrá ningún resultado. Esto se debe a que cada tema tiene diferentes convenciones de nomenclatura. Debe conocer cuál es la convención de nomenclatura de su tema. La segunda es que solo necesitará editar las opciones de color y las opciones de fuente una vez que lo haga funcionar.

Como referencia, todos los ejemplos se escribirán para el tema Twenty Twelve.

Colores de fondo de comentario alternativos

Una de las opciones de diseño de comentarios más populares es tener colores alternos en el fondo. Esto ayuda a los visitantes a distinguir los comentarios entre sí. Es una buena regla general elegir los colores que están presentes en su tema.

En el panel de administración de la izquierda, haga clic en Apariencia y seleccione la opción Editar CSS.

Haga clic en la opción CSS adicional.

Copie y pegue el siguiente código en el cuadro de texto correspondiente:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ].commentlist .even .comment {

background-color :#c0c0c0;

}

.lista de comentarios .impar .comentario {

color de fondo:#ffd700;

}[/ht_mensaje]

Tenga en cuenta que si no está utilizando el mismo tema, no funcionará. Si necesita soporte adicional, consulte la página de soporte de su tema. Debería poder ver los cambios a medida que agrega el código.

Puedes cambiar los colores a lo que quieras. Aquí hay una lista de los códigos de color CSS . Asegúrese de que todavía puede leer el comentario después de aplicar el color. Haga clic en el botón "Publicar" para guardar los cambios.

Dar estilo al campo del nombre del autor

Otra mejora para la sección de comentarios es que sea más fácil saber quién escribió el comentario. Agregar un fondo de color diferente para la información del autor del comentario puede hacerlo.

Copie y pegue el siguiente código en el cuadro de texto correspondiente:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ].comments-area article header {

margin: 0 0 48 píxeles;

desbordamiento: oculto;

posición: relativa;

color de fondo:#006400;

color:#FFFFFF;

relleno: 10px;

}[/ht_mensaje]

Una vez más, asegúrese de que el nombre del autor y la información estén visibles. Haga clic en el botón Publicar para guardar su trabajo.

Botones de estilo en sus comentarios

La mayoría de las secciones de comentarios tienen varios botones. Por lo general, incluyen un botón Editar, Responder y Cancelar respuesta. El botón Cancelar respuesta solo estaría visible al dejar una respuesta.

Aquí está el código para el botón Responder:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ].reply {

float:right;

margen:0 10px 10px 0;

alineación de texto: centro;

color de fondo: #000000;

borde: 1px sólido #55737D;

borde-radio: 3px;

relleno: 3px;

ancho: 50px;

sombra de caja: 1px 1px 2px 2px #4f4f4f;

}

.comenta el artículo {

padding-bottom:2.79rem;

}

a.comentario-respuesta-enlace,

a.comentario-editar-enlace {

color: #FFFFFF;

tamaño de fuente: 13px;

tamaño de fuente: 0.928571429rem;

altura de línea: 1.846153846;

texto-decoración: ninguno;

}

a.comment-reply-link:hover,

a.comment-edit-link:hover {

color: #f6e7d7;

}[/ht_mensaje]

Aquí está el código para el botón Editar:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]

a.comment-edit-link {

float:left;

margen:0 0 10px 10px;

alineación de texto: centro;

color de fondo: #000000;

borde: 1px sólido #55737D;

borde-radio: 3px;

relleno: 3px;

ancho: 50px;

sombra de caja: 1px 1px 2px 2px #4f4f4f;

}[/ht_mensaje]

Aquí está el código para el botón Cancelar respuesta:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]#cancel-comment-reply-link {

text-align :centro;

color de fondo: #000000;

borde: 1px sólido #55737D;

borde-radio: 3px;

relleno: 3px;

ancho: 50px;

color:#FFFFFF;

sombra de caja: 1px 1px 2px 2px #4f4f4f;

texto-decoración: ninguno;

}[/ht_mensaje]

Haga clic en el botón Publicar para guardar su trabajo.

Asegúrate de que todo coincida

El objetivo de estilizar la sección de comentarios es hacer que se vea genial. El problema es cuando no coincide con el resto de su sitio web. Puede parecer fuera de lugar o tal vez el resto de su sitio web necesita un estilo. En cualquier caso, debe asegurarse de que todo coincida y que nada se destaque o se vea mal.

El factor más importante que puede conducir a esto es la elección del color. Recomiendo usar solo colores de su tema o similares. Tampoco se puede enfatizar lo suficiente, asegúrese de que todo el texto esté visible. Este es uno de los errores más comunes en los sitios web hoy en día y no debería ocurrir.

¿Qué diseños has usado? ¿Crees que tu sección de comentarios se ve mejor ahora?