Cómo Estilizar su Diseño de Comentarios de WordPress

Recientemente le mostramos cómo estilizar el formulario de comentarios de WordPress, y pensamos que estaría incompleto si no escribíamos sobre cómo estilizar el diseño de los comentarios de WordPress. En el pasado, hemos discutido que hay clases e identificaciones CSS generadas por defecto por WordPress para ayudar a que sea más fácil para los diseñadores de temas diseñar sus plantillas. En este artículo, usaremos esas clases por defecto para mostrarte cómo estilizar tu diseño de comentarios de WordPress y algunas de las cosas geniales que puedes hacer con él.

Por el bien de este ejemplo, estaremos modificando el tema por defecto Veinte Doce WordPress en este artículo. Nota: Este artículo es para diseñadores de temas principiantes y usuarios de bricolaje que tengan un buen conocimiento de HTML y CSS.

Clases de comentarios predeterminados de WordPress

Por defecto WordPress genera estas clases para los elementos de la plantilla de comentarios:

123456789101112131414151617171819202122232425262728293031323334353637383940414243444546474849/*Salida de comentarios*/.commentlist.reply {}.commentlist.answer a {} ....lista de inicio .alt {}.lista de inicio.odd {}.lista de inicio.even {}.lista de inicio.thread-alt {}.commentlist.thread-odd {}.commentlist.thread-even {}.commentlist li ul.niños .alt {}.commentlist li li ul.children.odd {}.commentlist li ul.children.even {}.commentlist .vcard {}.commentlist.vcard cite.fn {}.commentlist.vcard span.says {}.commentlist.img.photo {}.commentlist.vcard img.avatar {}.commentlist .vcard img.avatar {}.commentlist.vcard cite.fn a.url{} .commentlist .commentlist .comment-meta {} {} .commentlistcomment-meta a {}.commentlist .commentmetadata {}.commentlist .commentmetadata a {} .commentlist .parent {}.commentlist.comment {}.commentlist.children {}.commentlist.commentlist.pingback {}.commentlist.bypostauthor {}.commentlist.comment-author {}.commentlist.comment-author.comment-author.commentlist.comment-author-admin {}.commentlist li {}.commentlist li {}.commentlist li {}.commentlist li ul ul ul ul ul ul ul ul ul.children li.alt {}.commentlist li ul ul ul ul.children li.children li.byuser {}.commentlist li ul ul ul.children li.depth-{id} {}.commentlist li ul ul.children li.bypostauthor {}.commentlist li.ul.children li.author-admin {}. #cancelación-comunicación-respuesta {}#cancelación-comunicación-respuesta a {}

Cómo encontrar las clases de CSS que necesita editar

Antes de pasar al diseño de los comentarios de WordPress, un pequeño consejo para nuestros nuevos usuarios. Los navegadores web Google Chrome y Mozilla Firefox vienen con una herramienta práctica que puedes usar para mejorar tus habilidades de desarrollo de temas de WordPress. La herramienta se llama Inspeccionar elemento . Simplemente lleve el ratón a un elemento de una página web, haga clic con el botón derecho del ratón y elija inspeccionar el elemento. La ventana de su navegador se dividirá en dos filas y en la ventana inferior verá el código fuente de ese elemento. También en la ventana inferior, podrás ver los elementos CSS y cómo están estilizados. Incluso puede editar el CSS allí con fines de prueba. Es importante recordar que cualquier cosa que cambie utilizando el elemento de inspección sólo es visible para usted. En el momento en que actualice la página, esos cambios desaparecerán. Para que los cambios sean permanentes, debe utilizar el archivo style.css u otros archivos apropiados en sus temas.

Adición de colores de fondo impares y pares para comentarios

Tener un color de fondo diferente para los comentarios impares y parejos es una tendencia de diseño que ha existido desde hace algunos años. Ayuda a la legibilidad especialmente si tienes muchos comentarios. También se ve muy bien con ciertos colores de tema, por lo que muchos diseñadores quieren utilizar esta funcionalidad. Para ayudar a los diseñadores a lograr este objetivo, WordPress añade una clase impar y par a cada comentario respectivamente.

Puedes añadir fácilmente el estilo par/impar para los comentarios en style.css de tu tema pegando el siguiente código.

123456.commentlist .even .comment { background-color:#ccddf2; } .commentlist.odd.comment {background-color:#CCCCCC;}

El resultado sería algo así:

Autor de comentarios de estilo y metadatos

WordPress también agrega clases a los elementos mostrados en cada encabezado de comentario. Esto permite a los diseñadores de temas personalizar la visualización de la información del autor y otros metadatos de los comentarios, como la fecha y la hora de los comentarios. Aquí tienes un código de ejemplo para pegar en el archivo style.css de tu tema para darle un estilo diferente a estos elementos. En este ejemplo hemos añadido color de fondo para comentar el meta junto con algunos espacios.

12345678.comments-area article header { margin: 0048px; overflow: hidden; position: relative; background-color:#55737D; color:#FFFFFFFF; padding: 10px;}

Así es como debería ser:

Estilo Post Autor Comentarios Diferentes

A menudo se puede ver que los comentarios del autor de la entrada están resaltados con un color de fondo diferente o con alguna insignia adicional. WordPress agrega una clase por defecto bypostauthor a todos los comentarios hechos por el autor del mensaje. Los diseñadores de temas de WordPress pueden usar esta clase para cambiar el estilo de los comentarios de los autores.

Algunos temas, utilizan su propia función de devolución de llamada para mostrar comentarios. Usando la función de devolución de llamada, estos temas pueden añadir información adicional a un comentario del autor del mensaje. Por ejemplo, Twenty Twelve utiliza la siguiente línea en la función de devolución de llamada de comentarios twentytwelve_comment() (ubicada en el archivo functions.php del tema).

123// Si el autor de la entrada actual también es autor de comentarios, hágalo saber visualmente. ( $comment->user_id ==== $post->post_author ) ? ' '. ('Post author', 'twentytwelve') . '': '');

Este código añade Post Author a la meta información del comentario. Dependiendo de cómo tu tema de WordPress maneja los comentarios del autor del mensaje, puedes modificarlo a tu gusto.

Si está usando un tema diferente a Veintidós, entonces necesita averiguar cómo su tema maneja los comentarios. Simplemente abra el archivo comments.php de su tema. Si su tema está usando su propia función de devolución de llamada, entonces la verá dentro de la función wp_list_comments, así:

1 'twentytwelve_comment', 'style'=> 'ol') ); ?>

