Como mostrar ou ocultar o conteúdo por data usando visibilidade dinâmica

O plugin JetEngine permite que você defina quaisquer condições específicas necessárias para mostrar ou ocultar o conteúdo. Um dos principais recursos do módulo Visibilidade Dinâmica é mostrar e ocultar conteúdo por data. Então, vamos descobrir como implementar esse recurso no site WordPress.

Mostrar conteúdo

Vá para a página editada pelo Elementor para aplicar o recurso Dynamic Visibility. Como exemplo, passaremos para a Página Única CPT .

Escolha a seção, coluna ou widget ao qual deseja aplicar o módulo Visibilidade Dinâmica. Vá para a guia Avançado , encontre Visibilidade Dinâmica e alterne o alternador Ativar .

Primeiramente, escolha o tipo de condição Visibilidade nas configurações . Agora mostramos o elemento de acordo com as condições definidas.

Abra o seletor e defina a Condição . Como exemplo, selecionamos a opção “Maior que”.

Pressione o botão “ Tags Dinâmicas ” no Campo e selecione entre as opções apresentadas. Desta vez trabalharemos com o “Campo Personalizado” do JetEngine .

” alt=”botão de tags dinâmicas” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/dynamic-tags-button-full.png” />Como planejamos mostrar conteúdo com base no campo personalizado, crie inicialmente o metacampo Data ou Datahora. 

Para fazer isso, vá para JetEngine > Tipos de postagem e clique no botão “ Editar ” que aparece ao lado do título do tipo de postagem.

” alt=”botão de edição da lista de tipos de postagem personalizados” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/custom-post-types-list-edit-button-full.png” />Assim que o editor for aberto, role para baixo até a guia Meta Fields e pressione o botão “ Adicionar novo ”. Preencha todos os campos necessários adequadamente e ative a opção Salvar como carimbo de data / hora .

Pressione o botão “ Atualizar tipo de postagem ”.

” alt=”configurações do campo de data do tipo de postagem do jetengine” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/jetengine-post-type-date-field-settings-full.png” />Abra o tipo de postagem e prossiga para a edição da postagem. Preencha o campo de data e clique no botão “ Atualizar ”. Repita esse processo com outras postagens.

Retorne ao editor de página única. Selecione o campo Data/Datahora que você acabou de criar.

Clique no botão “ Tags dinâmicas ” próximo ao campo Valor .

Escolha a tag dinâmica “Macros” do JetEngine e defina a opção “Hoje” como um Valor .

Deixe o Contexto como padrão e escolha a opção “Numérico” no campo Tipo de Dados .

” alt=”contexto e tipo de dados” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/context-and-data-type-full.png” />Assim que a Visibilidade Dinâmica estiver ajustada, clique no botão “ Atualizar ” e verifique as postagens do tipo de postagem personalizada.

A data da primeira opção está próxima, então vemos o banner.

” alt=”próximo evento no front-end” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/upcoming-event-on-the-front-end-full.png” />A segunda opção é o evento que já terminou e o banner não aparece aqui.

” alt=”evento finalizado no front-end” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/finished-event-on-the-front-end-full.png” />Dessa forma, você também pode ocultar algum conteúdo; vamos verificar o exemplo.

Ocultar conteúdo

Criaremos um metacampo Datetime desta vez. No entanto, você também pode criar um metacampo de data, se desejar.

Vá para JetEngine> Tipos de postagem e abra o tipo de postagem que você gostaria de ocultar.

Role para baixo até a guia Meta Campos e adicione um novo meta campo. 

Preencha o Rótulo e vá para Nome/ID que deve conter apenas letras latinas em minúsculas, números, caracteres “-” e “_”. Deixe um tipo de objeto “Campo” e selecione “Data e Hora” como tipo de campo . Não se esqueça de ativar a opção Salvar como carimbo de data/hora .

Pressione o botão “ Atualizar tipo de postagem ”.

” alt=”configurações de campo de data e hora do tipo de postagem do jetengine” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/jetengine-post-type-datetime-field-settings-full.png” />Em seguida, prossiga para as postagens do tipo de postagem personalizada e defina os valores de data e hora para cada postagem necessária.

Clique no botão “ Concluído ” toda vez que quiser salvar as alterações do campo Datahora e no botão “ Atualizar ” para salvar a postagem.

