Recientemente le mostramos cómo diseñar el formulario de comentarios de WordPress y pensamos que estaría incompleto si no escribíamos sobre el estilo de diseño de comentarios de WordPress. En el pasado, hemos discutido que existen clases e IDs CSS generados por WordPress predeterminados 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 predefinidas para mostrarle cómo diseñar su diseño de comentarios de WordPress y algunas de las cosas interesantes que puede hacer con él.
Por el bien de este ejemplo, en este artículo cambiaremos el tema predeterminado de Twenty Twelve WordPress. Nota: Este artículo está dirigido a diseñadores de temas novatos y usuarios que lo hacen por sí mismos y que tienen un buen conocimiento de HTML y CSS.
Clases de comentarios de WordPress prediseñadas
Por defecto, WordPress genera estas clases para elementos en 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 para modificar
Antes de pasar al estilo de diseño de comentarios de WordPress, un pequeño consejo para nuestros nuevos usuarios. Los navegadores web Google Chrome y Mozilla Firefox vienen con una herramienta útil que puede utilizar para mejorar sus habilidades de desarrollo de temas de WordPress. La herramienta se llama Inspeccionar elemento. Simplemente coloque el mouse sobre un elemento en una página web, haga clic con el botón derecho y seleccione Inspeccionar elemento. La ventana del navegador se dividirá en dos líneas y en la ventana inferior verá el código fuente de ese elemento. Además, en la ventana inferior, podrá ver los elementos CSS y cómo están diseñados. Incluso puede editar el CSS allí con fines de prueba. Es importante recordar que todo lo que edite con Inspect Element es visible solo para usted. En el momento en que actualice la página, esos cambios desaparecerán. Para que los cambios sean permanentes, debe usar su archivo style.css u otros archivos apropiados en sus temas.
Se agregaron colores de fondo pares e impares para los comentarios
Tener un color de fondo diferente para comentarios pares e impares ha sido una tendencia de diseño que ha existido durante algunos años. Ayuda a la legibilidad, especialmente si tiene muchos comentarios. También se ve muy bien con algunos colores de tema, por lo que muchos diseñadores quieren usar esta función. Para ayudar a los diseñadores a lograr esto, WordPress agrega una clase par e impar a cada comentario, respectivamente.
Puede agregar fácilmente el estilo par / impar para los comentarios en el archivo style.css de su tema pegando el siguiente código.
.commentlist .even .comment {
background-color:#ccddf2;
}
.commentlist .odd .comment {
background-color:#CCCCCC;
}
El resultado se vería así:
Autor del comentario estilístico y metainformación
WordPress también agrega clases a los elementos que se muestran 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 metacomentarios, como la fecha y hora del comentario. A continuación se muestra un código de muestra para pegarlo en el archivo style.css de su tema para aplicar un estilo diferente a estos elementos. En este ejemplo, hemos agregado el color de fondo al meta del comentario junto con algo de espacio.
.comments-area article header {
margin: 0 0 48px;
overflow: hidden;
position: relative;
background-color:#55737D;
color:#FFFFFF;
padding: 10px;
}
Así es como debería verse:
Aplicar diferentes estilos a los comentarios del autor de la publicación.
A menudo puede ver que los comentarios del autor de la publicación están resaltados con un color de fondo diferente o algunas insignias adicionales. WordPress agrega una clase predeterminada bypostauthor a todos los comentarios realizados por el autor de la publicación. Los diseñadores de temas de WordPress pueden usar esta clase para diseñar los comentarios de los autores de publicaciones de manera diferente.
Algunos temas usan su propia función de devolución de llamada para mostrar comentarios. Con la función de devolución de llamada, estos temas pueden agregar información adicional al comentario del autor de una publicación. Por ejemplo, Twenty Twelve usa la siguiente línea en la función de devolución de llamada de comentario twentytwelve_comment() (situado en functions.php archivo de 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 agrega <span>Post Author</span> a la metainformación del comentario. Dependiendo de cómo su tema de WordPress maneje los comentarios del autor de la publicación, puede editarlo como desee.
Si está utilizando un tema que no sea Twenty Twelve, debe averiguar cómo maneja su tema los comentarios. Simplemente abre tu tema comments.php expediente. Si su tema usa su propia función de devolución de llamada, lo verá dentro wp_list_comments función, así:
<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>
En el ejemplo anterior, puede ver que el tema está usando 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 en el archivo functions.php de su tema.
En este ejemplo, estamos cambiando esta función para mostrar Editor en lugar de Autor de publicación. Para hacer esto, hemos modificado la función de devolución de llamada de 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 cambiaremos su apariencia agregando 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 se vería:
Enlace de respuesta de comentario con estilo en los comentarios de WordPress
La mayoría de los temas de WordPress tienen un enlace de respuesta debajo de cada comentario. Esta función solo aparece si los comentarios encadenados están habilitados. Para habilitar los comentarios encadenados, vaya a su administrador de WordPress (Configuración »Discusión). Mire la sección donde dice más configuraciones de comentarios y marque la casilla para habilitar comentarios encadenados (anidados).
Las clases CSS predeterminadas generadas por WordPress para el enlace de respuesta son reply es comment-reply-link. Usaremos estas 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 se vería:
Botón Editar comentario de estilo
En la mayoría de los temas de WordPress, los usuarios que inician sesión con la capacidad de editar comentarios pueden ver un enlace de edición de comentarios debajo de cada comentario. Aquí hay un pequeño CSS que usa la clase predeterminada comment-edit-link para cambiar 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;
}
Así es como se vería:
Estilo Cancelar comentario Enlace de respuesta
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. Le permite editar este enlace de Descomentar respuesta usando el ID de CSS predeterminado 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 se vería:
Diseñar el formulario de comentarios de WordPress
Los formularios de comentarios utilizables, estéticamente agradables y elegantes animan a los usuarios a dejar un comentario en su blog. Anteriormente escribimos un artículo detallado sobre cómo diseñar el formulario de comentarios de WordPress. Recomendamos encarecidamente consultar esto para ver cómo puede llevar su formulario de comentarios de WordPress al siguiente nivel.
Esperamos que este artículo le ayude a diseñar su diseño de comentarios de WordPress. Si tiene alguna pregunta o sugerencia, no dude en hacérnoslo saber dejando un comentario a continuación.
¿Te ha resultado útil??
0 / 0