Saiba como criar um template de comentários usando o arquivo comments.php

Olá pessoal, tudo bom?
Hoje iremos falar sobre como criar um modelo de comentário personalizado. Iremos trabalhar no arquivo comments.php.
Espero que gostem.
Vamos lá!

RELEMBRANDO

Aula passada nós falamos sobre a criação do arquivo page.php e aprendemos a criar modelos de página para nossos temas.

COMMENTS.PHP

Esse arquivo é destinado a criação do modelo de comentários que iremos utilizar em nosso tema. Ele substitui o modelo padrão do WordPress.

O código desse arquivo não é muito amigável, portanto preste bastante atenção no tutorial, pois irei tentar explicar o melhor possível.

PASSO 1: SEGURANÇA

Primeiramente precisamos criar um código para assegurar que nosso arquivo não será acessado diretamente e que caso o artigo esteja protegido por senha, os comentários também não poderão ser apresentados.
Segue o código.

No código acima você pode estilizar as mensagens como quiser.

PASSO 2: EXISTÊNCIA

Nesse passo nós iremos verificar se existem comentários registrados para o determinado artigo.
Iremos também criar uma paginação e apresentar mensagens de existência dos comentários.

Copiem o código abaixo e colem dentro do arquivo comments.php.

ANALISANDO O CÓDIGO

Iremos analisar somente os códigos PHP que realmente fazem diferença, mas lembrem-se que a parte em HTML também é muito importante e deve ter sua sintaxe correta.

Trecho Descrição
<?php if ( have_comments() ) : ?></code> Aqui nós estamos realizando uma condição para verificar se exintem comentários
<?php wp_list_comments('...'); ?> A função wp_list_comments() exibe todos os comentários para um post ou página com base em uma variedade de parâmetros, incluindo os estabelecidos na área de administração. Nós adicionamos alguns argumentos à essa função (avatar_size, type e callbak). Iremos falar deles posteriormente, pois irão fazer a diferença durante o processo de criação dete tutorial. Apenas guardem essa informação.
<?php paginate_comments_links(); ?> Adiciona a paginação dos comentários.

ATIVANDO A PAGINAÇÃO NOS COMENTÁRIOS

Para que a paginação nos comentários funcione, é necessário que você faça algumas configurações no menu do adm do WordPress Configurações > Discussão.

Ative o checkbox Dividir comentários em páginas em …...

Sem essa configuração, a paginação não irá funcionar, ok?

Nesta página você também pode realizar outras configurações que irão ser destinadas aos comentários, como: Moderação, ordem dos comentários, entre outros.
pagina-discussao

NOSSO CÓDIGO ATÉ AGORA


PASSO 3: FUNÇÃO

Na função wp_lis_comments() que codificamos no passo 2, informamos alguns argumentos: “avatar_size”, “type” e “callbak”. Esses argumentos fazem toda a diferença durante esse processo, pois com eles nós estamos decidindo:

  • avatar_size: tamanho da imagem do avatar do autor do comentário.
  • type: o tipo de comentário, que no nosso caso é “comment”. Existem outros tipos (trackback, ping, ping back, pings).
  • callback: Esse argumento, nete momento, é o que vai fazer a diferença. Ele chama uma função chamada “mytheme_comment”. Essa função nós iremos criar agora neste passo. É com ela que iremos criar a estrutura dos comentários.

Como disse acima, a função mytheme_comment, que pode receber o nome que vocês quiseres, é que vai estruturar os comentários.
O código desta função é um pouco extenso, portanto deixei diversos comentários para facilitar a vida de vocês.

Copiem o código abaixo e colem no arquivo functions.php.

Somente uma consideração antes de colar: a linha 1 <?php e a ultima linha devem ser excluídas caso você esteja adicionando todas as funções do documento dentro de uma só abertura php <?php ?>. Caso você esteja criando cada função dentro de uma chamada php, deixe o código como está.

Salvem o arquivo e abram seu site em algum comentário para analisar como se encontra a área de comentários. Ela deve apresentar a mensagem “Não existem comentários.” caso vocês ainda não tenham criado nenhuma comentário, é claro!

PASSO 4: FORMULÁRIO

Existem 2 formas de trabalharmos com a criação do formulário para inserção de comentários no tema.

