Como criar um sistema de comentários personalizado

Crie um tipo de conteúdo personalizado para armazenar comentários

Navegue até WordPress Dashboard > JetEngine > Custom Content Types e crie um novo CCT clicando no botão “ Add New” . Este tipo de conteúdo personalizado (CCT) armazenará a lista de comentários.

Os CCTs são semelhantes aos CPTs , mas apresentam duas diferenças principais. Em primeiro lugar, os itens do tipo de conteúdo personalizado não possuem uma única página . Em segundo lugar, eles têm uma abordagem única ao armazenamento de dados. Isso torna os CCTs uma escolha ideal para armazenar comentários porque novos comentários não afetarão a velocidade de carregamento do site.

Você encontrará mais informações sobre este tópico em nosso artigo sobre Tipo de conteúdo personalizado: nova abordagem de armazenamento de dados . Na mesma tela de edição, role para baixo até a guia Campo . Adicione os campos necessários para armazenar os dados dos comentários. Adicione um campo Texto para manter o título do comentário e um campo WYSIWYG para armazenar o corpo do comentário.

Adicione um exemplo de comentário ao CCT

Após a edição, salve o CCT pressionando o botão “ Atualizar tipo de conteúdo ” . Em seguida, encontre o CCT na barra lateral esquerda e clique nele.

” alt=”adicionando um novo item ao tipo de conteúdo personalizado” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/adding_new_comment_cct_item_2x.png” />Adicione um novo item ao CCT e preencha os campos vazios. Vamos criar um comentário de teste. 

” alt=”adicionando um item de amostra ao cct” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/adding_a_sample_comment_2x.png” />

Crie um modelo de item de listagem para o CCT

Para projetar o layout do comentário, crie um modelo de item de listagem . No modelo Item de listagem, crie o design de um item de comentário e exiba-o com a ajuda do widget Grade de listagem . 

Para criar um novo modelo de item de listagem , vá para Painel do WordPress > JetEngine > Listagem e crie uma nova listagem.

” alt=”criando um modelo de item de listagem para comentários” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/creating_listing_for_comments_2x.png” />Com a ajuda do widget ou bloco de campo dinâmico , você pode exibir os dados do comentário. Escolha “Dados pós-prazo/usuário/objeto” como fonte e selecione o campo necessário do CCT no menu suspenso Campo do objeto .

” alt=”projetando os comentários no elementor” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/displaying_comment_information_2x.png” />A configuração será a mesma se você usar o editor Gutenberg.

Adicione informações sobre o autor do comentário

Não basta exibir apenas o título, e o corpo do comentário também deve ser incluído, pois informações sobre o autor do comentário. 

Arraste e solte um novo widget ou bloco de campo dinâmico no editor para exibir os dados do usuário. Escolha “Dados pós-prazo/usuário/objeto” como fonte . Depois disso, abra o menu suspenso Campo de objeto para ver a lista de opções disponíveis para dados do usuário. Por exemplo, imprima o apelido do usuário. Em seguida, selecione o campo de usuário necessário, role para baixo até o menu suspenso Contexto e selecione “Autor atual do item CCT” na lista. Desta forma, as informações do usuário serão consultadas pelo autor do comentário atual.

O mesmo fluxo de trabalho deve ser repetido se você estiver usando Gutenberg.

Exiba a foto do perfil do autor do comentário. Para isso, use o widget Dynamic Image no construtor de páginas Elementor ou o bloco Dynamic Image em Gutenberg. 

Observe que você não está limitado aos campos de usuário padrão do WordPress. Se você criou uma Meta Box para os usuários armazenarem informações adicionais do usuário, poderá exibi-la por meio da fonte “Meta Data” do widget Campo Dinâmico . Se você ainda não tem uma Meta Box de usuário, você pode criar uma seguindo nosso guia sobre Como aplicar Meta Boxes a usuários . 

Após projetar o modelo do Item de Listagem, clique em “ Atualizar ” para salvar as alterações e retornar ao Painel do WordPress .

Criar uma relação entre a CPT e a CCT

Para vincular os novos comentários ao objeto comentado, crie uma relação entre o Tipo de Post Personalizado e o Tipo de Conteúdo Personalizado. A relação vinculará um comentário à postagem sob a qual o comentário foi deixado. 

