Cómo estilizar el diseño de tus comentarios en WordPress

Hace poco te mostramos cómo dar estilo al formulario de comentarios de WordPress, y pensamos que estaría incompleto si no escribiéramos sobre cómo dar estilo al diseño de los comentarios de WordPress. En el pasado, hemos hablado de que existen clases e IDs CSS generados por defecto por WordPress para facilitar a los diseñadores de temas el estilo de sus plantillas. En este artículo, utilizaremos esas clases por defecto para mostrarte cómo estilizar el diseño de los comentarios de WordPress y algunas de las cosas interesantes que puedes hacer con él

Para este ejemplo, modificaremos el tema predeterminado de WordPress Twenty Twelve en este artículo. Nota: Este artículo es para los diseñadores de temas principiantes y los usuarios de bricolaje que tienen un buen conocimiento de HTML y CSS.

Clases de comentarios por defecto en WordPress

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

/*Comment Output*/

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

Cómo encontrar las clases CSS que necesitas editar

Antes de pasar a estilizar el 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 práctica herramienta que puedes utilizar para mejorar tus habilidades de desarrollo de temas de WordPress. La herramienta se llama Inspeccionar elemento. Simplemente lleva el ratón a un elemento de una página web, haz clic con el botón derecho y elige inspeccionar elemento. La ventana de tu navegador se dividirá en dos filas y en la ventana inferior verás 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 puedes editar el CSS ahí para hacer pruebas. Es importante recordar que todo lo que cambies con el elemento de inspección sólo lo podrás ver tú. En el momento en que actualices la página, esos cambios desaparecerán. Para que los cambios sean permanentes, tienes que utilizar tu archivo style.css u otros archivos apropiados en tus temas

Añadir colores de fondo pares e impares a los comentarios

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

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

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

El resultado sería algo así

Estilizar la información de autor y meta de los comentarios

WordPress también añade clases a los elementos que se muestran en la cabecera de cada comentario. Esto permite a los diseñadores de temas personalizar la visualización de la información del autor y otros meta comentarios, como la fecha y la hora del comentario. Aquí tienes un código de ejemplo para pegar en el archivo style.css de tu tema para dar un estilo diferente a estos elementos. En este ejemplo hemos añadido un color de fondo a los meta comentarios junto con un poco de espaciado.

.comments-area article header {
	margin: 0 0 48px;
	overflow: hidden;
	position: relative;
	background-color:#55737D;
	color:#FFFFFF;
	padding: 10px;
}

Este es el aspecto que debería tener

Estilizar los comentarios del autor del post de forma diferente

A menudo puedes ver que los comentarios de los autores de las entradas se resaltan con un color de fondo diferente o con alguna insignia adicional. WordPress añade una clase por defecto bypostauthor a todos los comentarios realizados por el autor de la entrada. Los diseñadores de temas de WordPress pueden utilizar esta clase para dar un estilo diferente a los comentarios del autor de la entrada

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

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );

Este código añade <span>Post Author</span> a la meta información del comentario. Dependiendo de cómo tu tema de WordPress maneje los comentarios del autor de la entrada, puedes modificar esto a lo que quieras

Si utilizas un tema diferente al de Twenty Twelve, tienes que averiguar cómo maneja tu tema los comentarios. Simplemente abre la sección de tu tema comments.php de tu tema. Si tu tema utiliza su propia función de devolución de llamada, la verás dentro de wp_list_comments como esta:

<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

En el ejemplo anterior, puedes ver que el tema utiliza twentytwelve_comment como función de devolución de llamada. Si se especifica una función de devolución de llamada, la ubicación más probable para encontrar esta función es el archivo functions.php de tu tema

En este ejemplo estamos cambiando esta función para que muestre el Editor en lugar del Autor de la publicación. Para ello, hemos modificado la función de devolución de llamada del comentario de la siguiente manera

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Editor', 'twentytwelve' ) . '</span>' : '');

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

li.bypostauthor cite span {
	color: #21759b;
	background-color: #f8f0cb;
	background-image: none;
	border: 1px solid #f8f0cb;
	border-radius: 3px;
	box-shadow: none;
	padding: 3px;
	font-weight:bold;
}

Así es como quedaría

Estilizar el enlace de respuesta al comentario en los comentarios de WordPress

La mayoría de los temas de WordPress tienen un enlace de respuesta debajo de cada comentario. Esta funcionalidad sólo se muestra si tienes activados los comentarios en cadena. Para activar los comentarios en cadena, ve a tu administrador de WordPress (Configuración " Discusión). Mira la sección donde dice otros ajustes de los comentarios, y marca la casilla para habilitar los comentarios enhebrados (anidados).

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

.reply { 
	float:right;
	margin:0 10px 10px 0;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
	padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
	color: #FFFFFF;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #f6e7d7;
}

Así es como quedaría

Estilo del botón de edición de comentarios

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

a.comment-edit-link {
	float:left;
	margin:0 0 10px 10px;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

Este es el aspecto que tendría

Estilizar el enlace de respuesta al comentario

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 al comentario. Modifiquemos este enlace de cancelación de respuesta al comentario utilizando el identificador CSS por defecto cancel-comment-reply

#cancel-comment-reply-link  { 
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	color:#FFFFFF;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
	text-decoration:none;
}

Así es como quedaría

Estilizar el formulario de comentarios de WordPress

Los formularios de comentarios usables, estéticamente agradables y con estilo animan a los usuarios a dejar un comentario en tu blog. Anteriormente hemos escrito un artículo detallado sobre cómo dar estilo al formulario de comentarios de WordPress. Te recomendamos encarecidamente que lo consultes para ver cómo puedes llevar tu formulario de comentarios de WordPress al siguiente nivel.

Esperamos que este artículo te ayude a dar estilo a tu formulario de comentarios de WordPress. Si tienes alguna pregunta o sugerencia, no dudes en hacérnoslo saber dejando un comentario a continuación.