Como Estilizar o Layout dos Comentários do WordPress

Recentemente, mostramos a você como estilizar o formulário de comentários do WordPress, e achamos que estaria incompleto se não escrevêssemos sobre como estilizar o layout dos comentários do WordPress. No passado, discutimos que existem classes e IDs CSS gerados por padrão pelo WordPress para ajudar a facilitar para os designers de temas a estilização de seus modelos. Neste artigo, usaremos essas classes padrão para mostrar como estilizar o layout dos comentários do WordPress e algumas das coisas interessantes que você pode fazer com ele.

Para fins deste exemplo, modificaremos o tema padrão Twenty Twelve do WordPress neste artigo. Observação: Este artigo é para designers de temas iniciantes e usuários de "faça você mesmo" que tenham um bom entendimento de HTML e CSS.

Classes Padrão de Comentários do WordPress

Por padrão, o WordPress gera estas classes para os elementos no modelo de comentários:

/*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 {}

Como Encontrar Quais Classes CSS Você Precisa Editar

Antes de passarmos para a estilização do layout de comentários do WordPress, uma pequena dica para nossos novos usuários. Os navegadores web Google Chrome e Mozilla Firefox vêm com uma ferramenta útil que você pode usar para aprimorar suas habilidades de desenvolvimento de temas WordPress. A ferramenta é chamada Inspecionar Elemento. Simplesmente posicione o mouse sobre um elemento em uma página da web, clique com o botão direito e escolha inspecionar elemento. A janela do seu navegador será dividida em duas linhas e na janela inferior você verá o código-fonte desse elemento. Também na janela inferior, você poderá ver os elementos CSS e como eles são estilizados. Você pode até editar o CSS lá para fins de teste. É importante lembrar que tudo o que você altera usando o Inspecionar Elemento é visível apenas para você. No momento em que você atualizar a página, essas alterações desaparecerão. Para tornar as alterações permanentes, você precisa usar seu arquivo style.css ou outros arquivos apropriados em seus temas.

Adicionando Cores de Fundo Ímpares e Pares para Comentários

Ter uma cor de fundo diferente para comentários ímpares e pares é uma tendência de design que existe há alguns anos. Isso ajuda na legibilidade, especialmente se você tiver muitos comentários. Também fica muito bom com certas cores de tema, e é por isso que muitos designers querem utilizar essa funcionalidade. Para ajudar os designers a atingir esse objetivo, o WordPress adiciona uma classe ímpar e par a cada comentário, respectivamente.

Você pode facilmente adicionar a estilização ímpar/par para comentários no style.css do seu tema colando o seguinte código.

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

O resultado ficaria algo assim:

Estilizando o Autor do Comentário e as Informações de Meta

O WordPress também adiciona classes aos elementos exibidos no cabeçalho de cada comentário. Isso permite que os designers de temas personalizem a exibição das informações do autor e outras meta-informações do comentário, como data e hora do comentário. Aqui está um exemplo de código para colar no arquivo style.css do seu tema para estilizar esses elementos de forma diferente. Neste exemplo, adicionamos cor de fundo às meta-informações do comentário, juntamente com algum espaçamento.

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

É assim que deveria ficar:

Estilizando Comentários do Autor da Postagem de Forma Diferente

Muitas vezes, você pode ver que os comentários do autor da postagem são destacados com uma cor de fundo diferente ou um selo adicional. O WordPress adiciona uma classe padrão bypostauthor a todos os comentários feitos pelo autor da postagem. Designers de temas do WordPress podem usar essa classe para estilizar os comentários do autor da postagem de forma diferente.

Alguns temas usam sua própria função de retorno de chamada para exibir comentários. Usando a função de retorno de chamada, esses temas podem adicionar informações adicionais a um comentário do autor da postagem. Por exemplo, Twenty Twelve usa a seguinte linha na função de retorno de chamada de comentários twentytwelve_comment() (localizada no arquivo functions.php do 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 adiciona <span>Post Author</span> às informações de metadados do comentário. Dependendo de como seu tema do WordPress lida com comentários do autor da postagem, você pode modificar isso para o que quiser.

Se você estiver usando um tema diferente do Twenty Twelve, precisará descobrir como seu tema lida com comentários. Simplesmente abra o arquivo comments.php do seu tema. Se o seu tema estiver usando sua própria função de retorno de chamada, você a verá dentro da função wp_list_comments, assim:

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

No exemplo acima, você pode ver que o tema está usando twentytwelve_comment como a função de retorno de chamada. Se uma função de retorno de chamada for especificada, o local mais provável para encontrar essa função é no arquivo functions.php do seu tema.

Neste exemplo, estamos alterando esta função para exibir Editor em vez de Autor da Postagem. Para fazer isso, modificamos a função de callback de comentário da seguinte forma:

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

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

Também vamos modificar a forma como ele aparece adicionando o seguinte em nosso arquivo style.css do tema:

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;
}

Veja como ficaria:

Estilizando o Link de Resposta de Comentário em Comentários do WordPress

A maioria dos temas do WordPress tem um link de resposta abaixo de cada comentário. Essa funcionalidade só é exibida se você tiver comentários encadeados ativados. Para ativar comentários encadeados, vá para o seu painel do WordPress (Configurações » Discussão). Procure a seção onde diz outras configurações de comentários e marque a caixa para ativar comentários encadeados (aninhados).

As classes CSS padrão geradas pelo WordPress para o link de resposta são reply e comment-reply-link. Usaremos essas classes para modificar o link de resposta e transformá-lo em um botão 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;
}

Veja como ficaria:

Estilizando o Botão de Edição de Comentário

Na maioria dos temas do WordPress, usuários logados com a capacidade de editar comentários podem ver um link de edição de comentário abaixo de cada comentário. Aqui está um pequeno CSS que usa a classe padrão comment-edit-link para modificar a aparência do link.

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;
}

Veja como ficaria:

Estilizando o Link de Cancelamento de Resposta de Comentário

Na maioria dos bons temas do WordPress, clicar no link Responder abre o formulário de comentário logo abaixo do comentário ao qual você está respondendo, com um link para cancelar a resposta do comentário. Vamos modificar este link de cancelamento de resposta de comentário usando o ID CSS padrão 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;
}

Veja como ficaria:

Estilizando o Formulário de Comentários do WordPress

Formulários de comentários utilizáveis, esteticamente agradáveis e estilosos incentivam os usuários a deixar um comentário em seu blog. Anteriormente, escrevemos um artigo detalhado sobre como estilizar o formulário de comentários do WordPress. Recomendamos fortemente que você dê uma olhada para ver como você pode levar seu formulário de comentários do WordPress para o próximo nível.

Esperamos que este artigo ajude você a estilizar o layout dos comentários do WordPress. Se você tiver alguma dúvida ou sugestão, sinta-se à vontade para nos informar deixando um comentário abaixo.