O design dos comentários pode parecer muito simples. E isso é! Mas acho que simples é eficaz neste caso. Os comentários são uma parte tão importante dos truques de CSS que quero que sejam muito legíveis e confortáveis.
Agora vamos pular para o WordPress e tornar este tópico de comentários uma realidade. A primeira coisa que fazemos é encontrar um modelo no qual exibiremos comentários. single.phpé provavelmente o mais importante (postagens de blog individuais). Descobrimos nesse modelo que a função comments_template()é tudo o que precisamos chamar para obter toda a área de comentários. Essencialmente, o que essa função faz é pegar o arquivo comments.phpe colocá-lo lá. Então, começamos a olhar para isso.
O código desse arquivo começa com . Isso é altamente apropriado. Os comentários são certamente uma seção e devem ter um identificador. Lembre-se de que não fazemos nenhum estilo com base em IDs, mas ter seus comentários agrupados em um elemento com um ID de comentários é bom porque:
- Você sempre pode criar um hash de link para os comentários, acrescentando #comments ao URL.
- Pessoas que odeiam comentários podem ocultá-los na folha de estilo do usuário com um ID que pode ser adivinhado.
Continuamos examinando o código neste arquivo. Excluímos algumas coisas que temos certeza que não vamos usar. Mudamos algumas coisas para corresponder ao que projetamos no Photoshop.
Em seguida, encontramos a função wp_list_comments()que é a função responsável por divulgar todo o tópico de comentários. Em seguida, ele cuspiu as coisas como o formulário de comentário. O tempo todo, existe uma lógica para mostrar coisas em diferentes situações, como quando os comentários são fechados ou quando os comentários estão abertos, mas não há nenhum.
Encontramos uma pequena função estranha chamada, a cancel_comment_reply_link()qual olhamos e vemos que lida com a funcionalidade de mover o formulário de comentário de volta para a parte inferior no caso de um link de resposta ter sido clicado e o formulário ter subido, mas não queríamos para.
Em seguida, examinamos o HTML de onde obtemos wp_list_comments(). Sem fazer nada, obteremos HTML desta função que é perfeitamente razoável. Mas também é o que é e não se encaixa em todos os designs possíveis. Pessoalmente, prefiro ter controle total sobre a marcação. Portanto, em vez de apenas pegar o que ele nos dá, assumimos o controle sobre ele usando uma função personalizada em nosso functions.phparquivo que substitui a marcação padrão.
Agora que temos controle de HTML, podemos entrar em um tipo de “modo de design”, onde alternamos entre CSS e HTML para fazer nosso design. Comentários CSS, como qualquer outro pequeno pedaço modular de CSS neste projeto, vamos relegar para um arquivo _comments.scss que podemos incluir no global. Caso perfeito, onde separar CSS em seu próprio arquivo faz sentido. Embora devamos usar tantos estilos globais quanto pudermos. Por exemplo, cada comentário é certamente um .module, os estilos de cabeçalho devem ser perfeitamente adequados aqui para nomes e a tipografia em geral deve vir apenas dos estilos de tipografia global.
Nós até usamos nosso sistema de grade dentro dos comentários, já que cada comentário é essencialmente uma grade de duas colunas. Outras pequenas coisas são totalmente personalizadas para comentários, como onde e como posicionamos os links de resposta.
No final do screencast, descobrimos que nosso design no Photoshop tem uma falha fatal. Os comentários aninhados residem em um comentário pai e é muito difícil fazer nossos módulos aninhados parecerem separados. Podemos ter que fazer alguns compromissos aqui.