Vá para WordPress Dashboard > JetEngine > Relationships e pressione o botão “ Add New ” para criar uma relação. O tutorial Itens de tipo de conteúdo personalizado relacionados fornece uma visão geral completa das configurações.

” alt=”criando uma relação entre as postagens e os comentários” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/relation_tours_to_comments_2x.png” />Neste caso, defina os comentários como objeto Filho e os CPT (os posts que terão esse sistema de comentários) como objeto Pai . O tipo de relação deve ser definido como “Um para muitos” porque uma postagem deve ter vários comentários. 

Clique no botão “ Adicionar relação ” para salvar as alterações.

Crie uma consulta personalizada com a macro Itens Relacionados

Para exibir apenas comentários relacionados na postagem, crie uma consulta personalizada na ferramenta Query Builder do plugin JetEngine . Siga para Painel do WordPress > JetEngine > Query Builder > Adicionar novo arquivo . 

Em primeiro lugar, dê um nome a uma consulta personalizada e escolha “ Consulta de tipo de conteúdo personalizado ” como Tipo de consulta . Role para baixo para selecionar o CCT apropriado no menu suspenso Do tipo de conteúdo . Defina “Publicar” no campo Status para mostrar apenas os comentários publicados no front end.

” alt=”criando uma consulta personalizada para cct” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/query_related_comments_p1_2x.png” />Na seção Ordenar e ordenar por , clique em “ Adicionar novo parâmetro de classificação ” para ordenar os comentários por data.

Depois disso, adicione um novo item na seção Consulta para consultar comentários por postagem relacionada. Use a configuração descrita no guia Macros para relações com WordPress .

A macro “Itens Relacionados” nos ajudará a obter itens relacionados da postagem atual. No menu suspenso Da relação , selecione a nova relação; na lista Do objeto , escolha “Objeto filho” para obter a lista de comentários filhos na página da postagem atual; para o campo ID do objeto inicial de , deixe a opção padrão “ID do objeto atual” – isso puxará o ID da postagem atual. 

Por fim, pressione o botão “ Aplicar ” e atualize a consulta.

Produza os comentários relacionados na página de postagem única

Agora é hora de exibir os comentários. Se você planeja adicionar o sistema de comentários a um tipo de postagem personalizada , vá para o modelo de postagem única ou para a tela de edição de uma única postagem. Abra-o com o editor Elementor ou Gutenberg. Encontre a seção no layout da sua postagem que deve conter os comentários da postagem e coloque o widget ou bloco Listing Grid nesta seção.

Para este widget Listing Grid , selecione o modelo Listing Item criado na Etapa 3. Defina o Número das Colunas como “1” para que cada novo comentário apareça em uma nova linha. 

Na guia Configurações de conteúdo do widget Grade de listagem , role para baixo até a guia Consulta personalizada e aplique a consulta personalizada criada durante a Etapa 6.

É perfeitamente normal que haja uma mensagem “Nenhum dado foi encontrado” – ainda não há comentários relacionados. Lembre-se que você pode alterar o texto da mensagem na aba Geral das configurações.

No editor Gutenberg, siga a mesma configuração para o bloco Listing Grid .

Não se esqueça de salvar as alterações.

Projete o layout do formulário no JetFormBuilder

Vá para Painel do WordPress > JetFormBuilder > Formulários > Adicionar novo arquivo . O formulário que vamos criar irá postar um novo item CCT (comentário) e vinculá-lo ao post atual com a relação. 

Primeiramente, vamos projetar o layout do formulário. Neste exemplo, o formulário para envio de comentários conterá um campo Texto para o título do comentário, um campo WYSIWYG para o corpo do comentário e algumas informações sobre o autor do comentário.

Exiba a foto do perfil do usuário conectado no momento no formulário. Adicione um bloco de imagem dinâmica à área de edição, selecione o campo de usuário necessário e defina o contexto como “Usuário atual (global)”. 

Adicione quantos tipos de campo e elementos de bloco forem necessários para o seu caso. Se você ainda não está familiarizado com os formulários do JetFormBuilder , é recomendável dar uma olhada na Visão geral do JetFormBuilder .

