El diseño de los comentarios puede parecer muy simple. ¡Y es! Pero creo que lo simple es efectivo en este caso. Los comentarios son una parte tan importante de CSS-Tricks que quiero que sean muy fáciles de leer y cómodos.
Ahora vamos a saltar a WordPress y hacer realidad este hilo de comentarios. Lo primero que hacemos es buscar una plantilla en la que mostraremos comentarios. single.phpes probablemente el más importante (publicaciones de blog individuales). Encontramos en esa plantilla que la función comments_template()es todo lo que necesitamos llamar para obtener toda el área de comentarios. Básicamente, lo que hace esa función es ir a buscar el archivo comments.phpy colocarlo allí. Entonces, comenzamos a mirar eso.
El código de ese archivo comienza con . Eso es muy apropiado. Los comentarios son ciertamente una sección y deberían tener un identificador. Recuerde que no hacemos ningún estilo basado en ID, pero tener sus comentarios envueltos en un elemento con una ID de comentarios es bueno porque:
- Siempre puede hacer un hash-link a los comentarios agregando #comments a la URL.
- Las personas que odian los comentarios pueden ocultarlos en su hoja de estilo de usuario con una ID adivinable.
Seguimos revisando el código en este archivo. Eliminamos algunas cosas que estamos bastante seguros de que no vamos a utilizar. Cambiamos algunas cosas para que coincidan con lo que hemos diseñado en Photoshop.
Luego nos encontramos con la función wp_list_comments()que es la función responsable de escupir todo el hilo de comentarios. Luego continúa escupiendo cosas como el formulario de comentarios. Mientras tanto, existe una lógica para mostrar cosas en diferentes situaciones, como cuando los comentarios están cerrados o cuando los comentarios están abiertos pero no hay ninguno.
Encontramos una función un poco extraña llamada cancel_comment_reply_link()que miramos y vemos que maneja la funcionalidad para mover el formulario de comentarios hacia abajo en el caso de que se haya hecho clic en un enlace Responder y el formulario se haya movido hacia arriba, pero no quisimos a.
Luego profundizamos en el HTML del que obtenemos wp_list_comments(). Sin hacer nada, obtendremos HTML de esta función que es perfectamente razonable. Pero también, es lo que es y no se ajusta a todos los diseños posibles. Personalmente, prefiero tener un control total sobre el marcado. Entonces, en lugar de simplemente tomar lo que nos da, lo controlamos mediante el uso de una función personalizada en nuestro functions.phparchivo que anula el marcado predeterminado.
Ahora que tenemos el control de HTML, podemos entrar en una especie de "modo de diseño" en el que nos movemos de un lado a otro entre CSS y HTML para hacer nuestro diseño. Comentarios CSS, como cualquier otro pequeño fragmento modular de CSS en este proyecto, lo relegaremos a un archivo _comments.scss que podemos incluir en el archivo global. Caso perfecto donde tiene sentido separar CSS en su propio archivo. Sin embargo, deberíamos usar tantos estilos globales como podamos. Por ejemplo, cada comentario es ciertamente un .module, los estilos de encabezado deberían estar perfectamente bien aquí para los nombres, y la tipografía en general debería provenir de los estilos de tipografía globales.
Incluso usamos nuestro sistema de cuadrícula dentro de los comentarios, ya que cada comentario es esencialmente una cuadrícula de dos columnas. Otras pequeñas cosas son totalmente personalizadas para los comentarios, como dónde y cómo colocamos los enlaces de respuesta.
Al final del screencast, nos damos cuenta de que nuestro diseño de Photoshop tiene un defecto fatal. Los comentarios anidados viven dentro de un comentario principal y es bastante difícil hacer que nuestros módulos anidados parezcan separados. Puede que tengamos que hacer algunos compromisos aquí.