Como adicionar contador aos blocos Listing Grid e Dynamic Table usando o complemento Listing Сounter em Gutenberg

Baixando o complemento

Para baixar o código deste complemento gratuitamente no GitHub, siga o link jet-engine-list-counter-callback-code.

Para baixar e instalar o complemento, abra a página jet-engine-list-counter-callback e pressione o botão “ Código ”. Escolha a guia Baixar Zip no menu suspenso.

Instalando o complemento

Abra a guia Plugins do painel do WordPress e pressione o botão “ Adicionar novo ”. Instale e ative o complemento JetEngine DevTools Listing Counter.

Leia Como instalar plug-ins Jet por meio do painel do WordPress neste tutorial.

Abra a guia JetEngine > QueryBuilder do painel do WordPress . Pressione o botão “ Adicionar novo ” para criar uma nova consulta com as seguintes configurações:

• digite o nome da consulta no campo Nome (aqui, Consulta para contador de listagem );
• escolha a opção Consulta de Postagens no menu suspenso Tipo de Consulta ;
• escolha o CPT do anúncio (aqui, Imóveis ) ou da tabela dinâmica (aqui, Imóveis ).

Se necessário, adicione outras configurações à consulta.

Este tutorial detalha como usar o Query Builder . 

Adicionando retornos de chamada a campos dinâmicos

Abra a página com o item de Listagem pré-criado com CPTs (aqui, Imobiliário ) ao qual deseja adicionar números. Adicione um novo bloco de campo dinâmico à página: arraste e solte o bloco de campo dinâmico onde deseja exibir os números.

Desenrole as Configurações do bloco Campo Dinâmico e mova o botão de alternância de saída do campo Filtro . Se ativado, essa alternância ativa o menu suspenso Retorno de chamada para selecionar a opção de contador da listagem e o menu suspenso Selecionar consulta (aqui, Consultar contador de listagem).

Além disso, os usuários podem aplicar configurações elegantes aos números.

Leia Como usar o bloco de campo dinâmico neste tutorial.

Adicionando a consulta personalizada ao bloco Listing Grid

Abra uma página com o bloco Listing Grid adicionado. Especifique o CPT que você precisa exibir (aqui, Real_estate ).

Leia Como construir modelos de listagem em Gutenberg neste tutorial.

Navegue até a guia Consulta personalizada do bloco Listing Grid . Se ativado, a alternância Usar consulta personalizada ativa o menu suspenso Selecionar consulta , permitindo selecionar a consulta necessária (aqui, a consulta criada anteriormente para a consulta do contador de listagem).

A página construída tem a seguinte aparência no front end:

Criação de uma tabela dinâmica

Para criar uma tabela dinâmica para exibir CPTs como um todo ou alguns campos deles, navegue até a guia JetEngine > Tables Builder do painel do WordPress .

Adicione uma nova tabela dinâmica (pressione o botão “ Adicionar Nova Tabela ”) com as seguintes configurações:

• digite o nome da tabela no campo Nome da aba Configurações Gerais ;
• escolha a consulta no menu suspenso Consulta de dados (aqui, Consulta para contador de listagem ).

Configurações da mesa

Para adicionar o contador, crie uma nova coluna especialmente destinada ao contador. 

Navegue até a aba Colunas da Tabela e adicione as colunas para exibir os campos dinâmicos ou os CPTs.

Digite seu nome (aqui, index ) no campo Nome da coluna e ative a alternância Filtrar saída da coluna . Escolha o retorno de chamada do contador de listagens no menu suspenso Filtrar retorno de chamada e o contador Consulta para listagem no menu suspenso Selecionar consulta .

Leia a visão geral do WordPress Dynamic Tables Builder detalhando como construir tabelas dinâmicas em Gutenberg.

Clique no botão “ Criar Tabela ” para criar a tabela.

Adicionando a tabela dinâmica a uma página

Abra a página ou postagem onde deseja exibir a tabela. Encontre o bloco Tabela Dinâmica . Escolha a tabela construída no menu suspenso  Selecionar tabela .

A tabela construída tem a seguinte aparência no front-end: