Como configurar uma página pública de usuário único

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 na página Perfil. O Menu Perfil exibe os títulos dos modelos de subpágina definidos para a página Usuário Único (Perfil) com o Construtor de Perfil. 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

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 “Conteúdo”

Crie a página de perfil

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 de usuário único (perfil) com o modo de modelo “Conteúdo”

A página Usuário Único conterá o Menu Perfil , permitindo que os usuários cliquem e acessem várias subpáginas.

Os modelos de subpágina podem conter o seguinte conteúdo:

Como criar um modelo de subpágina com um formulário

Você pode criar modelos de subpágina para a página de perfil com itens de listagem Elementor ou JetEngine .

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, você deve preencher o template com o conteúdo necessário. Por exemplo, exibimos o formulário JetFormBuilder usando o widget JetForm , permitindo aos usuários editar seus perfis. Aprenda como criar esse formulário no tutorial Atualizando usuários por meio de formulários .

Ao terminar de personalizar o modelo, clique no botão “ Atualizar ”.

Crie um item de listagem JetEngine

Para 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 ”.

No editor Elementor, você deve preencher o template com o conteúdo necessário. Por exemplo, exibimos o formulário JetFormBuilder usando o widget JetForm , permitindo aos usuários editar seus perfis. Aprenda como criar esse formulário no tutorial Atualizando usuários por meio de formulários .

Conclua a personalização do modelo e clique no botão “ Atualizar ”.

Como exibir informações do usuário

Em primeiro lugar, crie a Meta Box para usuários seguindo o tutorial Como aplicar Meta Boxes aos usuários .

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 Número ) e idioma (campo caixa de seleção).

Criamos um metacampo com o tipo de campo “Repetidor” e o rótulo “Habilidades” para exibir as habilidades profissionais do usuário. 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 .

Ao clicar no botão “ Nova opção de campo ”, você pode adicionar opções ao campo Selecionar manualmente.

Você também pode ativar a opção Obter opções do glossário e selecionar o glossário necessário no menu suspenso.

Se você criar opções manualmente, poderá usá-las ao editar o 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 .

Clique no botão “ + Novo Glossário ”, digite o Nome , selecione a fonte de dados “Definir itens manualmente” e defina as opções necessárias clicando no botão “ Novo campo ”.

Após criar as opções, pressione o botão “ Salvar ” .

Além disso, criamos o glossário “Idiomas” para o metacampo Checkbox para exibir quais idiomas o usuário conhece.

Retorne ao usuário Meta Box e defina o Glossário criado para o campo Selecionar.

Além disso, definimos o glossário “Idioma” para o campo Checkbox.

Clique no botão “ Adicionar/Atualizar Meta Box “ após terminar a personalização.

Para preencher os metacampos personalizados, vá para a guia Usuários > Perfil .

Para definir as opções do campo Selecionar no campo Repetidor, clique no botão “ + Adicionar Item ” e escolha a opção necessária na lista suspensa. Repita esta etapa para adicionar quantas vezes precisar.

Após definir as opções, pressione o botão “ Atualizar perfil ”.

Na guia Perfil , você pode preencher campos personalizados para o usuário atual. Para preencher metacampos personalizados para outros usuários, vá para a guia Usuários > Todos os usuários e selecione o usuário a ser editado.

Agora estamos prontos para configurar uma subpágina com informações do usuário. Você pode criar um modelo com o modelo de listagem Elementor ou JetEngine; o processo de criação desses modelos é descrito acima.

Por exemplo, se você deseja criar 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 uma nova seção e arrastamos e soltamos o widget Inner Section com duas colunas nela.

Inserimos o widget Dynamic Image na primeira coluna da seção interna . Como Source , selecionamos o meta campo do usuário Meta Box .

Na guia Configurações de estilo do widget Imagem dinâmica , definimos a largura de 174 px e o raio da borda de 50% .

Saiba mais sobre as configurações na Visão geral do widget de imagem dinâmica .

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 .

Você pode descobrir mais sobre as configurações do widget Campo dinâmico na Visão geral do widget Campo dinâmico .

Em seguida, adicionamos 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).

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” .

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.

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 os valores do Border Radius como: “10” Top , “10” Right , “10” Bottom , e “10” Left para arredondar os cantos das bordas externas do item. Em seguida, definimos os valores de 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 os valores da Margem como “10” Direita para definir a distância entre os itens.

Para saber mais sobre as configurações do widget, vá para Visão geral do widget do repetidor dinâmico .

Além disso, adicionamos outro widget da Seção Interna com os portfólios dos usuários. Para saber mais sobre como configurá-lo, vá para o tutorial Como permitir que usuários adicionem portfólio com o formulário front-end .

Termine de personalizar o modelo e clique no botão “ Publicar/Atualizar ”.

Painel do Construtor de Perfil

Depois de criar todos os modelos planejados para as futuras subpáginas, prossiga para a guia JetEngine > Profile Builder .

Ative a alternância de página de usuário único , defina a página “Perfil” criada anteriormente como página de usuário único e selecione o modo de modelo “Conteúdo” .

Em seguida, clique no botão “ Salvar ” .

Para criar subpáginas para a página de usuário único, abra a guia Página do usuário 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 definir outras opções:

  • Ocultar do menu . Se ativado, a subpágina ficará oculta no menu Perfil , mas acessível por URL;
  • Visibilidade da Página . Selecionar a opção “Proprietário” torna o conteúdo da subpágina visível apenas para usuários logados em sua conta, enquanto com a opção “Todos” outros usuários podem observá-lo;
  • Mostre esta página para a função do usuário . Escolha funções de usuário que podem acessar esta subpágina neste menu suspenso.

Adicione quantas subpáginas você precisar. Ao terminar, clique no botão “ Salvar ”.

Personalize a página do perfil

Abra a guia Páginas e clique para editar a página Perfil 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 a opção de conteúdo “Página de usuário único” 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 .

Por fim, clique no botão “ Atualizar ”.

Verifique os resultados

Abra a página Perfil (usuário único) 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 mostrará o conteúdo da subpágina correspondente.

Modo de modelo “Reescrever”

Criando a página de perfil

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.

Aviso

Se desejar adicionar algum conteúdo à página, faça-o antes de definir a página como página de usuário único no painel do Profile Builder, pois você não poderá editá-la.

Criando as subpáginas para a página de usuário único (perfil) com o modo de modelo “Reescrever”

A página de usuário único conterá o menu de perfil , permitindo que os usuários cliquem e abram diferentes subpáginas.

Os modelos de subpágina podem conter o seguinte conteúdo:

Como criar um modelo de subpágina com um formulário

Você pode criar modelos de subpágina para a página de perfil com itens de listagem Elementor ou JetEngine .

Criando um modelo com Elementor

Se você decidir criar modelos com Elementor, vá para a guia Modelos na guia Elementor no painel do WordPress e 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, você deve preencher o template com o conteúdo necessário. Por exemplo, exibimos o formulário JetFormBuilder usando o widget JetForm , permitindo aos usuários editar seus perfis. Aprenda como criar esse formulário no tutorial Atualizando usuários por meio de formulários .

Então, você precisa colocar o widget Menu de Perfil .

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 contexto “Página de usuário único” e, em seguida, personalize outras configurações do widget.

Ao terminar de personalizar o modelo, clique no botão “ Atualizar ”.

Criando um item de listagem JetEngine

Para 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 ”.

No editor Elementor, você deve preencher o template com o conteúdo necessário. Por exemplo, exibimos o formulário JetFormBuilder usando o widget JetForm , permitindo aos usuários editar seus perfis. Aprenda como criar esse formulário no tutorial Atualizando usuários por meio de formulários .

Em seguida, você coloca o widget Menu de perfil . Escolha o contexto “Página de usuário único” e personalize outras configurações do widget.

Ao terminar de configurar o modelo, clique no botão “ Atualizar ”.

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 para o perfil.

Ao terminar de criar o modelo com o conteúdo correspondente, você pode adicionar o widget Menu de perfil e escolher o contexto “Página de usuário único” .

Termine de personalizar o modelo e clique no botão “Publicar/Atualizar” .

Configurações do painel do Profile Builder

Depois de criar todos os modelos planejados para as futuras subpáginas, prossiga para a guia JetEngine > Profile Builder .

Ative a alternância de página de usuário único , defina a página “Perfil” criada anteriormente como página de usuário único 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 de perfil se os modelos de subpágina não estiverem definidos.

Em seguida, pressione o botão “Salvar” .

Para criar subpáginas para a página de usuário único, abra a guia Página do usuário 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 definir outras opções:

  • Ocultar do menu . Se ativado, a subpágina ficará oculta no menu Perfil , mas acessível por URL;
  • Visibilidade da Página . Selecionar a opção “Proprietário” torna o conteúdo da subpágina visível apenas para usuários logados em sua conta, enquanto com a opção “Todos” outros usuários podem observá-lo;
  • Mostre esta página para a função do usuário . Escolha funções de usuário que podem acessar esta subpágina neste menu suspenso.

Adicione quantas subpáginas você precisar. Ao terminar, clique no botão “ Salvar ”.

Verificando resultados

Abra a página Usuário único (perfil) 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 “Editar Perfil”, procedemos ao 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 de usuário único (perfil) do WordPress com o modo de modelo Conteúdo ou Reescrita do recurso JetEngine Profile Builder.

Índice