Dynamic Visibility

Exibindo emblemas em um perfil de usuário dependendo do número de postagens curtidas

22 jun 2024 7 min de leitura 1.355 palavras

Vamos supor a situação em que você deseja incentivar os usuários a curtirem cada vez mais postagens em seu site. Para fazer isso, você deseja mostrar os selos dependendo do número de postagens curtidas. 

Assim que o usuário adiciona dez postagens aos seus favoritos, ele recebe o selo de “Membro Interativo” e, após curtir mais de 15 postagens, o selo muda para “Membro Engajado”.

Continue lendo para descobrir como ajustar esse recurso com a ajuda do plugin JetEngine e do complemento Public User Meta Stores .

Comece abrindo a página Crocoblock DevTools . Pressione o botão “ JetEngine ” abaixo do título da página para tornar a pesquisa mais específica.

página de ferramentas de desenvolvimento do crocoblock

Encontre o complemento Public User Meta Stores e clique no botão “ Download ”. Agora o arquivo está salvo no seu computador.

meta-lojas de usuário público do jetengine devtools

Abra o painel de administração do site WordPress. Aqui, navegue até Plugins > Adicionar novo . 

Clique no botão “ Carregar plug-in ”, depois em “ Escolher arquivo ” para encontrar o arquivo complementar necessário no computador e, por fim, em “ Instalar agora ”.

Não se esqueça de ativar o complemento após sua instalação.

adicionar plug-in de meta-lojas de usuário público do jetengine

Crie um armazenamento de dados

Se você ainda não fez isso, habilite o módulo Data Stores no WordPress Dashboard > guia JetEngine Modules .

Ative o recurso Data Stores e pressione o botão “ Salvar ”.

módulo de armazenamento de dados ativadoNavegue até a guia Data Stores para criar um novo data store. Clique no botão “ Nova Loja ”.

dados do jetengine armazenam novo botão de lojaPreencha seu nome e slug e selecione o tipo de armazenamento “Metadados do usuário” que apareceu após instalarmos e ativarmos o complemento.

Defina o tamanho máximo ; é o número máximo de itens permitidos para manter no armazenamento de dados. Você pode deixar “0” neste campo para não ter limite de itens do armazenamento de dados.

Você também pode ativar o recurso Contar itens para contar quantas vezes o item foi adicionado ao armazenamento de dados dos usuários.

Em seguida, decida se deseja ativar o recurso É loja de usuários para conter os IDs de usuário na loja. É permitido apenas para armazenamentos do lado do servidor.

O seguinte recurso Armazenar item em visualização deve ser ativado se você deseja criar uma loja “Visualizados recentemente”, por exemplo. Mais precisamente, adiciona o item à loja assim que o usuário visita a página de postagem única.

Após ajustar as configurações, clique no botão “ Salvar ”.

configurações de armazenamento de dados de postagens favoritas

Crie uma lista de postagens

Examinaremos as configurações dos construtores de páginas Elementor e Gutenberg.

Vamos criar uma listagem para poder adicionar postagens ao armazenamento de dados. 

Vá para WordPress Dashboard > JetEngine > Listings , abra a listagem de postagens que você criou anteriormente ou clique no botão “ Adicionar novo ” para criar uma nova.

listando itens motor a jatoNo pop-up aberto, selecione a fonte da listagem “Postagens” e escolha o tipo de postagem necessário no campo Do tipo de postagem . No caso descrito, estes são os posts padrão do WordPress.

Defina o nome do item da listagem e selecione a visualização da listagem “Elementor” ou “Blocks (Gutenberg)” . 

Pressione o botão “ Criar item de listagem ” para abrir o editor escolhido.

configurar pop-up de item de listagem

Ajustar uma listagem no Elementor

Adicione os widgets necessários à página. Por exemplo, colocamos a Imagem Dinâmica com uma miniatura do post e o Campo Dinâmico contendo o título do post.

widgets dinâmicos na listagemEm seguida, procure o widget Dynamic Link e coloque-o na página. Escolha a fonte “Adicionar à loja” e escolha o item recém-construído no campo Selecionar loja .

Trabalhe nas configurações adicionais, se necessário.

” alt=”link dinâmico adicionado à fonte da loja” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/dynamic-link-add-to-store-source-full.png” />Depois disso, adicione mais um widget Dynamic Link . A Fonte deve ser definida como “Remover da Loja”. Além disso, escolha o armazenamento de dados necessário no campo suspenso Selecionar armazenamento .

Você pode adicionar outros widgets necessários e pressionar o botão “ Atualizar ” para salvar as alterações.

” alt=”link dinâmico removido da fonte da loja” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/dynamic-link-remove-from-store-source-full.png” />

Recrie uma listagem em Gutenberg

As mesmas configurações podem ser encontradas no Gutenberg Block Editor. Basta selecioná-lo como tipo de listagem no pop-up de configuração principal.

Aqui, adicione o Link Dinâmico para adicionar e remover os itens da loja. 

É um pouco diferente do widget Dynamic Link no Elementor. Depois de selecionar a fonte “Adicionar ao armazenamento” , você pode preencher o campo Definir slug de armazenamento com o slug que você inseriu nas configurações do armazenamento de dados anteriormente.

Clique no botão “ Atualizar ” para salvar as alterações.

” alt=”listagem de armazenamento de dados em gutenberg” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/data-store-listing-in-gutenberg-full.png” />

Editar página de perfil