FORMA 1 – FORM PADRÃO DO WORDPRESS

Você pode utilizar o modelo padrão do WordPress, apenas inserindo o código abaixo em seu arquivo comments.php antes do fechamento da div#comments:

form-comentario-padrao-wordpress

Existe a possibilidade de adicionarmos alguns argumentos para alterarmos a forma de apresentação, como: modificar o título do formulário, alterar a nomenclatura do botão de comentar, do botão de responder, cancelar e etc.

Abaixo apresento os valores default desses argumentos:

Caso queria alterar alguma coisa, basta que você informe dessa forma:

Caso queira saber mais sobre essa função, acesse: http://codex.wordpress.org/Function_Reference/comment_form

FORMA 2 – CRIANDO SEU PRÓPRIO FORM

Nesta forma você mesmo pode criar um formulário para inserção dos comentários, substituindo o padrão do wordpress.

Essa forma de ser fazer o formulário é mais trabalhosa, mas você tem a liberdade de criar do jeito que quiser, e isso que é show.

Caso queiram utilizar esse método de trabalho, copiem o código abaixo em seu arquivo comments.php antes do fechamento da div#comments.

ANALISANDO O CÓDIGO

Trecho Descrição
<?php if ( comments_open() ) : ?> Aqui nós estamos realizando uma condição para verificar se os comentários estão permitidos para o artigo. Existe a possibilidade de vetarmos o uso de comentários em determinados artigos, portanto precisamos verificar se eles estão permitidos.
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php"...> Aqui eu quero destacar o “action”. Nele nós estamos fazendo referência ao arquivo “wp-comments-post.php”. Esse arquivo é responsável por cadastrar, editar, excluir os posts. E também vamos dar destaque ao ID do formulário. É necessário que o seu ID seja “commentform”.
<?php if ( $user_ID ) : ?> Aqui nós estamos verificando se o usuário que estar a comentar é um usuário ativo do site, ou seja, está logado. Caso ele esteja logado, será apresentado uma mensagem informando que ele está logado como “fulano de tal” e não será apresentado o formulário completo, somente o campo de texto. Caso não seja um usuário ativo, será apresentado o formulário completo, com todos os campos (Nome, Email, Website, Mensagem)
<?php comment_id_fields(); ?> Essa função cria 2 hidden inputs (campos escondidos) que possuem a função de armazenar os valores (comment_post_ID, comment_parent).
<?php do_action('comment_form', $post->ID); ?> Aqui nós estamos adicionando a ação de submeter o formulário que possua o id commentform (id padrão do wordpress)
<?php cancel_comment_reply_link('Cancelar Resposta'); ?> Aqui nós estamos adicionando o link que será utilizado para cancelar o processo de resposta de algum comentário.

QUANTIDADE DE COMENTÁRIOS

Agora que já temos nosso template de comentários funcionando, vamos adicionar a quantidade de comentários cadastrados no artigo.

Adicione o código abaixo logo dentro do header e acima do h3 no arquivo comments.php.

CÓDIGO FINAL

Agora veja o resultado final.

comentarios-wordpress-final

PASSO 5: CSS

Agora precisamos somente estilizar nossos comentários para que eles fiquem conforme a imahem acima.

Copiem o código abaixo e colem dentro do arquivo style.css.

FINALIZANDO

Bom galera, eu acho que o artigo ficou bem legal e com bastante informação.
Para que vocês não se confundam, leiam e releiam este artigo. Ele é bastante importante e um ponto que gera muitas dúvidas.

Espero realmente que vocês tenham gostado.

Não deixem de comentar e compartilhar, ok?

Muito obrigado e até a próxima.

TAGS: , ,

AUTOR: Gabriel Costa
Gabriel Costa

Trabalho com desenvolvimento web a mais de 5 anos e atualmente desenvolvo projetos para órgãos do governo federal na área de interface digital, programação e design. Tenho parceria na empresa AidWeb - Desenvolvimento web e trabalho desenvolvendo websites e protótipos de sistemas acessíveis e responsíveis.

ARTIGOS RELACIONADOS

0

Deixe o seu comentário!

Autentificado como . Sair desta conta »

<pre lang="aqui vai o tipo de linguagem (js, html, css, php...)">
   Agora você posta seu código a vontade!
</pre> //aqui você fecha o código