Adicionando um formulário de comentários no seu Tema
Como prometido na lição passada, hoje você vai aprender a adicionar um formulário de comentários dentro do arquivo single.php do seu tema.
Habilitando comentários
No painel administrativo do WordPress, mais especificamente na lista de Posts (Posts > Todos os Posts):
Se você passar o cursor do mouse em cima do título de um post, verá que um grupo de links aparecerá, onde o link [Edição Rápida] estará presente:
Clicando nele, um novo bloco de edição relacionado aquele post vai se abrir:
Veja que por padrão, a opção Permitir Comentários está marcada. Isso significa que o WordPress permite que seus visitantes publiquem comentários a respeito da sua postagem.
Caso a sua postagem estiver desmarcada, significa que seu post não está apto para receber comentários.
Essa mesma opção pode ser encontrada na aba de discursão, quando você abre uma postagem por completo pelo painel:
Para seguir com o conteúdo desta lição, você precisa que pelo menos uma postagem publicada esteja apta para receber comentários, ok?
Permitindo comentários no single.php
Dentro do arquivo single.php, mais especificamente no final do loop:
<?php get_header(); ?>
<?php while(have_posts()): the_post(); ?>
<div class="conteudos"><!-- Imagina que aqui dentro está todos os seus códigos e Tags condicionais --></div>
<!-- Mais especificamente aqui no final.... -->
<?php endwhile; ?>
<?php get_footer(); ?>Onde está escrito <!-- Mais especificamente aqui no final.... -->, vamos criar uma verificação, para validar se é possível atribuir comentários a este post:
<?php
if(comments_open() || get_comments_number()){
comments_template();
}
?>comments_open(): Retorna um valor booleano, informando se aquele post está aberto para receber comentários ou não.
get_comments_number(): Retorna o valor da quantidade de comentários existentes no post atual.
comments_template(): Cria na tela um formulário de comentários padronizado, seguindo as especificações de layout definidas no arquivo comments.php.
No caso, nós não possuímos o arquivo comments.php, sendo assim precisamos criar 🙂
Criando o Comments.php
O arquivo comments.php, desempenha um papel crucial quando o assunto é exibição e gestão dos comentários nas páginas, e postagens do seu site.
É ele que será executado sempre quando chamarmos a função comments_template(), é como se o WordPress realizasse um include() ou require() do arquivo comments.php.
A criação de um arquivo como esse, não é lá uma tarefa fácil, visto que iremos fazer o uso de algumas tags condicionais e funções do próprio WordPress.
A primeira coisa que você precisa fazer é criar um arquivo chamado comments.php na raíz do seu tema, com o seguinte conteúdo:
<?php
/**
* The template for displaying the comemnts.
*
* The section of the post or page that includes the comments and the form.
*
* @package WordPress
* @subpackage WPMicilini
* @since WPMicilini 1.0
*/
?>Note que os comandos acima, representam a abertura das tags PHP com alguns comentários relacionados ao arquivo em si.
Diferente de outros arquivos, esses comentários não são lidos pelo WordPress, só servem para informar aos desenvolvedores do tema, a data da última atualização do mesmo, além de algumas informações adicionais.
O primeiro comando que os criadores de temas inserem nesse tipo de arquivo, é uma checagem que verifica se uma senha é necessária para visualizar a postagem, e se for o caso, interrompe a execução do código subsequente.
<?php
/**
* The template for displaying the comemnts.
*
* The section of the post or page that includes the comments and the form.
*
* @package WordPress
* @subpackage WPMicilini
* @since WPMicilini 1.0
*/
if ( post_password_required() )
return;
?>No comando acima, o post_password_required() verifica se é necessário uma senha para realizar comentários, e se este for o caso, ele não chega a executar os próximos comandos responsáveis por montar o layout dos comentários.
Logo abaixo do fechamento da tag do PHP, vamos precisar criar uma grande div que representa a seção dos comentários que estão relacionadas a postagem:
<div id="comentarios" class="area-comentarios">
<?php if ( have_comments() ) : ?>
<!-- Continue a lógica daqui... ->
<?php comment_form(); ?>
</div><!-- #comentários -->O comando have_comments() retorna a quantidade de comentários relacionados com a sua postagem, se não houver nenhum, o valor 0 é retornado e o bloco do If não é executado.
Continuando com a nossa lógica, precisamos criar os comandos necessários para carregar o conteúdo das postagens, para isso, dentro do if do have_comments() vamos inserir os seguintes comandos:
<!-- Início do Titulo da seção de comentários -->
<h2 class="titulo_comentario">
<?php echo "Comentários de [".get_the_title()."] - Total: ".get_comments_number(); ?>
</h2>
<!-- Fim do Titulo da seção de comentários -->
<!-- Inicio das Configurações das listagens dos comentários -->
<ol class="listagem-comentários">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 50,
));
?>
</ol>
<!-- Fim das Configurações das listagens dos comentários -->
<!-- Inicio do Suporte a navegação dos comentários -->
<?php
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
?>
<nav class="nav comentarios-nav">
<h1 class="nav-info">Navegação</h1>
<div class="nav-antigos"><?php previous_comments_link('Antigos'); ?></div>
<div class="nav-novos"><?php next_comments_link('Novos'); ?></div>
</nav>
<?php endif; ?>
<!-- Fim do Suporte a navegação dos comentários -->
<!-- Inicio da Verificação de comentários abertos/fechados -->
<?php if ( ! comments_open() && get_comments_number() ) : ?>
<p class="sem-comentarios">Os comentários estão fechados!</p>
<?php endif; ?>
<!-- Fim da Verificação de comentários abertos/fechados -->Dê início, você vê uma grande mistura de tags HTML com comandos PHP, mas fique tranquilo que vamos entender o que cada um faz alí 😁
No bloco de [Título da seção de comentários], nós temos um h2 que armazena o título da seção de comentários, onde fazemos uso de dois comandos principais do WordPress.
get_the_title(): Usado para retornar o título da sua postagem (ou página).
get_comments_number(): Usado para retornar a quantidade de comentários associado a postagem atual (ou página).
No bloco de [Configurações das listagens dos comentários], nós temos a tag ol que representa uma lista ordenada, onde ali dentro fazemos o uso de um dos comandos principais do WordPress.
wp_list_comments(): Este comando permite que você exiba uma lista de comentários em uma página ou na sua postagem. Ele é responsável por carregar uma estrutura em HTML onde contém todas as informações dos comentários relacionados a aquele post ou página.
Como visto no comando acima, ele dá suporte a personalizações por meio de um array:
<?php
if ( have_comments() ) :
wp_list_comments( array(
'avatar_size' => 50,
'style' => 'ol',
'type' => 'all',
'reply_text' => 'Responder',
'reverse_top_level' => false,
'per_page' => 10,
'max_depth' => 5,
) );
endif;
?>Vejamos agora, o que faz cada um dos parâmetros listados acimas fazem:
avatar_size: Define o tamanho do avatar do autor do comentário em pixels.
style: Especifica o estilo de exibição dos comentários. Podemos setar como 'ol' (ordem ordenada) ou se preferir 'ul' (lista não ordenada). O ideal é que o estilo informado neste parâmetro seja o mesmo da tag HTML superior ao uso deste comando (que é ol).
type: Este parâmetro permite que você filtre o tipo de comentários que serão exibidos. Pode ser 'all', 'comment', 'pingback', ou 'trackback'.
reply_text: Ao final de cada comentário carregado, vai existir um link em que podemos clicar para dar uma resposta, este parâmetro define o texto desse link.
reverse_top_level: Quando definido como true, inverte a ordem dos comentários de nível superior.
per_page: Define o número de comentários a serem exibidos por página. Muito útil quando estamos trabalhando com paginação.
max_depth: Define o número máximo de níveis de resposta encadeada que serão exibidos. Se definido como 0, os comentários encadeados serão desativados.
Quando falo sobre comentários encadeados, estou me referindo as respostas que um comentário pode receber.
No bloco [Suporte a navegação dos comentários], oferecemos uma paginação simples para que seu visitante possa percorrer entre os comentários.
get_comment_pages_count(): Função do WordPress que retorna o número total de páginas necessárias para exibir todos os comentários em uma postagem, levando em consideração a quantidade de comentários por página.
Nesse caso, este comando está intimamente ligado parâmetro per_page da função wp_list_comments().
Ele se faz necessário dentro do if para que possamos verificar se vamos mostrar a paginação ou não, pois dependendo do número total de comentários e o valor informado no per_page, não vale a pena ser mostrado, uma vez que todos os comentários já cabem dentro de uma postagem ou página.
get_option('page_comments'): Essa função determina se os comentários em páginas individuais estão ativados ou desativados no site.
Segundo a lógica do If, para que a paginação apareça, ambas as funções precisam retornar true.
Em seguida, nós temos tags HTML que representam uma paginação simples junto com as funções:
previous_comments_link(): No WordPress é usada para exibir um link que leva o usuário para a página anterior de comentários.
next_comments_link(): No WordPress é utilizada para exibir um link que leva o usuário para a próxima página de comentários.
Por fim, no bloco [Verificação de comentários abertos/fechados], temos um comando novo chamado de comments_open(), que verifica se os comentários estão abertos no post ou não.
É importante ressaltar que arquivo comments.php também pode ser afetado por plugins relacionados a comentários. Isso significa que existem plugins que são capazes de alterar a estrutura do HTML e PHP do arquivo, de modo a dar suporte a outras funcionalidades.
No final das contas, temos esse arquivo que representa o comments.php:
<?php
/**
* The template for displaying the comemnts.
*
* The section of the post or page that includes the comments and the form.
*
* @package WordPress
* @subpackage WPMicilini
* @since WPMicilini 1.0
*/
if ( post_password_required() )
return;
?>
<div id="comentarios" class="area-comentarios">
<?php if ( have_comments() ) : ?>
<!-- Início do Titulo da seção de comentários -->
<h2 class="titulo_comentario">
<?php echo "Comentários de [".get_the_title()."] - Total: ".get_comments_number(); ?>
</h2>
<!-- Fim do Titulo da seção de comentários -->
<!-- Inicio das Configurações das listagens dos comentários -->
<ol class="listagem-comentários">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 50,
));
?>
</ol>
<!-- Fim das Configurações das listagens dos comentários -->
<!-- Inicio do Suporte a navegação dos comentários -->
<?php
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
?>
<nav class="nav comentarios-nav">
<h1 class="nav-info">Navegação</h1>
<div class="nav-antigos"><?php previous_comments_link('Antigos'); ?></div>
<div class="nav-novos"><?php next_comments_link('Novos'); ?></div>
</nav>
<?php endif; ?>
<!-- Fim do Suporte a navegação dos comentários -->
<!-- Inicio da Verificação de comentários abertos/fechados -->
<?php if ( ! comments_open() && get_comments_number() ) : ?>
<p class="sem-comentarios">Os comentários estão fechados!</p>
<?php endif; ?>
<!-- Fim da Verificação de comentários abertos/fechados -->
<?php endif; // have_comments() ?>
<?php comment_form(); ?>
</div><!-- #comments -->Ah, e não se esqueça de chamar a função comment_form() antes de fechar a div que encapsula todos os comentários.
Essa função é responsável por criar o layout do formulário de comentários, contendo todos os campos necessários 😄
Configurações de Discussão
No painel do wordpress, você consegue alterar de maneira geral algumas configurações relacionadas a comentários dentro do seu tema.
Com o painel aberto, no menu esquerdo vá em Configurações > Discussão:
Ali dentro, você terá acesso a diversas configurações relacionadas as discussão do seu tema, vale a pena dar uma olhada 👀
Conclusão
Nesta lição você aprendeu um marco bastante importante: Oferecer suporte a comentários dentro do seu tema.
Na próxima lição, continuaremos nossa jornada de aprendizado passando por todos os modelos de temas disponíveis no WordPress.
Até lá 🤓