Vá para a página que você definiu como página de usuário único no WordPress Dashboard > JetEngine > Profile Builder > Pages . 

Por exemplo, escolhemos a página chamada “Perfil”.

Aviso

Certifique-se de que o modo Modelo esteja definido como “Conteúdo” para que você possa fazer alterações na página.

” alt=”modo de modelo de conteúdo” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/content-template-mode-full.png” />Vá para Painel do WordPress> Páginas e abra o editor de páginas necessário.

página de perfil

Modifique uma página de perfil no Elementor

Complete a página com os widgets desejados. Em nosso exemplo, você pode ver a Imagem Dinâmica e vários widgets de Campo Dinâmico na página.

página de perfil no elementorEm seguida, adicionamos um widget Título para torná-lo um emblema. Aqui preenchemos o campo Título na aba Conteúdo e abrimos a aba Avançado .

cabeçalho de membro interativoAtive o botão Ativar . Selecione “Mostrar elemento se a condição for atendida” como o tipo de condição de visibilidade e pressione o botão “ Adicionar item ”.

É hora de definir a primeira Condition . Selecione a opção “Maior que” no campo correspondente.

Pressione o botão “ Tags Dinâmicas ” próximo ao Campo .

botão de tags dinâmicas próximo ao campoSelecione a tag dinâmica “Armazéns de dados de usuários públicos: obter contagem de lojas” e pressione-a no campo para abrir suas configurações. 

Escolha a Loja criada e o Contexto “Usuário Consultado” nas configurações e vá para o seguinte campo  Valor .

” alt=”armazenamentos de dados de usuários públicos obtêm configurações de armazenamento” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/public-user-data-stores-get-store-settings-full.png” />Preenchemos este campo com o valor “10”, deixamos o Contexto “Default” e definimos o Tipo de dados “Numeric” .

Em seguida, pressionamos o botão “ Adicionar Item ” para ajustar mais uma condição que mostrará o crachá somente se menos de 15 itens forem adicionados à loja.

” alt=”membro interativo maior que condição” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/interactive-member-greater-than-condition-full.png” />Desta vez, será a condição “Menos que” para ocultar este selo quando o número de postagens curtidas for superior a 15.

No menu “Tags dinâmicas”, selecione “Armazéns de dados de usuários públicos: obter contagem de lojas”, selecione a loja e o contexto “Usuário consultado” .

Defina o valor necessário (no nosso caso, “15”) e o tipo de dados “Numeric” .

membro interativo menor que a condiçãoAdicione mais um widget de link dinâmico . Ajuste a guia Conteúdo e vá para a guia Avançado .

título de membro engajadoEncontre a seção Visibilidade Dinâmica e ative o botão Ativar .

Selecione o tipo de condição de visibilidade “Mostrar elemento se a condição for atendida” e a Condição “Maior que” . 

Escolha o campo “Armazéns de dados de usuários públicos: obter contagem de lojas” e defina o valor como o número desejado. Como exemplo, selecionamos “15”. Os usuários que curtirem mais de 15 postagens recebem o selo “Membro Engajado”.

Além disso, deixe o Contexto “Padrão” e o Tipo de Dados “Numérico” .

Uma vez feito isso, você pode estilizar a listagem e pressionar o botão “ Atualizar ”.

membro engajado maior que a condição

Alterar o conteúdo da página de perfil em Gutenberg

Os mesmos blocos correspondentes podem ser encontrados no Block Editor.

Pressione o ícone “Visibilidade Dinâmica” para abrir suas configurações.

ícone de visibilidade dinâmica em gutenbergAgora, você pode adicionar as condições de visibilidade clicando no botão “Tags dinâmicas”.

botão de tag dinâmica próximo ao campo em gutenbergAjuste a guia Data Store conforme descrito na parte anterior do artigo sobre Elementor.

condições de visibilidade tag dinâmica em gutenbergEntão, o resultado final fica assim:

condições de visibilidade para rumo em gutenbergFinalmente, você pode ajustar todas as configurações do bloco e obter o resultado desejado. Clique no botão “ Atualizar ” para salvar a página.

página de perfil em gutenberg

Coloque a listagem de postagens na página

Vá para a página onde deseja colocar a listagem de postagens com os botões “ Adicionar à Loja/Remover da Loja ”.

Encontre o widget Listing Grid e coloque-o na página. Selecione a listagem de postagens necessária e ajuste as seguintes configurações, se necessário.

Feito isso, pressione o botão “ Atualizar ”.

listagem de postagens no elementorVocê pode abrir esta página e adicionar quantas postagens precisar aos seus favoritos.

listagem de postagens no front-end

Verifique o resultado

Abra o perfil do usuário para ver o crachá anexado; agora, você pode adicionar dez ou mais postagens ao armazenamento de dados e ver se o selo “Membro Interativo” é mostrado.

crachá de membro interativoE é assim que a página de perfil ficará se o usuário adicionar 15 ou mais postagens aos seus favoritos.

selo de membro engajadoPor fim, você pode ver os emblemas anexados a cada usuário que gostou de mais de dez postagens. 

É isso; agora você sabe como mostrar os emblemas necessários na página de perfil de usuário do WordPress, dependendo do número de postagens curtidas usando o complemento Public User Meta Stores da JetEngine e seus recursos Profile Builder e Data Stores .

Curtiu o conteúdo? Tem muito mais no grupo.

Entre na maior comunidade gratuita de Crocoblock do Brasil e acelere seus projetos.

Entrar no Grupo Gratuito