Usando componentes em Query Loop ou Listing Grid

Crie um novo componente para CPT

Vá para o Painel do WordPress> JetEngine> guia Listagens/Componentes e clique no botão “ Adicionar Novo Componente ”.

No pop-up Configurar componente , insira o nome do componente (por exemplo, “Informações do usuário”) e selecione a visualização do componente (“Elementor”, “Tijolos”, “Madeira/Galho” ou “Blocos (Gutenberg)”).

No nosso exemplo, selecionamos a opção “Tijolos”.

Em seguida, pressione o botão “ Criar Componente ”.

Verifique este tutorial para aprender como adicionar metacampos ao usuário e exibir informações do usuário .

Para exibir alguns dados do usuário, usamos elementos dinâmicos .

Na página de edição, colocamos três elementos Dynamic Field . Para eles, definimos a fonte “Post/Term/User/Object Data” e os campos “Login”, “ID” e “Email” do objeto .

Além disso, habilitamos a opção Personalizar saída de campo para três campos dinâmicos e definimos o formato do campo (por exemplo, “E-mail: %s”).

Para saber como adicionar controles de  conteúdo  e  estilo  ao componente, vá para  Visão geral dos componentes .

Quando terminar, salve as configurações do componente.

Componente no Loop de Consulta

Para saber mais sobre o recurso Query Loop do tema Bricks, prossiga para este artigo.

Vá para Painel do WordPress> guia Páginas e crie uma nova página ou edite a existente no editor Bricks.

Aqui, pressione o ícone “ + ” para adicionar uma nova seção e clique no elemento Container na aba Estrutura à direita.

Na guia de configurações de CONTEÚDO do Container , ative a opção Usar loop de consulta e clique no ícone “ infinito ”.

No pop-up exibido, você pode alterar as configurações da consulta. Por exemplo, ajustamos o Tipo para “Postagens” e selecionamos a opção “Postagens” como Tipo de postagem , mas você pode definir outras opções se quiser usar outra fonte para postagens.

Para fechar o pop-up, clique na área além dele e preencha o Container com o Query Loop com o conteúdo necessário. Por exemplo, você pode usar Elementos Dinâmicos .

Por exemplo, colocamos esses elementos:

• Campo Dinâmico com a Fonte “Post/Term/User/Object Data” e o campo “Título” do Objeto ;
• Campo Dinâmico com a Fonte “Post/Termo/Usuário/Objeto Dados” e campo Objeto “Conteúdo” ;
• Imagem dinâmica com a fonte “Post thumbnail” .

No painel esquerdo, pesquise o componente recém-criado pelo nome e coloque-o na página de edição. No nosso caso, são as informações do usuário .

Na guia de configurações GERAIS , escolha a opção “Autor da postagem atual” para o campo Contexto do componente . 

Esteja ciente de que o primeiro item no Query Loop mostrará o usuário atual em vez do autor da postagem, mas funcionará conforme planejado no front end.

Agora, salve as configurações da página.

Abra a página no front end e verifique o resultado.

Componente na grade de listagem

Vá para o Painel do WordPress> JetEngine> guia Listagens/Componentes e clique no botão “ Adicionar novo item de listagem ”.

No pop-up Configurar item de listagem , escolhemos a fonte da listagem “Postagem” e “Postagens” no menu suspenso Do tipo de postagem , inserimos o nome do item da listagem e selecionamos a visualização da listagem (por exemplo, “Tijolos”).

Em seguida, pressione o botão “ Criar item de listagem ”.

Saiba mais sobre o modelo de listagem em Elementor , Gutenberg , Bricks e Timber/Twig .

Na página de edição, colocamos os seguintes elementos:

• Campo Dinâmico com a Fonte “Post/Term/User/Object Data” e o campo “Título” do Objeto ;
• Campo Dinâmico com a Fonte “Post/Termo/Usuário/Objeto Dados” e campo Objeto “Conteúdo” ;
• Imagem dinâmica com a fonte “Post thumbnail” .

No painel esquerdo, pesquise o componente recém-criado pelo nome e coloque-o na página de edição. No nosso caso, são as informações do usuário .

Abra a guia Configurações gerais e selecione a opção “Autor da postagem atual” para o campo Contexto do componente . 

Observe que o componente ainda mostrará as informações atuais do usuário — o contexto funcionará conforme planejado na página com Listing Grid .

Agora, salve as configurações do modelo de listagem.

Vá para Painel do WordPress> guia Páginas e crie uma nova página ou edite a existente.

Por exemplo, clicamos no botão “ Adicionar nova página ”, inserimos o título da página e clicamos no botão “ EDITAR COM TIJOLOS ”.

Arraste e solte o elemento , widget ou bloco Listing Grid (dependendo do construtor que você usa) na página de edição e defina o Listing criado recentemente . Personalize o elemento e a página. Em seguida, salve as alterações.

Isso é tudo. Agora você já sabe como utilizar componentes criados com o plugin JetEngine no Query Loop do tema Bricks ou Listing Grid no seu site WordPress.