Como criar um modelo de listagem de tipo de conteúdo personalizado no Elementor

Vamos primeiro verificar um tipo de conteúdo personalizado para o qual um modelo de listagem pode ser criado.

Vá para JetEngine > Tipos de conteúdo personalizados e veja se existe algum CCT existente. Se você não possui nenhum CCT, crie um.

Revisaremos um tipo de conteúdo personalizado existente para garantir que tenhamos campos personalizados para saída.

Portanto, adicionamos esses quatro metacampos para exibi-los posteriormente na grade de listagem. Não se esqueça de clicar no botão “Atualizar” para salvar as alterações.

Você também precisa preencher esses campos personalizados na página de edição do item CCT para que haja conteúdo para mostrar.

Não se esqueça de salvar o item CCT após editá-lo.

Agora podemos ir para JetEngine > Listagens e pressionar o botão  “Adicionar Novo” .

Selecione a opção “Tipo de conteúdo personalizado” como fonte da listagem e escolha um tipo de conteúdo para o qual deseja criar a listagem. Você também precisa escrever um nome de item de listagem e clicar no botão “Criar item de listagem” .

Quando estiver no editor, você pode adicionar o widget Campo Dinâmico para extrair dados do CCT.

A fonte deve ser “Dados pós-prazo/usuário/objeto”. No Object Field , você verá um bloco de campos do tipo de conteúdo personalizado necessário. 

Você pode adicionar vários widgets de campo dinâmico para gerar cada campo CCT.

Lembre-se de que alguns campos personalizados também precisam ter um retorno de chamada aplicado para exibir os dados.

Na captura de tela abaixo, você pode ver um campo Media , que armazena uma imagem por ID e tem o callback “Obter imagem por ID” ativado para mostrar a imagem em vez de apenas seu ID.

Um campo com um link pode ser gerado usando a opção Personalizar saída de campo . Adicionamos a tag HTML <a> para criar um link clicável.

Vejamos também outro exemplo. Pode haver um caso em que vários campos precisem ser gerados usando apenas um widget, caso você precise combinar valores.

Isso pode ser conseguido por meio de códigos de acesso porque vários códigos de acesso podem ser utilizados em apenas um widget.

Para criar um shortcode, você pode usar uma ferramenta chamada Shortcode Generator fornecida pelo plugin JetEngine .

Vá para JetEngine > JetEngine e entre na guia Shortcode Generator . As configurações do Gerador de Shortcode são as mesmas do widget Campo Dinâmico . Basta selecionar a fonte e o campo de objeto necessários .

Observe que o campo “Autor do item” tem o ID do usuário como valor. Portanto, também habilitamos a opção Filtrar saída do campo e aplicamos o retorno de chamada “Obter dados do usuário por ID” para transformar o ID do usuário em seu “Nome de exibição”. Depois disso, copiamos o shortcode que foi gerado no final da página.

Geramos um shortcode para os campos “Autor do item” e “Data de criação”. Usando o widget Editor de Texto , adicionamos os códigos de acesso de ambos os campos e escrevemos o texto necessário.

Depois de adicionar todos os campos necessários, o modelo de listagem pode ser salvo pressionando o botão “Atualizar” .

Vamos gerar o modelo de listagem em uma página para verificar o resultado.

Abra uma página ou modelo no editor Elementor e adicione o widget Listing Grid .

Selecione o modelo de listagem para CCT que acabou de ser criado. Em seguida, ajuste outras configurações na Grade de listagem, se necessário, e salve o modelo.

Prossiga para o front-end. A grade de listagem mostra os itens CCT exibindo os campos conforme configurados usando widgets dinâmicos e códigos de acesso.