Numerando os Comentários

Estou estudado bastante a estrutura do WordPress e descobrindo que não é tão difícil, como pode parecer a primeira vista, modificar e deixar da forma que quero.

Resolvi numerar os comentários, só para ficar mais bonitinho, gostei do resultado final e resolvi compartilhar com vocês.

Fica algo mais ou menos assim:

Você vai precisar modificar os arquivos comments.php e style.css do seu thema.

Primeiro Passo: Abra o arquivo comments.php e localize o código:

<'?php foreach ($comments as $comment) : ?>

Modifique deixando assim:

<'?php $contar = 1; foreach ($comments as $comment) : ?>

Desça um pouco mais o código até encontrar:

<'?php comment_text() ?>

Esse é o código que trás o texto do comentário, nesse ponto você deverá escolher se quer colocar o número acima ou abaixo do texto. Decidido onde colocar escreva o seguinte código, abaixo ou acima do Comment_text:

1. <'?php if ($comment->comment_approved == ’1′): ?>
2. <'div align="right">
3. <'div class="contar">
4. #<'?php echo $contar; $contar++; ?>
5. <'/div>
6. <'/div>

Os números incluídos antes do código só servem para facilitar a explicação das linhas.

1 - Aqui estamos a dizer que sempre que um novo comentário for aprovado será acrescentado 1 ao valor anterior.

2 - Acrescentei essa div porque no CSS não consegui fazer com que o texto ficasse alinhado a direita, funcionava numa boa com o text-align:right, mas quando eu colocava o display:inline, para que a borda e background ficasse só no número, ele alinhava a esquerda.

3 – Nesta div vamos incluir a classe que vai estilizar a contagem.

4 - Aqui agente inclui o “#” e ao lado dele o número referente a ordem do comentário.

As duas últimas linhas fecham as divs.

Pronto, o seu arquivo de comentário já esta preparado para ser numerado agora precisamos modificar o visual.

Abra o arquivo style.css e crie uma nova classe chamada “contar”, vá até o final do código e escreva:

1. .contar {
2. text-align:right;
3. padding: 5px;
4. color:#666;
5. font-size: 1.2em;
6. display:inline;
7. border-right: 1px solid #000;
8. border-bottom: 1px solid #000;
9. background:#ffffcc;
10. }

Explicando:

1 - Cria e abre a classe contar.

2 - Tentativa frustrada de alinhas a direita, resolvi da forma que expliquei no arquivo comments (usando div align). Se quiser podem até apagar essa linha.

3 - Da um espaço de 5px entre o número e as bordas, em todas as direções.

4 – Cor da fonte.

5 - Tamanho da fonte.

6 - Coloco a borda e background somente nos números, sem esta linha a borda ocupa de um lado ao outro o espaço do comentário.

7 e 8 – Cria uma borda do lado direito e em baixo, respectivamente, dando um efeito de relevo… 3d.

9 – Define uma cor de fundo.

10 – Fecha a classe.

O resultado final é muito interessante e você pode estilizar da forma que quiser para deixar o visual mais legal.

Apague a aspa simples ( ‘ ) que aparece no inicio de todos os códigos PHP.

This entry was posted on quarta-feira, setembro 12th, 2007 at 12:16 pm and is filed under A Arte de Blogar, blogs. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.