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 del diseño de comentarios de WordPress. En el pasado, hemos discutido que existen clases de CSS e ID generados por WordPress predeterminados para ayudar a los diseñadores de temas a diseñar sus plantillas. En este artículo, usaremos estas clases predeterminadas para mostrarle cómo diseñar el diseño de sus comentarios de WordPress y algunas de las cosas interesantes que puede hacer con ellos. Para los propósitos de este ejemplo, vamos a cambiar el tema predeterminado de Twenty Twelve WordPress en este artículo. Nota: este artículo está dirigido a diseñadores de temas principiantes y usuarios de bricolaje que tengan un buen conocimiento de HTML y CSS.
Clases de comentarios de WordPress predeterminadas
Contents
De forma predeterminada, WordPress genera estas clases para elementos de plantilla de comentarios: / * Salida de comentario * / .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. incluso {} .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- cómo responder {}
Cómo encontrar las clases CSS que necesita modificar
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 útil que puede usar 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 elija Inspeccionar elemento. La ventana de su navegador se dividirá en dos líneas y en la ventana inferior verá el código fuente de este elemento. También en la ventana inferior podrá ver los elementos CSS y su estilo. Incluso puede editar el CSS allí para probarlo. Es importante recordar que todo lo que edite con el elemento Inspeccionar solo será visible para usted. En el momento en que actualiza la página, estos cambios desaparecen. Para que los cambios sean permanentes, debe usar su archivo style.css u otros archivos adecuados 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 es una tendencia de diseño que existe desde hace algunos años. Esto hace que sea más fácil de leer, especialmente si tiene muchos comentarios. También se ve muy bien con ciertos colores de temas, razón por la cual muchos diseñadores desean 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 estilos pares / impares para los comentarios en el archivo style.css de su tema pegando el siguiente código. .commentlist .even .comment {color de fondo: # ccddf2; } .commentlist .odd .comment {color de fondo: #CCCCCC; } El resultado se vería así:
Estilo del autor de comentarios 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 metadatos de comentarios, como la fecha y la hora de los comentarios. Aquí hay un ejemplo de código para pegar en el archivo style.css de su tema para diseñar estos elementos de manera diferente. En este ejemplo, hemos agregado un color de fondo para comentar el meta con un poco de espacio. Encabezado del artículo. Área de comentarios {margen: 0 0 48px; desbordamiento oculto; posición: relativa; color de fondo: # 55737D; color: #FFFFFF; relleno: 10px; } Así es como debería verse:
Estilo diferente al de los comentarios del autor.
A menudo, es posible que los comentarios de los autores de los artículos estén resaltados con un color de fondo diferente o una insignia adicional. WordPress agrega una clase predeterminada por postautor 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 del autor de las publicaciones de manera diferente. Algunos temas usan su propia función de devolución de llamada para mostrar comentarios. Al usar la función de devolución de llamada, estos temas pueden agregar información adicional a un comentario del autor del artículo. Por ejemplo, Twenty Twelve usa la siguiente línea en la función de devolución de llamada de comentario vingttwelve_comment () (ubicada en el archivo functions.php del tema). // Si el autor del artículo actual también es el autor del comentario, hágalo saber visualmente. ($ comment-user_id === $ post-post_author)? ‘ «. __ (‘Autor del artículo’, ‘veintidós’). ‘‘:’ ‘); Este código agrega Autor del mensaje 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 saber cómo maneja su tema los comentarios. Simplemente abra el archivo comments.php de su tema. Si su tema usa su propia función de devolución de llamada, lo verá en la función wp_list_comments, así:
‘comentario_ veintidós’, ‘estilo’ = ‘ol’)); ? En el ejemplo anterior, puede ver que el tema usa vingttwelve_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 esa función es en el archivo functions.php de su tema. En este ejemplo, modificamos esta función para mostrar el editor en lugar del Autor de la publicación. Para hacer esto, hemos modificado la función de devolución de llamada de comentario de esta manera: // Si el autor de la publicación actual también es el autor del comentario, háganoslo saber visualmente. ($ comment-user_id === $ post-post_author)? ‘ «. __ (‘Editor’, ‘Veintidós’). ‘‘:’ ‘); También cambiaremos su apariencia agregando lo siguiente al archivo style.css de nuestro tema de esta manera: li.bypostauthor quotes span {color: # 21759b; color de fondo: # f8f0cb; imagen de fondo: ninguna; borde: 1px sólido # f8f0cb; radio del borde: 3px; cuadro de sombra: ninguno; relleno: 3px; peso de fuente: negrita; } Así es como se vería:
Estilo del 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 función solo aparecerá si ha habilitado los comentarios del feed. Para habilitar los comentarios encadenados, vaya a su administrador de WordPress (Configuración »Discusión). Mire la sección donde dice otros parámetros de comentarios y marque la casilla para habilitar comentarios enhebrados (anidados). Las clases CSS predeterminadas generadas por WordPress para el enlace de respuesta son responder y comentario-respuesta-enlace. Usaremos estas clases para modificar el enlace de respuesta y convertirlo en un botón CSS. .reply {float: right; margen: 0 10px 10px 0; alineación de texto: centro; color de fondo: # 55737D; borde: 1px sólido # 55737D; radio del borde: 3px; relleno: 3px; ancho: 50px; cuadro de sombra: 1px 1px 2px 2px # 4f4f4f; } .comentar artículo {padding-bottom: 2.79rem; } a.comment-reply-link, a.comment-edit-link {color: #FFFFFF; tamaño de fuente: 13px; tamaño de fuente: 0.928571429rem; altura de la fila: 1.846153846; decoración de texto: ninguna; } a.comment-reply-link: hover, a.comment-edit-link: hover {color: # f6e7d7; } Así es como se vería:
Botón de edición de estilo de comentario
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 un pequeño CSS que usa la clase de enlace de edición de comentario predeterminada para cambiar el aspecto del enlace. a.comment-edit-link {float: left; margen: 0 0 10px 10px; alineación de texto: centro; color de fondo: # 55737D; borde: 1px sólido # 55737D; radio del borde: 3px; relleno: 3px; ancho: 50px; cuadro de sombra: 1px 1px 2px 2px # 4f4f4f; } Así es como se vería:
Estilo Cancelar respuesta al enlace de comentario
En la mayoría de los buenos temas de WordPress, al hacer clic en el enlace Responder se abre el formulario de comentario justo debajo del comentario al que está respondiendo con un enlace para cancelar la respuesta al comentario. Le permite modificar este enlace de respuesta a los comentarios de cancelación utilizando el ID de CSS predeterminado cancelar-comentario-respuesta. # cancelar-comentario-respuesta-enlace {alineación de texto: centro; color de fondo: # 55737D; borde: 1px sólido # 55737D; radio del borde: 3px; relleno: 3px; ancho: 50px; color: #FFFFFF; cuadro de sombra: 1px 1px 2px 2px # 4f4f4f; decoración de texto: ninguna; } Así es como se vería:
Diseñar el formulario de comentarios de WordPress
Los formularios de comentarios utilizables, estéticamente agradables y elegantes inspiran a los usuarios a ir …
Originally posted 2021-02-25 04:33:08.
