Como permitir que os usuários adicionem portfólio com o formulário front-end
Crie um tipo de conteúdo personalizado de portfólio
Para portfólios, recomendamos a criação de um tipo de conteúdo personalizado separado . Ao criar um novo CCT, você também cria uma nova tabela SQL onde os itens são armazenados. É útil quando você deseja permitir que vários usuários carreguem seus portfólios. Se os itens do portfólio estiverem em uma tabela de banco de dados separada, o site não ficará lento.
Vá para a guia JetEngine> JetEngine e ative a alternância de tipos de conteúdo personalizados na guia Módulos padrão .
Em seguida, vá para a guia JetEngine> Tipos de conteúdo personalizados e clique no botão “ Adicionar novo ” .
Nas Configurações Gerais , o campo Nome deve ser preenchido. Após inserir o nome, o Nome do Slug e da Tabela do Banco de Dados será gerado automaticamente.
As demais opções podem ser definidas de acordo com suas necessidades.
Você pode adicionar metacampos personalizados ao seu CCT na guia Campos .
Por exemplo, adicionamos quatro campos: campo de texto do nome do trabalho , campo de mídia de mídia para uma imagem, campo de texto do link do trabalho e campo de área de texto da descrição do trabalho .
Além disso, você pode decidir quais valores dos campos CCT podem ser mostrados na lista de itens CCT no back-end, ativando os botões de alternância dedicados na guia Colunas de administração .
Após personalizar o CCT, clique no botão “ Adicionar/Atualizar ”.
Crie um formulário para adicionar itens CCT
Depois de criar o tipo de conteúdo personalizado, você pode clicar no botão “ Criar novo formulário ”. Este recurso gera um formulário front-end que permite aos usuários criar itens CCT.
” alt=”crie um novo formulário front-end para itens CCT” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/create-a-new-front-end-form-for-CCT-items.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/create-a-new-front-end-form-for-CCT-items.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/create-a-new-front-end-form-for-CCT-items-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/create-a-new-front-end-form-for-CCT-items-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/create-a-new-front-end-form-for-CCT-items-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/create-a-new-front-end-form-for-CCT-items-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/create-a-new-front-end-form-for-CCT-items-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Após clicar no botão, você será redirecionado para a página de edição do formulário criado .
O formulário contém campos com os mesmos rótulos, nomes e tipos dos metacampos personalizados do CCT.
” alt=”campos de formulário” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/form-fields.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/form-fields.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/form-fields-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/form-fields-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/form-fields-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/form-fields-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/form-fields-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Para tornar um campo obrigatório, clique no ícone de asterisco próximo a ele. Depois disso, se o usuário não preencher o campo, o formulário não poderá ser enviado. Mais sobre as configurações do formulário você pode ler aqui .
” alt=”tornando o campo do formulário obrigatório” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/making-form-field-required.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/making-form-field-required.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/making-form-field-required-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/making-form-field-required-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/making-form-field-required-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/making-form-field-required-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/making-form-field-required-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Se o formulário contiver os blocos Media Field , vá para a guia Block settings e abra a guia Field . Aqui, ative a alternância Inserir anexo e defina o VALOR DO CAMPO de acordo com as configurações do metacampo de mídia . Por exemplo, selecionamos o formato de valor “ID de mídia” para o metacampo, então definimos o VALOR DE CAMPO “ID de anexo” para o campo de formulário. Sem essas configurações, os usuários não poderão adicionar arquivos por meio do formulário. Além disso, você pode definir o acesso do usuário .
” alt=”anexo de inserção de campo de mídia” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/media-field-insert-attachment.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/media-field-insert-attachment.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/media-field-insert-attachment-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/media-field-insert-attachment-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/media-field-insert-attachment-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/media-field-insert-attachment-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/media-field-insert-attachment-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Na guia JetForm > Ações de pós-envio , a ação “Inserir/atualizar item de tipo de conteúdo personalizado” é definida por padrão.
Clique no ícone de lápis para abrir o pop-up de configurações.
” alt=”Inserir atualização de item de tipo de conteúdo personalizado ação de envio de postagem” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Insert-Update-Custom-Content-Type-Item-Post-Submit-Action.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Insert-Update-Custom-Content-Type-Item-Post-Submit-Action.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Insert-Update-Custom-Content-Type-Item-Post-Submit-Action-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Insert-Update-Custom-Content-Type-Item-Post-Submit-Action-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Insert-Update-Custom-Content-Type-Item-Post-Submit-Action-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Insert-Update-Custom-Content-Type-Item-Post-Submit-Action-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Insert-Update-Custom-Content-Type-Item-Post-Submit-Action-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />O pop-up Editar ação contém as seguintes configurações:
- TIPO DE CONTEÚDO . O CCT do “Portfólio” recentemente criado é definido aqui por padrão;
- TEM ESTADO . Aqui, você pode decidir se um item obterá o status “Rascunho” ou “Publicar” após o usuário enviar o formulário;
- MAPA DE CAMPOS . Essas configurações mostram a conexão dos campos do formulário com os metacampos CCT. Após o usuário preencher os campos do formulário e clicar no botão “ Enviar ”, o item CCT será criado com os valores correspondentes nos metacampos;
- CONFIGURAÇÕES PADRÃO . Aqui você pode definir valores para os campos padrão do CCT.
Se você alterou alguma configuração da ação de pós-envio , clique no botão “ Atualizar ”.
” alt=”configurações de ação pós-envio” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/post-submit-action-settings.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/post-submit-action-settings.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/post-submit-action-settings-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/post-submit-action-settings-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/post-submit-action-settings-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/post-submit-action-settings-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/post-submit-action-settings-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Para redirecionar os usuários para a página da conta após enviar o formulário, clique no botão “+ Nova ação”, escolha a ação de pós-envio “ Redirecionar para a página ” e pressione o ícone de lápis .
” alt=”redirecionar para a ação de envio de postagem da página” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/redirect-to-page-post-submit-action.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/redirect-to-page-post-submit-action.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/redirect-to-page-post-submit-action-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/redirect-to-page-post-submit-action-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/redirect-to-page-post-submit-action-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/redirect-to-page-post-submit-action-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/redirect-to-page-post-submit-action-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />No pop-up Editar ação , defina a opção “Página estática” para o campo Redirecionar para e, no menu suspenso Selecionar página , escolha “Conta”. Em seguida, clique no botão “ Atualizar ”.
Você pode editar o formulário de acordo com suas preferências. Por exemplo, você pode adicionar um texto personalizado com o bloco Título . Depois disso, pressione o botão “ Atualizar ” para salvar as alterações do formulário.
” alt=”adicionando texto personalizado com o bloco de título ao formulário” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/adding-custom-text-with-the-heading-block-to-the-form.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/adding-custom-text-with-the-heading-block-to-the-form.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/adding-custom-text-with-the-heading-block-to-the-form-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/adding-custom-text-with-the-heading-block-to-the-form-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/adding-custom-text-with-the-heading-block-to-the-form-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/adding-custom-text-with-the-heading-block-to-the-form-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/adding-custom-text-with-the-heading-block-to-the-form-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Crie um formulário para edição de itens CCT
Vá para JetFormBuilder > guia Formulários e clique no botão “ Duplicar ” do formulário para adicionar itens.
Renomeie o formulário e insira o Campo Oculto . Altere o nome do campo do formulário e defina o valor do campo “Entrada manual” .
Na seção Bloco , clique no ícone da pilha de moedas acima do campo VALOR PADRÃO .
No pop-up Editar predefinição , escolha a fonte “Tipo de conteúdo personalizado” , obtenha o ID do item de “Postagem atual” e o valor CCT “ID do item” . Em seguida, pressione o botão “ Atualizar ”.
Outros campos no formulário que replicam os metacampos CCT não precisam ser alterados.
Vá para a guia JetForm> Postar ações de envio e clique no ícone de lápis na ação “Inserir/atualizar item de tipo de conteúdo personalizado”.
Na aba Editar Ação , defina a opção “ID do item (atualizará o item)” para o Campo Oculto com o ID do item CCT. Em seguida, clique no botão “ Atualizar ” .
” alt=”editando ação pós-envio para atualizar itens CCT” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/editing-post-submit-action-for-updating-CCT-items.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/editing-post-submit-action-for-updating-CCT-items.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/editing-post-submit-action-for-updating-CCT-items-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/editing-post-submit-action-for-updating-CCT-items-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/editing-post-submit-action-for-updating-CCT-items-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/editing-post-submit-action-for-updating-CCT-items-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/editing-post-submit-action-for-updating-CCT-items-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Em seguida, desdobre a guia Configurações predefinidas e pressione o botão Ativar . Selecione a FONTE “Tipo de conteúdo personalizado” e OBTER ID DO ITEM DE “Postagem Atual”. Abaixo disso, você verá a lista dos campos que adicionou ao formulário. Cada um tem um campo de seleção abaixo, onde você pode escolher um metacampo CCT para conectar a um campo de formulário. Quando os usuários editam o item com o formulário, a predefinição colocará os dados do metacampo do item CCT atual nos campos do formulário, para que os usuários não precisem preencher os campos novamente para alterar o conteúdo do item.
” alt=”configurações predefinidas para o formulário de edição” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/preset-settings-for-the-editing-form.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/preset-settings-for-the-editing-form.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/preset-settings-for-the-editing-form-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/preset-settings-for-the-editing-form-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/preset-settings-for-the-editing-form-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/preset-settings-for-the-editing-form-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/preset-settings-for-the-editing-form-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Pressione o botão “ Atualizar ” para salvar as configurações do formulário.
Coloque os formulários em pop-ups
Com o plugin JetPopup , você pode criar dois pop-ups que podem ser anexados aos botões.
Criaremos um pop-up para adição e outro para edição de itens CCT.
Vá para JetPopup> guia Criar novo pop-up . Na janela Criar um pop-up , selecione o tipo de conteúdo (elementor ou editor de bloco), insira o nome do pop-up e escolha predefinição . Em seguida, clique no botão “ Criar ” .
” alt=”nova criação de pop-up” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/new-pop-up-creation.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/new-pop-up-creation.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/new-pop-up-creation-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/new-pop-up-creation-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/new-pop-up-creation-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/new-pop-up-creation-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/new-pop-up-creation-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Coloque o widget JetForm ou bloco de formulário na página de edição. Abra o menu suspenso Escolher formulário e escolha um formulário que você criou para adicionar os itens CCT (portfólios).
” alt=”edição pop-up” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-editing.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-editing.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-editing-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-editing-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-editing-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-editing-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-editing-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Personalize as configurações de formulário e pop-up conforme sua preferência e clique no botão “ Atualizar ” .
Para saber mais sobre as configurações de pop-up, verifique os tutoriais Como criar um novo modelo de pop-up no Elementor e Como criar pop-up no Gutenberg .
Retorne à guia JetPopup> Criar novo pop-up e crie outro pop-up.
” alt=”editar pop-up do portfólio” width=”1024″ height=”618″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-1024×618.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-600×362.webp 600w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up.webp 1824w” data-sizes=”(max-width: 1024px) 100vw, 1024px” />Coloque o widget JetForm ou bloco Form e configure o formulário para edição de itens CCT (portfólios).
” alt=”editar pop-up do portfólio com o formulário” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-with-the-form.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-with-the-form.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-with-the-form-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-with-the-form-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-with-the-form-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-with-the-form-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/edit-portfolio-pop-up-with-the-form-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Clique no ícone de engrenagem para abrir as configurações pop-up e ativar os botões Carregar conteúdo com Ajax e Carregamento forçado . A predefinição do formulário não funcionará no pop-up sem essas opções habilitadas.
” alt=”opção de carregamento forçado pop-up” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-force-loading-option.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-force-loading-option.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-force-loading-option-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-force-loading-option-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-force-loading-option-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-force-loading-option-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/pop-up-force-loading-option-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Personalize o pop-up e pressione o botão “ Atualizar ”.
Crie uma consulta CCT
Para exibir apenas os portfólios do usuário consultado na página Perfil, precisamos criar uma consulta personalizada. Vá para a guia JetEngine> Query Builder e pressione o botão “ Adicionar novo ”.
Insira o nome da consulta e selecione a opção “Consulta de tipo de conteúdo personalizado” no menu suspenso Tipo de consulta .
Na guia Configurações de consulta de tipos de conteúdo , selecione o CCT necessário na lista suspensa Do tipo de conteúdo (“Portfólio” em nosso caso). Você pode definir o número dos itens exibidos na grade de listagem (criaremos um modelo de listagem para isso mais tarde). Além disso, você pode selecionar o status “Publicar” para mostrar apenas os itens que foram publicados.
” alt=”consulta personalizada para exibir portfólios para o usuário consultado” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-query-to-display-portfolios-for-quired-user.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-query-to-display-portfolios-for-quired-user.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-query-to-display-portfolios-for-quired-user-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-query-to-display-portfolios-for-quired-user-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-query-to-display-portfolios-for-quired-user-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-query-to-display-portfolios-for-quired-user-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-query-to-display-portfolios-for-quired-user-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Na aba Consulta , clique no botão “ Adicionar Novo ”. Defina o campo “Autor do item” e compare “Igual (=)” . Clique no ícone da pilha de moedas próximo ao campo Valor e escolha “ID do usuário consultado” no menu suspenso. Por fim, escolha o tipo “Numérico” .
” alt=”configurações de consulta de tipo de conteúdo personalizado” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-content-type-query-settings.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-content-type-query-settings.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-content-type-query-settings-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-content-type-query-settings-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-content-type-query-settings-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-content-type-query-settings-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-content-type-query-settings-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />A consulta está pronta e você pode clicar no botão “ Adicionar/Atualizar Consulta ”.
Crie um modelo de listagem
Para exibir portfólios na grade de listagem nas páginas Conta e Perfil do usuário, é necessário criar um modelo de listagem.
Vá para JetEngine> guia Listagens e pressione o botão “ Adicionar novo ” .
No pop-up Configurar item de listagem , selecione a fonte de listagem “Tipo de conteúdo personalizado” , escolha o CCT necessário no campo Do tipo de conteúdo (por exemplo, “Portfólio”), insira o nome do item de listagem , escolha a visualização de listagem “Elementor”. e clique no botão “ Criar item de listagem ” .
” alt=”modelo de listagem para portfólio” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/listing-template-for-portfolio.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/listing-template-for-portfolio.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/listing-template-for-portfolio-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/listing-template-for-portfolio-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/listing-template-for-portfolio-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/listing-template-for-portfolio-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/listing-template-for-portfolio-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Na página de edição do Elementor, coloque o widget Dynamic Image para exibir a imagem do portfólio. Como Fonte , escolha o metacampo Mídia no CCT “Portfólio”.
Para exibir o nome do portfólio, arraste e solte o widget Campo Dinâmico . Escolhemos a opção “Post/Term/User/Object Data” como fonte e selecionamos o metacampo “Work name” CCT Text .
Colocamos outro widget de Campo Dinâmico , escolhemos a opção “Post/Term/User/Object Data” como Fonte e selecionamos o metacampo “Work description” CCT Text para exibir a descrição do portfólio.
Para ocultar parte do texto de descrição, ativamos a alternância de saída do campo Filtro e selecionamos o retorno de chamada “Cortar string por gráficos ou palavras” . Esteja ciente de que o retorno de chamada estará disponível somente após você ativar a alternância Trim string callback na guia JetEngine > JetEngine > Módulos > Módulos Externos . Com este retorno de chamada, você pode definir o número de palavras ou gráficos exibidos no Campo Dinâmico .
Adicionamos o widget Dynamic Link e escolhemos o metacampo “Work link” CCT Text para exibir o link para o portfólio.
” alt=”widget de link dinâmico para exibir link de portfólio” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-displaying-portfolio-link.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-displaying-portfolio-link.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-displaying-portfolio-link-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-displaying-portfolio-link-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-displaying-portfolio-link-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-displaying-portfolio-link-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-displaying-portfolio-link-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Arrastamos e soltamos outro botão Dynamic Link clicando em qual usuário pode excluir o portfólio. Como Fonte , escolhemos a opção “Excluir link da postagem atual” e preenchemos o campo Confirmar mensagem de exclusão .
No campo Redirecionar após exclusão , você pode inserir a URL da página Conta, para que o usuário seja redirecionado para a página Conta após excluir o portfólio.
Você pode alterar o texto do rótulo . Queríamos exibir apenas o ícone, então o excluímos.
Ative a alternância Adicionar argumentos de consulta e insira a macro “_cct_id=%current_id%”.
” alt=”widget de link dinâmico para excluir a postagem atual” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-deleting-the-current-post.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-deleting-the-current-post.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-deleting-the-current-post-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-deleting-the-current-post-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-deleting-the-current-post-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-deleting-the-current-post-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-widget-for-deleting-the-current-post-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Além disso, definimos o ícone do campo “Lixeira” e o alinhamento “Fim” .
Vá para a guia Configurações avançadas do widget, desdobre a guia Visibilidade dinâmica e clique no botão Ativar . Defina o tipo de condição de visibilidade “Mostrar elemento se a condição for atendida” e a condição “É página de perfil” (da seção específica do JetEngine ) . No campo Página de perfil , escolha a subpágina Conta que mostra as informações do usuário e onde você colocará a grade de listagem com portfólios.
Essas configurações de visibilidade dinâmica mostram o link dinâmico para exclusão de um portfólio apenas na página da conta do usuário. Na página Perfil, ele ficará invisível.
” alt=”configurações de visibilidade dinâmica de link dinâmico” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-dynamic-visibility-settings.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-dynamic-visibility-settings.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-dynamic-visibility-settings-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-dynamic-visibility-settings-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-dynamic-visibility-settings-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-dynamic-visibility-settings-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/dynamic-link-dynamic-visibility-settings-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Agora você pode adicionar um botão para acionar o pop-up com o formulário de edição do portfólio.
Você pode adicionar o widget Elementor ou JetElements Button . Para saber mais sobre o último, você pode ler o tutorial Como adicionar um widget de botão com texto e links personalizados .
Adicione o botão à página de edição e personalize suas configurações de conteúdo e estilo de acordo com suas necessidades.
” alt=”widget de botão do plugin JetElements” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-from-the-JetElements-plugin.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-from-the-JetElements-plugin.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-from-the-JetElements-plugin-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-from-the-JetElements-plugin-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-from-the-JetElements-plugin-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-from-the-JetElements-plugin-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-from-the-JetElements-plugin-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Em seguida, vá para a guia Configurações avançadas e abra a guia JetPopup . Defina o pop-up com o formulário de edição do portfólio no campo Pop-up anexado , escolha o tipo de gatilho “Clique no widget” e ative a alternância do pop-up Jet Engine Listing .
” alt=”pop-up anexado ao botão” width=”1024″ height=”618″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/attached-pop-up-to-the-button-1024×618.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/attached-pop-up-to-the-button-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/attached-pop-up-to-the-button-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/attached-pop-up-to-the-button-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/attached-pop-up-to-the-button-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/attached-pop-up-to-the-button-600×362.webp 600w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/attached-pop-up-to-the-button.webp 1824w” data-sizes=”(max-width: 1024px) 100vw, 1024px” />Desdobre a guia Visibilidade Dinâmica e clique em Ativar o botão de alternância . Defina o tipo de condição de visibilidade “Mostrar elemento se a condição for atendida” e a condição “É página de perfil” (da seção específica do JetEngine ) . No campo Página de perfil , escolha a subpágina Conta que mostra as informações do usuário.
” alt=”configurações de visibilidade do widget de botão” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-visibility-settings.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-visibility-settings.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-visibility-settings-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-visibility-settings-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-visibility-settings-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-visibility-settings-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-widget-visibility-settings-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Termine de personalizar o item do Listagem e clique no botão “ Atualizar ”.
Coloque a grade de listagem na página da conta
Clique para editar o modelo de subpágina Conta com as informações do usuário.
Na página de edição, colocamos o widget Título com o texto “Portfólio”.
Em seguida, adicionamos um botão para acionar o pop-up com o formulário de adição de portfólio.
Para adicionar o botão, arraste e solte o widget Elementor Button ou o widget JetElements Button e personalize suas configurações de Conteúdo e Estilo de acordo com suas necessidades.
” alt=”Widget do botão jetelements na página da conta” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-jetelements-widget-on-the-account-page.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-jetelements-widget-on-the-account-page.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-jetelements-widget-on-the-account-page-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-jetelements-widget-on-the-account-page-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-jetelements-widget-on-the-account-page-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-jetelements-widget-on-the-account-page-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/button-jetelements-widget-on-the-account-page-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Em seguida, vá para a guia Configurações avançadas e abra a guia JetPopup . Defina o pop-up com o formulário de adição de portfólio no campo Pop-up anexado e escolha o tipo de gatilho “Clique no widget” .
Coloque o widget Grade de Listagem e selecione o item de Listagem criado recentemente . De acordo com as configurações de Visibilidade Dinâmica , a Grade de Listagem ainda não mostra os botões “ Editar ” e “ Excluir ”, mas eles ficarão visíveis na página Conta no front end.
Desdobre a guia Consulta personalizada e ative a alternância. No menu suspenso, selecione a consulta CCT criada anteriormente. Como ainda não adicionamos portfólios, a grade de listagem está vazia.
Termine de personalizar o modelo e clique no botão “Atualizar” .
Coloque a grade de listagem na página de perfil de usuário único
Clique para editar o modelo de subpágina de usuário único com as informações do usuário.
Na página de edição, colocamos o widget Título na Coluna da Seção Interna com o texto “Portfólio”.
Arraste e solte o widget Grade de listagem e selecione o item de listagem criado recentemente .
Desdobre a guia Consulta personalizada e ative a alternância. No menu suspenso, selecione a consulta CCT criada anteriormente.
Além disso, abrimos a guia Configurações avançadas do widget Seção interna , desdobramos a guia Visibilidade dinâmica e ativamos a alternância. Selecionamos o tipo de condição de visibilidade “Mostrar elemento se a condição for atendida”, condição “Consulta tem itens” e definimos a mesma consulta CCT no campo Consulta para verificar . Tais configurações permitem a exibição da seção somente se um usuário adicionar pelo menos um portfólio.
Por fim, clique no botão “ Atualizar ”.
Verifique os resultados
Abra a página Conta no front-end.
Para testar um pop-up com o formulário de adição de portfólio, apertamos o botão e o formulário apareceu.
Vamos preencher os campos e clicar no botão “ Enviar ”.
Depois disso, um item de portfólio recém-criado aparece na grade de listagem.
Se clicarmos no botão “ Editar ” no item da listagem, aparece o pop-up com o formulário de edição do portfólio. Devido às configurações predefinidas do formulário, os campos do formulário são preenchidos automaticamente com os valores dos metacampos do item CCT.
Alteramos o nome do portfólio e clicamos no botão “ Enviar ” . A alteração foi salva e exibida na grade de listagem.
Se clicarmos no botão “ Excluir ” , a notificação aparecerá com a mensagem de confirmação de exclusão. Podemos clicar no botão “ Ok ” para excluir o item ou “ Cancelar ” para salvá-lo.
Excluímos o portfólio, então a grade de listagem está vazia novamente.
Agora, vamos verificar a página de perfil.
Quando adicionamos um novo item da página Conta, a seção com portfólio apareceu na página Perfil do usuário. A página não mostra os botões “ Adicionar ”, “ Editar ” e “ Excluir ” de acordo com as configurações de visibilidade dinâmica.
Isso é tudo. Agora você sabe como permitir que os usuários adicionem seu portfólio por meio do formulário front-end JetFormBuilder na página Conta e como exibi-lo na página Perfil do usuário usando o plugin JetEngine WordPress.