Adicionar a ação Inserir/Atualizar item de tipo de conteúdo personalizado

Quando terminar de editar o layout do formulário, abra a guia JetForm na barra lateral direita e role para baixo até a guia Ações pós-envio . Pressione o botão “ Nova Ação ” para adicionar uma nova ação ao formulário. Selecione a ação “Inserir/atualizar item de tipo de conteúdo personalizado” no menu suspenso.

Em seguida, clique no ícone em forma de lápis para editar a ação.

Defina o CCT necessário no campo Tipo de conteúdo . Existem duas opções para o Status do Item , “ Publicar” e “Rascunho”. Caso queira aprovar os comentários manualmente, vá para a opção “Rascunho”. Por fim, mapeie os campos do formulário com seus respectivos metacampos CCT na seção Mapa de Campos . Certifique-se de deixar o menu suspenso próximo ao campo post_id em branco. 

Pressione o botão “ Atualizar ” para salvar as alterações e retornar à tela de edição. 

Adicione uma ação Enviar e-mail para notificar o administrador sobre o novo comentário.

Adicione a ação Conectar Itens de Relação

Agora, implemente uma lógica conectando o item CCT criado com a postagem atual. 

Para isso, adicione uma nova ação pós-envio – Conectar itens de relação . 

Pressione o ícone em forma de lápis para editar a ação Conectar itens de relação .

Para o campo Relação , selecione a relação que foi criada anteriormente. Para o campo ID do item pai , selecione o campo de formulário “post_id”. Como o campo “post_id” tem um valor “Current Post ID”, a postagem atual será definida como o pai relacionado do item CCT recém-criado. Para o campo ID do item filho , selecione a opção “inserted_cct_slug ” . Em seguida, defina o Contexto de Atualização como “Estamos atualizando itens filhos para o objeto pai”; defina o campo Como armazenar novos itens como “Anexar novos itens a itens relacionados já existentes”. Agora, esta ação pós-envio relacionará o novo comentário à postagem que foi comentada. 

Não se esqueça de pressionar o botão “ Atualizar ” para implementar as alterações e retornar à tela principal de edição. Abra a guia JetForm na barra lateral direita e desdobre a guia Configurações do formulário . Defina o tipo de envio do formulário como “Recarregar página”.

Depois disso, salve o formulário.

Adicione o formulário à página

Vá para o modelo de postagem única ou para a tela de edição de uma única postagem que deve conter o sistema de comentários. Abra-o com o editor Elementor ou Gutenberg. Encontre a seção no layout da sua postagem que deve conter os comentários da postagem e coloque o widget ou bloco JetForm dentro dela.

Selecione o formulário criado e defina o tipo de envio do widget como “Recarregar página”.

Prossiga para as configurações de estilo para finalizar o design do formulário. 

Se você estiver trabalhando em Gutenberg, adicione o bloco JetForm à área de edição e selecione o formulário criado; defina o tipo de envio como “Recarregar página”.

Adicionar regras de visibilidade dinâmica

Use a visibilidade dinâmica para ocultar o formulário para usuários convidados. Para configurar as condições de visibilidade no editor Elementor, selecione o widget JetForm e prossiga para a aba Configurações avançadas . Role para baixo até a seção Visibilidade Dinâmica e desdobre-a. Ative as condições de visibilidade dinâmica. 

Em seguida, adicione um novo tipo de condição de visibilidade – “Mostrar elemento se a condição for atendida”. Adicione um novo item de condição e selecione a opção “Usuário conectado” na seção Usuário da lista suspensa.

Para adicionar condições de visibilidade no editor Gutenberg, selecione o bloco JetForm em Gutenberg. Haverá um ícone em forma de olho na barra de ferramentas na parte superior do bloco – clique nele.

Adicione um novo tipo de condição de visibilidade – “Mostrar elemento se a condição for atendida”. Adicione um novo item de condição e selecione a opção “Usuário conectado” na seção Usuário da lista suspensa.

Agora, o formulário será exibido apenas para usuários logados.

Confira o resultado

Vá para a página inicial da postagem única e encontre o formulário. Tente enviar um novo comentário.