Criação de página de conta de usuário com diferentes estruturas de painel
Qual é a diferença entre os modos de conteúdo e modelo de reescrita?
Com o modo de modelo “Conteúdo” , você precisa definir o widget Menu de perfil uma vez na página Conta. O menu Perfil exibe os títulos dos modelos de subpágina definidos para a página Conta com o Profile Builder. O conteúdo será exibido dinamicamente com o widget Conteúdo da subpágina do perfil quando os usuários clicarem nos itens de menu correspondentes.
Com o modo de modelo “Reescrever” , a página é reescrita com o conteúdo dos modelos. Se quiser adicionar um menu, você precisa colocar o widget Menu de perfil nos modelos. Você pode personalizar modelos de maneira diferente: você pode colocar o Menu de Perfil em locais diferentes em modelos diferentes e pode decidir não adicionar o Menu de Perfil a alguns modelos.
Ative o Construtor de Perfil
Antes de começar, vá para o Painel do WordPress> JetEngine> guia JetEngine, ative a alternância do Profile Builder na seção Módulos padrão e clique no botão “Salvar” . Espere até que a página seja recarregada.
Modo de modelo de conteúdo
Crie a página da conta
Siga o Painel do WordPress > Páginas > Adicionar novo caminho. Dê um nome à página e clique no botão “Publicar” . Por enquanto, deixe a página vazia.
Crie as subpáginas para a página Conta com o modo de modelo “Conteúdo”
A página Conta conterá o Menu Perfil , permitindo aos usuários clicar e acessar diversas subpáginas.
Os modelos de subpágina podem conter o seguinte conteúdo:
- Exibindo as informações do usuário;
- Exibindo o formulário “ Atualizar conta de usuário ”;
- Exibindo formulários “Criar postagem” e “Editar postagem” ;
- Exibindo os itens favoritos do usuário. Para saber mais sobre isso, vá para o tutorial Como criar uma página de favoritos usando o módulo de armazenamento de dados ;
- Exibindo os comentários recentes do usuário ;
- Exibindo os itens reservados do usuário .
Você pode criar modelos de subpágina com itens de listagem Elementor ou JetEngine .
Crie um modelo de subpágina com um formulário
Crie um modelo com Elementor
Se você decidir criar modelos com Elementor, vá para a guia Modelos na guia Elementor no painel do WordPress .
Pressione o botão “Adicionar novo” . Escolha o tipo de modelo “Página” e insira o nome . Em seguida, clique no botão “Criar modelo” .
No editor Elementor, preencha o template com o conteúdo necessário. Por exemplo, coloquei o formulário JetFormBuilder usando o widget JetForm .
Ao terminar de personalizar o modelo, clique no botão “Atualizar” .
Crie quantos modelos você precisar.
Crie um item de listagem JetEngine
Se você decidir criar um item de listagem JetEngine , vá para JetEngine > guia Listagens e pressione o botão “Adicionar Novo” .
No pop-up Configurar item de listagem , selecione a fonte de listagem “Usuários” , insira o nome do item de listagem , escolha a visualização de listagem “Elementor” e clique no botão “Criar item de listagem” .
Preencha o modelo com o conteúdo e clique no botão “Atualizar” .
Crie quantos itens você precisar.
” alt=”listando o item como uma subpágina de perfil” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/listing-item-as-a-profile-subpage.png” />
Como exibir informações do usuário
Em primeiro lugar, crie a Meta Box para os usuários. Informações mais detalhadas podem ser encontradas no tutorial Como aplicar Meta Boxes aos usuários .
” alt=”metacaixa para usuários” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-box-for-users.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-box-for-users.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-box-for-users-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-box-for-users-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-box-for-users-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-box-for-users-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-box-for-users-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Além disso, adicione alguns metacampos personalizados , por exemplo, apelido do usuário, nome e sobrenome, e-mail, telefone celular (campos de texto), avatar do usuário (campo Mídia), aniversário (campo Data), resumo profissional (campo WYSIWYG), experiência ( campo numérico), idioma (campo caixa de seleção).
” alt=”metacampos na metacaixa do usuário” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-fields-in-user-meta-box.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-fields-in-user-meta-box.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-fields-in-user-meta-box-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-fields-in-user-meta-box-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-fields-in-user-meta-box-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-fields-in-user-meta-box-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/meta-fields-in-user-meta-box-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Para exibir as habilidades profissionais do usuário, criamos um metacampo com o tipo de campo “Repetidor” e o rótulo “Habilidades” . Em seguida, clicamos no botão “New Repeater Field” para criar um novo campo dentro do campo Repeater, inserimos o Label e escolhemos o “Select” Type .
” alt=”selecione o campo dentro do campo repetidor” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-inside-the-repeater-field.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-inside-the-repeater-field.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-inside-the-repeater-field-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-inside-the-repeater-field-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-inside-the-repeater-field-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-inside-the-repeater-field-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-inside-the-repeater-field-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Ao clicar no botão “Nova opção de campo” , você pode adicionar opções ao campo Selecionar manualmente.
” alt=”adicionando opções ao campo de seleção manualmente” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/adding-options-to-the-select-field-manually.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/adding-options-to-the-select-field-manually.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/adding-options-to-the-select-field-manually-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/adding-options-to-the-select-field-manually-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/adding-options-to-the-select-field-manually-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/adding-options-to-the-select-field-manually-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/adding-options-to-the-select-field-manually-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Além disso, você pode ativar as opções Obter no glossário e selecionar o glossário necessário no menu suspenso.
Se você criar opções manualmente, poderá usá-las uma vez no campo Selecionar atual. A funcionalidade Glossário permite criar uma lista de itens com rótulos e valores e utilizá-la quantas vezes precisar.
Para criar um Glossário, siga o caminho JetEngine > JetEngine > Glossaries . Saiba mais sobre as configurações do glossário na Visão geral dos glossários .
Apertamos o botão “+ Novo Glossário” , digitamos o Nome , selecionamos a fonte de dados “Definir itens manualmente” e definimos as opções necessárias clicando no botão “Novo campo” .
” alt=”lista de habilidades do glossário de motores a jato” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/jetengine-glossary-skill-list.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/jetengine-glossary-skill-list.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/jetengine-glossary-skill-list-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/jetengine-glossary-skill-list-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/jetengine-glossary-skill-list-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/jetengine-glossary-skill-list-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/jetengine-glossary-skill-list-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Após criar as opções, apertamos o botão “Salvar” .
Além disso, criamos o Glossário “Idiomas” .
” alt=”glossário de idiomas” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-glossary.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-glossary.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-glossary-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-glossary-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-glossary-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-glossary-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-glossary-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Retorne ao usuário Meta Box e defina o Glossário criado para o campo Selecionar.
” alt=”selecione o campo com o glossário predefinido” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-with-the-premade-glossary.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-with-the-premade-glossary.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-with-the-premade-glossary-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-with-the-premade-glossary-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-with-the-premade-glossary-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-with-the-premade-glossary-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/select-field-with-the-premade-glossary-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Além disso, definimos o glossário “Idioma” para o campo Checkbox.
” alt=”campo de caixa de seleção de idioma com o glossário predefinido” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-checkbox-field-with-the-premade-glossary.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-checkbox-field-with-the-premade-glossary.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-checkbox-field-with-the-premade-glossary-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-checkbox-field-with-the-premade-glossary-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-checkbox-field-with-the-premade-glossary-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-checkbox-field-with-the-premade-glossary-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/language-checkbox-field-with-the-premade-glossary-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Ao terminar de personalizar, clique no botão “Adicionar/Atualizar Meta Box” .
Para verificar onde os metacampos são exibidos, vá para Usuários > Perfil . Você pode ver os metacampos personalizados nos campos de perfil de usuário do WordPress que você pode preencher.
Para definir os campos do Repetidor, clique no botão “+ Adicionar Item” e selecione a opção necessária no menu suspenso. Repita esta etapa para adicionar quantas opções forem necessárias.
Quando terminar, pressione o botão “Atualizar perfil” .
Na guia Perfil , você mesmo pode preencher campos personalizados. Para preencher metacampos personalizados para outros usuários, vá para a guia Usuários > Todos os usuários e clique para editar um dos usuários necessários.
Agora, vamos criar uma subpágina com informações do usuário. Você pode criar um modelo com itens de listagem Elementor ou JetEngine; o processo de criação é descrito acima.
Atualmente, criaremos um modelo de subpágina por meio do Elementor Theme Builder.
Navegue até a guia Modelos> Modelos salvos e clique no botão “Adicionar novo” .
Selecione o tipo de modelo “Página”, insira o nome e pressione o botão “Criar modelo” .
No editor Elementor, adicionamos duas colunas na página e inserimos o widget Dynamic Image na primeira. Como Source , selecionamos o meta campo do usuário Meta Box .
” alt=”widget de imagem dinâmica com avatar do usuário” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-image-widget-with-users-avatar.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-image-widget-with-users-avatar.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-image-widget-with-users-avatar-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-image-widget-with-users-avatar-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-image-widget-with-users-avatar-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-image-widget-with-users-avatar-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-image-widget-with-users-avatar-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Sob a Imagem Dinâmica , adicionamos três widgets de Campo Dinâmico com a Fonte “Meta Dados” . Eles exibem o nome e o sobrenome do usuário e a posição de trabalho nos metacampos do usuário Meta Box .
” alt=”widgets de campo dinâmico com nome e sobrenome do usuário e cargo de trabalho” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-the-users-first-and-last-name-and-word-position.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-the-users-first-and-last-name-and-word-position.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-the-users-first-and-last-name-and-word-position-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-the-users-first-and-last-name-and-word-position-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-the-users-first-and-last-name-and-word-position-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-the-users-first-and-last-name-and-word-position-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-the-users-first-and-last-name-and-word-position-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Vamos adicionar o widget Título com o texto “Geral” para destacar as informações gerais do usuário.
No widget Título , adicionamos dois widgets de Campo Dinâmico com a Fonte “Meta Dados” . Eles exibem a experiência e o salário do usuário nos metacampos do usuário Meta Box .
Habilitamos a alternância de saída do campo Personalizar para ambos os widgets e adicionamos texto personalizado antes do valor dinâmico (por exemplo, “Salário: €%s”, onde %s representa o valor extraído do metacampo personalizado).
” alt=”widgets de campo dinâmicos com saída de campo personalizada” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-customize-field-output.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-customize-field-output.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-customize-field-output-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-customize-field-output-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-customize-field-output-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-customize-field-output-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/dynamic-field-widgets-with-customize-field-output-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Adicionamos outro widget de título com o texto “Idiomas”.
Abaixo disso, arrastamos e soltamos o widget Dynamic Field com a fonte “Meta Data” . Ele exibe o valor do metacampo Checkbox da Meta Box do usuário e mostra quantos idiomas o usuário conhece.
Além disso, habilitamos a opção Filtrar saída do campo e escolhemos o retorno de chamada “Valores do campo da caixa de seleção” .
” alt=”como exibir valores de campos de caixa de seleção” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/how-to-display-checkbox-field-values.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/how-to-display-checkbox-field-values.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/how-to-display-checkbox-field-values-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/how-to-display-checkbox-field-values-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/how-to-display-checkbox-field-values-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/how-to-display-checkbox-field-values-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/how-to-display-checkbox-field-values-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Abrimos a aba de configurações de Estilo da Coluna na Seção Interna e definimos o Fundo “Clássico” com a cor branca para destacar esta coluna.
Agora, vamos personalizar a segunda coluna. Arrastamos e soltamos o widget Título com o texto “Resumo Profissional” e o widget Campo Dinâmico com a Fonte “Meta Dados” que mostra a descrição do usuário.
Além disso, definimos o fundo “Clássico” com a cor branca na guia Configurações de estilo da coluna na seção interna .
Em seguida, adicionamos o título com o texto “Habilidades”. Para exibir os valores dos campos Repetidor, adicionamos o widget Repetidor Dinâmico .
Selecionamos o metacampo Repeater necessário como Source . Na área de texto Formato do item , substituímos “nome” na macro <span>%name%</span> pelo nome do campo Repetidor. No nosso caso, é <span>%user-skill%</span>.
Em seguida, abrimos a guia Configurações de estilo do widget. Na aba Itens , definimos a Cor do texto como preto e a Cor de fundo como cinza claro. Definimos o Border Radius como: “10” Top , “10” Right , “10” Bottom , e “10” Left para arredondar os cantos das bordas externas do item. Em seguida, definimos o Padding como: “4” Top , “10” Right , “4” Bottom e “10” Left para definir o tamanho do espaço ao redor dos itens. Por fim, definimos a Margem para “10” Direita para definir a distância entre os itens.
Além disso, adicionamos outro widget da Seção Interna com os portfólios dos usuários. Para saber mais sobre como configurar isso, vá para o tutorial Como permitir que usuários adicionem portfólio com o formulário front-end .
” alt=”portfólios de usuários exibidos com a grade de listagem” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/user-portfolios-displayed-with-the-listing-grid.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/user-portfolios-displayed-with-the-listing-grid.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/user-portfolios-displayed-with-the-listing-grid-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/user-portfolios-displayed-with-the-listing-grid-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/user-portfolios-displayed-with-the-listing-grid-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/user-portfolios-displayed-with-the-listing-grid-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/12/user-portfolios-displayed-with-the-listing-grid-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Termine de personalizar o modelo e clique no botão “Publicar/Atualizar” .
Painel do Construtor de Perfil
Prossiga para a guia JetEngine > Profile Builder .
Defina a página recém-criada como a página da conta e selecione o modo de modelo “Conteúdo” .
Em seguida, clique no botão “Salvar” .
” alt=”painel do construtor de perfil de usuário” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/user-profile-builder-dashboard.png” />Para criar subpáginas para a página da conta, abra a guia Página da conta e clique no botão “+Adicionar nova subpágina” .
No novo item repetidor, adicione Title e Slug e defina o modelo Elementor ou item de listagem JetEngine como Template .
Você também pode ocultar a subpágina do menu da página Conta e selecionar funções de usuário com permissão para acessar esta página.
” alt=”criação de subpágina do construtor de perfil” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/profile-builder-subpage-creation.png” />Adicione quantas subpáginas você precisar. Ao terminar, clique no botão “Salvar” .
” alt=”subpáginas do construtor de perfil” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/profile-builder-subpages.png” />
Personalize a página da conta
Abra a guia Páginas e clique para editar a página Conta no editor Elementor.
Arraste e solte o widget Menu de perfil .
Como você pode ver, o widget mostra os títulos das subpáginas.
Certifique-se de escolher o conteúdo da “Conta” e, em seguida, personalize outras configurações do widget.
Para obter mais informações sobre as configurações do menu de perfil , verifique Visão geral do widget do menu de perfil para Elementor .
Após personalizar as configurações do Menu do Perfil , coloque o widget Conteúdo da Subpágina do Perfil .
Este widget mostrará o conteúdo de cada subpágina quando os usuários clicarem no item correspondente do menu de perfil .
Clique no botão “Atualizar” .
Verifique os resultados
Abra a página Conta no front-end.
Agora, os usuários podem clicar nos itens de menu no Menu de perfil e o Conteúdo da subpágina do perfil mostra o conteúdo da subpágina correspondente.
Modo de reescrita de modelo
Criação de página de conta
Siga o Painel do WordPress > Páginas > Adicionar novo caminho. Dê um nome à página e clique no botão “Publicar” . Você pode deixar a página vazia, pois o conteúdo será exibido a partir dos modelos.
” alt=”criar a página da conta” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/create-the-account-page.png” />
Criando as subpáginas para a página Conta com o modo de modelo “Reescrever”
A página Conta conterá o Menu Perfil , permitindo aos usuários clicar e abrir diferentes subpáginas.
Os modelos de subpágina podem conter o seguinte conteúdo:
- Exibindo as informações do usuário;
- Exibindo o formulário “ Atualizar conta de usuário ”;
- Exibindo formulários “Criar postagem” e “Editar postagem” ;
- Exibindo os itens favoritos do usuário. Para saber mais sobre isso, vá para o tutorial Como criar uma página de favoritos usando o módulo de armazenamento de dados ;
- Exibindo os comentários recentes do usuário ;
- Exibindo os itens reservados do usuário .
Você pode criar modelos de subpágina com itens de listagem Elementor ou JetEngine .
Modelo de subpágina com formulário
Criação de modelo Elementor
Se você decidir criar modelos com Elementor, vá para a guia Modelos na guia Elementor no painel do WordPress .
Pressione o botão “Adicionar novo” . Escolha o tipo de modelo “Página” e insira o nome . Em seguida, clique no botão “Criar modelo” .
No editor Elementor, preencha o template com o conteúdo necessário. Por exemplo, coloquei o formulário JetFormBuilder usando o widget JetForm .
Em seguida, arraste e solte o widget Menu de perfil na página de edição.
Com o modo de modelo “Conteúdo” , você pode definir e estilizar o menu de perfil quando estiver na página de perfil. A vantagem do modo “Reescrever” modelo é que você pode estilizar o widget Menu de perfil de maneira diferente para cada modelo. Além disso, você pode decidir não adicionar o menu Perfil a alguns modelos.
Certifique-se de escolher o conteúdo da “Conta” e, em seguida, personalize outras configurações do widget.
Para obter mais informações sobre as configurações do menu de perfil , verifique Visão geral do widget do menu de perfil para Elementor .
Ao terminar, clique no botão “Atualizar” .
Crie quantos modelos para a página Conta forem necessários e certifique-se de adicionar e personalizar o widget Menu de perfil para esses modelos onde for necessário.
Criação de item de listagem JetEngine
Se você decidir criar um item de listagem JetEngine , vá para JetEngine > guia Listagens e pressione o botão “Adicionar Novo” .
No pop-up Configurar item de listagem , selecione a fonte de listagem “Usuários” , insira o nome do item de listagem , escolha a visualização de listagem “Elementor” e clique no botão “Criar item de listagem” .
Preencha o modelo com o conteúdo e adicione o widget Menu de perfil .
Certifique-se de escolher o conteúdo da “Conta” e, em seguida, personalize outras configurações do widget.
Com o modo de modelo “Conteúdo” , você pode definir e estilizar o menu de perfil quando estiver na página de perfil. A vantagem do modo “Reescrever” modelo é que você pode estilizar o widget Menu de perfil de maneira diferente para cada modelo. Além disso, você pode decidir não adicionar o menu Perfil a alguns modelos.
Ao terminar, clique no botão “Publicar/Atualizar” .
Crie quantos modelos de listagem para a página Conta forem necessários e certifique-se de adicionar e personalizar o widget Menu de perfil para esses modelos onde for necessário.
Exibindo informações do usuário
Prossiga para o capítulo Como exibir informações do usuário deste tutorial para aprender como criar o modelo para mostrar as informações do usuário da conta.
Ao terminar de criar o modelo com o conteúdo correspondente, você pode adicionar o widget Menu de Perfil e escolher o Contexto “Conta” .
Com o modo de modelo “Conteúdo” , você pode definir e estilizar o menu de perfil quando estiver na página de perfil. A vantagem do modo “Reescrever” modelo é que você pode estilizar o widget Menu de perfil de maneira diferente para cada modelo. Além disso, você pode decidir não adicionar o menu Perfil a alguns modelos.
Termine de personalizar o modelo e clique no botão “Publicar/Atualizar” .
Painel do Construtor de perfil de usuário
Prossiga para a guia JetEngine > Profile Builder .
Defina a página recém-criada como a página da conta e selecione o modo de modelo “Reescrever” .
A opção Usar conteúdo da página está disponível no modo de modelo “Reescrever” . Ative-o para mostrar o conteúdo da página Conta se os modelos de subpágina não estiverem definidos.
Em seguida, clique no botão “Salvar” .
Abra a guia Página da conta para criar subpáginas para a página da conta e clique no botão “+Adicionar nova subpágina” .
No novo item repetidor, adicione Title , Slug e defina o modelo Elementor ou item de listagem JetEngine como Template .
Você também pode ocultar a subpágina do menu da página Conta e selecionar funções de usuário com permissão para acessar esta página.
Adicione quantas subpáginas você precisar. Ao terminar, clique no botão “Salvar” .
Verificação de resultados
Abra a página Conta no front-end.
Para o widget Menu de Perfil no modelo com as informações do usuário, definimos o Layout do Menu “Horizontal” .
Ao clicar no item de menu “Publicar vaga”, passamos para o modelo com o formulário. Aqui, definimos o layout do menu “Vertical” para o widget Menu de perfil . Como você pode ver, com o modo de modelo “Reescrever” , você pode aplicar diferentes configurações ao menu de perfil para diferentes subpáginas.
Isso é tudo. Agora você sabe como criar a página da conta WordPress com o modo Conteúdo ou Reescrita do recurso JetEngine Profile Builder.