Vamos supor que você queira exibir eventos na listagem. Para fazer isso, vá para JetEngine > Listagens .

Adicione um novo ou abra a listagem já criada.

Adicione todos os widgets necessários. Por exemplo, adicionamos Dynamic Image e Dynamic Field . Quanto ao elemento de ocultação, usamos o Heading.

Ajustamos todas as configurações necessárias de conteúdo e estilo e passamos para a seção  Avançado .

Clique na guia Visibilidade Dinâmica e alterne Ativar Visibilidade Dinâmica para definir as condições. 

Escolha a opção “Ocultar elemento se a condição for atendida” como o tipo de condição de visibilidade e “Menos que” como uma condição .

Pressione o ícone Tags dinâmicas para selecionar a opção “Campo personalizado”.

Abra o menu suspenso Campo recém -exibido e selecione o metacampo Datetime que você criou anteriormente.

” alt=”configurações de campo personalizado” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/custom-field-settings-full.png” />Clique no botão Tags dinâmicas no campo Valor e escolha a opção “Macros”. Entre todas as macros fornecidas, escolha “Hoje”.

” alt=”hoje macros para ocultar elemento” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/today-macros-for-hiding-element-full.png” />Deixe o Contexto como “Padrão” e escolha “Numérico” na lista suspensa Tipo de dados .

Pressione o botão “ Atualizar ” e abra a página onde deseja colocar a listagem.

Para colocar a listagem, use o widget Listing Grid .

Quando estiver pronto, você pode clicar no botão “ Publicar/Atualizar ” e verificar o resultado do front-end.

O plugin JetEngine foi atualizado e agora permite usar Dynamic Visibility com os blocos do editor padrão do WordPress.

Para aplicar Dynamic Visibility , você precisa criar um CPT e adicionar um metacampo Date a ele. Não se esqueça de ativar a opção Salvar como carimbo de data/hora .

Certifique-se de que as postagens do CPT tenham o metacampo necessário preenchido com dados.

Mostrar conteúdo

Abra um modelo de listagem criado em Gutenberg . O item a seguir será exibido em uma grade de listagem.

O objetivo é mostrar o “ Próximo evento! ” título apenas para eventos futuros, e quando o evento já tiver terminado, mostre o título “ Tour Ended! ”Mensagem e ocultar o botão.

Para mostrar um determinado elemento de um item da listagem, selecione o bloco desejado e clique no ícone em forma de olho na barra de ferramentas.

Em uma janela pop-up, ative o botão Ativar e prossiga para configurar as condições de visibilidade.

Defina o tipo de condição de visibilidade para “Mostrar elemento se a condição for atendida” e clique no botão “ Adicionar novo item ”.

Selecione “Maior que” na lista suspensa.

No Campo , clique no botão Tags Dinâmicas e escolha “Dados personalizados” como Fonte .

No menu suspenso Selecionar dados para mostrar , escolha a opção “Metacampo JetEngine” e especifique o metacampo Data

que você criou anteriormente no CPT abaixo. Defina Retorno para “Valor do campo”.

Role para baixo na janela de configurações da fonte de dados e clique no botão “ Aplicar ”.

Prossiga para o campo Valor . Clique no botão Tags dinâmicas . Em seguida, selecione “Dados personalizados” como fonte e escolha as macros “Hoje” na lista abaixo.

Não se esqueça de aplicar as configurações.

Certifique-se de selecionar a opção “Numérico” no menu suspenso Tipo de dados .

A mesma abordagem é aplicada ao “ Tour terminou! ” mensagem; entretanto, desta vez, a Condição está definida como “Menos que”.

O resto das configurações são as mesmas.

Ocultar conteúdo

Para ocultar o elemento necessário, basta definir o tipo de condição de visibilidade como “Ocultar elemento se a condição for atendida” e definir a condição necessária.

Certifique-se de aplicar as configurações e atualizar o modelo quando terminar.

Adicione uma grade de listagem à página necessária, selecione o modelo de listagem onde você aplicou a Visibilidade Dinâmica e prossiga para o front end.

De acordo com as condições definidas, o evento futuro terá a mensagem “ Próximo evento! ” mensagem. O evento passado que já terminou tem um “ Tour encerrado! ”Mensagem em vez de um botão.