En el ejemplo anterior, se puede ver que el tema está utilizando veintidós_comentarios como función de devolución de llamada. Si se especifica una función de devolución de llamada, entonces la ubicación más probable para encontrar esta función está en el archivo functions.php de su tema.

En este ejemplo estamos cambiando esta función para que muestre Editor en lugar de Post Author. Para ello hemos modificado la función de llamada de retorno de comentarios de esta manera:

123// Si el autor de la entrada actual también es autor de comentarios, hágalo saber visualmente. ( $comment->user_id ==== $post->post_author ) ? ' '. ('Editor', 'twentytwelve') . '': '');

También vamos a modificar su aspecto añadiendo lo siguiente en el archivo style.css de nuestro tema:

123456789910li.bypostauthor citar span { color: #21759b; color de fondo: #f8f0cb; imagen de fondo: ninguna; borde: 1pxsólido#f8f0cb; radio del borde: 3px; sombra de caja: ninguna; acolchado: 3px; font-weight:negrita;}

Así es como se vería:

Estilo Comentario Responder Enlace en WordPress Comentarios

La mayoría de los temas de WordPress tienen un enlace de respuesta debajo de cada comentario. Esta funcionalidad sólo se muestra si tiene habilitados los comentarios en los hilos. Para habilitar los comentarios en hilo, vaya a su administrador de WordPress ( Configuración " Discusión ). Mira la sección donde dice otras configuraciones de comentarios, y marca la casilla para habilitar comentarios en hilo (anidados).

Las clases CSS por defecto generadas por WordPress para el enlace de respuesta son reply y comment-reply-link. Usaremos esas clases para modificar el enlace de respuesta y convertirlo en un botón CSS.

12345678910111213141415161717181920212223242526272829.reply { float:right; margin:010px10px0; text-align:center; color de fondo: #55737D; border:1pxsolid#55737D; border-radius:3px; padding:3px; width:50px; box-shadow: 1px1px2px2px2px#4f4f4f4f;}.comment article { padding-bottom:2.79rem;} a.comment-reply-link,a.comment-edit-link { color: #FFFFFFFF; tamaño de fuente: 13px; tamaño de fuente: 0.928571429rem; altura de línea: 1.846153846; decoración de texto:none;} a.comment-reply-link:hover,a.comment-edit-link:hover { color: #f6e7d7;}

Así es como se vería:

Botón de edición de comentarios de estilo

En la mayoría de los temas de WordPress, los usuarios registrados con la capacidad de editar comentarios pueden ver un enlace de edición de comentarios debajo de cada comentario. Aquí hay una pequeña CSS que usa la clase por defecto comment-edit-link para modificar la apariencia del enlace.

1234567891011a.comment-edit-link { float:left; margin:0010px10px; text-align:center; color de fondo: #55737D; borde:1pxsolid#55737D; border-radius:3px; acolchado:3px; ancho:50px; sombra de caja: 1px1px2px2px#4f4f4f4f;}

Así es como se vería:

Estilo Cancelar Comentario Responder Enlace

En la mayoría de los buenos temas de WordPress, al hacer clic en el enlace Responder se abre el formulario de comentarios justo debajo del comentario al que estás respondiendo con un enlace para cancelar la respuesta del comentario. Modifiquemos este enlace de respuesta de cancelación de comentarios usando el ID de CSS por defecto cancele-comment-reply.

1234567891011#enlace-cancelar-comunicación-respuesta { text-align:center; color de fondo: #55737D; borde:1pxsolid#55737D; border-radius:3px; acolchado:3px; anchura:50px; color:#FFFFFF; sombra de caja: 1px1px2px2px2px#4f4f4f4f; text-decoration:none;}

Así es como se vería:

Estilo del formulario de comentarios de WordPress

Los formularios de comentarios utilizables, estéticamente agradables y con estilo animan a los usuarios a dejar un comentario en su blog. Anteriormente hemos escrito un artículo detallado sobre cómo estilizar el formulario de comentarios de WordPress. Le recomendamos encarecidamente que lo compruebe para ver cómo puede llevar su formulario de comentarios de WordPress al siguiente nivel.

Esperamos que este artículo te ayude a estilizar el diseño de tus comentarios de WordPress. Si tiene alguna pregunta o sugerencia, no dude en hacérnoslo saber dejando un comentario a continuación.