Como tornar seu componente dinâmico
Crie um novo componente com informações do usuário
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 primeira coluna, adicionamos a Imagem Dinâmica e selecionamos o metacampo personalizado de mídia “Avatar do usuário” como Fonte . Além disso, definimos o tamanho da imagem dinâmica como “Miniatura”.
Na segunda coluna, colocamos três elementos do Campo Dinâmico . 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”).
Por enquanto, não especificamos o contexto do componente, portanto, por padrão, para usuários, ele sempre obterá informações sobre o usuário atual. Alteraremos o contexto ao colocar o componente em páginas ou modelos diferentes.
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 na listagem de usuários
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 , escolha a fonte de listagem “Usuários” , insira o nome do item de listagem e selecione a visualização de 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 .
No editor, pesquise o componente criado recentemente pelo seu nome no painel esquerdo 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 “Usuário atual (para escopo atual)” para o campo Contexto do componente . Em seguida, 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 e salve as alterações.
Componente na página de postagem ou listagem de postagem
Você deve usar o contexto “Autor da postagem atual” se quiser colocar um cartão de autor em uma página de postagem ou em uma lista de postagens.
Para aprender como criar uma página de postagem única no Elementor ou Gutenberg, prossiga para o tutorial Como criar um modelo de página de postagem única no WordPress .
Para aprender como criar um modelo de postagem única com o construtor Bricks, vá para o tutorial explicado sobre postagem única e noções básicas de arquivamento do Bricks Builder .
Por exemplo, vamos para Painel do WordPress > Bricks > Modelos e clicamos no botão “ Editar com Bricks ” no modelo de postagem única pré-fabricado.
Em seguida, procuramos o componente Informações do usuário no painel esquerdo.
Colocamos o componente na página de edição do modelo. O contexto do componente “Objeto padrão” mostra as informações do usuário atual, então definimos o “Autor da postagem atual”. Agora, mostra as informações do autor da postagem.
Depois disso, as alterações podem ser salvas.
Componente na página de perfil de usuário público
Para obter mais informações, navegue até o tutorial Como configurar uma página pública de usuário único .
Queremos colocar o componente no modelo de subpágina de perfil de usuário, então prosseguimos para o painel do WordPress > JetEngine > guia Listagens/Componentes e clicamos no botão “ Adicionar novo item de listagem ”.
No pop-up Configurar item de listagem , escolhemos a fonte da listagem “Usuários” , inserimos o nome do item da listagem (por exemplo, “Informações do perfil”) e selecionamos a visualização da listagem (por exemplo, “Tijolos”).
Em seguida, pressionamos o botão “ Criar item de listagem ”.
Colocamos o componente na página de edição ( User info , no nosso caso). Como Contexto do Componente , selecionamos a opção “Usuário Consultado” e salvamos as configurações.
Em seguida, vamos para o Painel do WordPress> Construtor de perfil> guia Página do usuário e clicamos no botão “ + Adicionar nova subpágina ”.
No novo item repetidor, adicionamos Title e Slug e definimos o item de listagem JetEngine recém-criado como Template .
Depois, clicamos no botão “ Salvar ”.
Abra a página de perfil de qualquer usuário no front-end. Ele mostra as informações do usuário necessário.
Isso é tudo. Agora você sabe como ajustar o contexto de um componente inteiro com o plugin JetEngine WordPress.