Tutorial: como colocar os comentários do seu blog com mais estilo

Uma das partes mais engraçadas de estilizar um template Wordpress, é criar a secção de comentários do blog, que seja um complemento visual extremamente atrativo, tal como o resto do template do blog.
Hoje trago-lhe três tipos de estilos de comentários que poderá utilizar no seu blog. Junto coloco o código fonte original dos mesmos e também um ficheiro .PSD para estilizar em Photoshop.

1. Os gravatars verdes

Este estilo de comentários deverá estar associado a um blog que utilize um tom esverdeado. Ele necessita do plugin Gravatars para Wordpress e três imagens: imagem 1, imagem 2 e imagem 3. Faça “salvar como” e carrege-as para o seu servidor.
Depois disso a primeira coisa a fazer é editar o ficheiro “comments.php” do seu template wordpress com o seguinte código:

<ol class=”commentlist”>
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
<cite>
<img src=”<?php gravatar(”R”, 32); ?>” alt=”" />
<span class=”author”><?php comment_author_link() ?></span><br /><span class=”time”><?php comment_time() ?></span> on <a href=”#comment-<?php comment_ID() ?>” title=”"><?php comment_date(’F jS, Y’) ?></a> <?php edit_comment_link(’edit’,'&nbsp;&nbsp;’,”); ?>
</cite>
<div class=”commenttext”><?php comment_text() ?></div>
<?php if ($comment->comment_approved == ‘0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;
?>
<?php endforeach; /* end for each comment */ ?>
</ol>

Depois de inserir o código, deverá inserir também o CSS:

ol.commentlist {
margin:0;
padding:0;
}

.commentlist li {
list-style:none;
margin-bottom:14px;
}

.commentlist cite {
padding: 7px;
display:block;
font-style:normal;
background:url(http://www.yoursite.com/images/bg_comments2_cite.gif);
border-top:1px solid #d6e4c1;
border-bottom:1px solid #779d42;
color:#596e3b;
}

.commentlist a:link, .commentlist a:visited {
color:#596e3b;
}

.commentlist a:hover, .commentlist a:active {
color:#8ec343;
}

.commentlist cite img {
padding:1px;
border:1px solid #aab59a;
float:left;
margin-right:9px;
}

.commentlist .author {
font: small-caps bold 1.2em Georgia, “Times New Roman”, Times, serif;
text-decoration:underline;
}

.commentlist .time {
background: url(http://www.yoursite.com/images/bg_clock.gif) no-repeat 1px;
padding-left:13px;
}

.commenttext {
background: #9bc561 url(http://www.yoursite.com/images/bg_comments2_text.jpg) repeat-x bottom;
border-top:1px solid #c5f386;
padding: 0 20px 10px 20px;
color:#fafcf6;
}

Não se esqueça que todos os exemplos aqui apresentados irão utilizar a dimensão de pixel de texto que estiver previamente definida no seu template. Depois será necessário ajustá-la devidamente ao tamanhoa da caixa de comentários.

Download: Gravatars em Verde (.psd)

2. Balão de Comentário

Este balão de comentários não necessita de nenhum plugin, apenas de duas imagens: imagem 1 e imagem 2. Faça “salvar como” e carrege-as para o seu servidor.
Depois disso vamos editar o ficheiro “comments.php” com o seguinte código:

<ol class=”commentlist”>
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
<div class=”quote”><?php comment_text() ?></div>
<?php if ($comment->comment_approved == ‘0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<cite><?php comment_author_link() ?> on <a href=”#comment-<?php comment_ID() ?>” title=”"><?php comment_date(’F jS, Y’) ?> at <?php comment_time() ?> <?php edit_comment_link(’edit’,'&nbsp;&nbsp;’,”); ?></a></cite>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;
?>
<?php endforeach; /* end for each comment */ ?>
</ol>

E depois estilizá-lo com o seguinte CSS:

.commentlist .quote {
background:url(http://www.yoursite.com/images/bg_quote.gif) no-repeat top right;
}

.commentlist li {
padding: 5px 18px 22px 18px;
margin-top:15px;
background:#454545 url(http://www.yoursite.com/images/bg_commentlist.gif) bottom no-repeat;
color:#e4edee;
}

.commentlist cite {
display:block;
font-style:normal
}

.commentlist cite a:link, .commentlist cite a:visited {
color:#88e5f0;
text-decoration:none;
}

.commentlist cite a:hover, .commentlist cite a:active {
color:#FFF;
text-decoration:underline;
}

Download: Balão de Comentários (.psd)

3. Alternar Setas dos Comentários

Esta estilização tem como objectivo fazer alternar os comentários com o estilo apresentado na imagem. Ela faz uso do atributo “.alt” nas imagens para fazer a alternação devidamente.
Ele utiliza dois fundos diferentes: fundo 1 e fundo 2. Utiliza também duas imagens: imagem 1 e imagem 2 e ainda dois tipos de setas: seta 1 e seta 2.
Faça “salvar como” e carrege-as para o seu servidor.
Depois disso vamos editar o ficheiro “comments.php” com o seguinte código:

<ol class=”commentlist”>
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
<div class=”commenttext”>
<cite><?php comment_author_link() ?></cite>
<?php comment_text() ?>
<span class=”date”><img src=”/images/commentlink.gif” alt=”" /> <a href=”#comment-<?php comment_ID() ?>” title=”"><?php comment_time() ?> on <?php comment_date(’n/j/y’) ?></a></span> <?php edit_comment_link(’edit’,'&nbsp;&nbsp;’,”); ?>
</div>
<?php if ($comment->comment_approved == ‘0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;?>
<?php endforeach; /* end for each comment */ ?>
</ol>

E aqui está o CSS:

ol.commentlist {
margin:0;
padding:0;
}

.commentlist li {
margin-bottom:8px;
background: #60360b url(http://www.yoursite.com/images/comment_arrows.gif) bottom no-repeat;
color:#FFF;
list-style:none;
width:413px;
}

.commentlist .commenttext {
background:url(http://www.yoursite.com/images/bg_paint.gif) no-repeat;
padding:22px 22px 50px 22px;
}

.commentlist cite {
display:block;
color:#FFF;
font-weight:bold;
text-transform:uppercase;
font-style:normal;
background:url(http://www.yoursite.com/images/bg_cite_arrows.gif) bottom repeat-x;
padding-bottom:12px;
font-size:1.1em;
}

.commentlist a:link, .commentlist a:visited {
color:#fff9b9;
}

.commentlist a:hover, .commentlist a:active {
color:#FFF;
}

.commentlist .date {
background:#930e27;
padding:3px;
}

li.alt {
background:#836241 url(http://www.yoursite.com/images/comment_arrows_alt.gif) bottom no-repeat;
}

li.alt .commenttext {
background:url(http://www.yoursite.com/images/bg_paint_alt.gif) no-repeat;
}

li.alt .date {
background:#67421c;
padding:3px;
}

Download: Alternando setas nos comentários (.psd)

Amante do Wordpress ? Talvez queira subscrever o nosso RSS Feed Completo ?

Outros artigos de interesse:

• Como estilizar os comentários de resposta no seu blog Wordpress 2.7
• Como destacar os últimos artigos publicados no seu blog?
• Widget contador de comentários para Wordpress
• Tutorial: como instalar uma DomTAB no seu blog Wordpress
• O que há de novo no Wordpress 2.8?
• Tutorial: Como alterar o aspecto do seu painel de administração WP2.7