Alterando o banner após filtrar categorias

Criando Taxonomia Personalizada

Para criar uma taxonomia personalizada, caso ainda não tenha feito isso, vá para o Painel do WordPress > JetEngine > guia Taxonomias e clique no botão “ Adicionar Novo ”.

Na guia Configurações Gerais , digite o Nome da Taxonomia (no nosso caso, “Tipo de Vaga”), clique no campo Taxonomy Slug para gerar um slug (você pode editá-lo, mas certifique-se de que contenha apenas letras, números e `-` ou `_` caracteres) e escolha o tipo de postagem necessário na lista suspensa homônima (no nosso caso, “Empregos (vagas) CPT ).

Na guia Configurações de metacampos , você pode adicionar os campos personalizados desejados . Por exemplo, criamos o metacampo “ Mídia ” para os ícones do tipo de vaga que serão adicionados ao banner.

As configurações essenciais de taxonomia para este tutorial são abordadas. Você pode ajustar outras configurações se desejar — a descrição detalhada é fornecida na Visão geral da taxonomia personalizada .

Pressione o botão “ Adicionar/Atualizar Taxonomia ” após a personalização.

Em seguida, vá até a aba com o nome da taxonomia que pertence à aba tipo de postagem. Por exemplo, visitamos Painel WordPress > Empregos (Vagas) > Tipo de Vaga . 

Para adicionar uma nova tag, insira Nome , Slug (certifique-se de que esteja tudo em letras minúsculas e contenha apenas letras, números e hifens, pois é a versão do nome compatível com URL), Descrição (opcional) e preencha os metacampos necessários. Em seguida, pressione o botão “ Adicionar nova tag ”. 

Por exemplo, adicionamos um slogan como Descrição e ícone no campo “Mídia” personalizado.

Após preencher os campos, pressione o botão “ Adicionar Nova Tag ”.

Adicione quantas tags desejar.

Para anexar postagens às tags, vá até a guia CPT no painel do WordPress e clique para editar uma postagem ou criar uma nova.

Salve as alterações clicando no botão “ Publicar/Atualizar ”.

Criando Filtro por Categoria

Vá para Painel do WordPress> Filtros Inteligentes> Adicionar Nova guia para criar um filtro para categorias.

Insira o nome do filtro e escolha o tipo de filtro . Para a fonte de dados de taxonomia, você pode escolher os tipos de filtro “ Selecionar ”, “ Rádio ”, “ Lista de caixas de seleção ” e “ Visual ”.

Criamos o filtro “ Rádio ” para que os usuários possam escolher apenas uma opção do filtro no front end. O filtro “ Select ” também é adequado para o nosso caso. Se criássemos o filtro “ Lista de Checkboxes ”, o usuário poderia selecionar duas ou mais opções, e vários banners seriam exibidos simultaneamente. O filtro “ Visual ” pode ter o comportamento de um rádio ou de uma caixa de seleção.

Após escolher o tipo de filtro, selecione a Fonte de Dados “Taxonomias” e escolha a Taxonomia necessária (“Tipo de Vaga”, no nosso caso).

Depois disso, você estará livre para ajustar as opções de acordo com suas necessidades.

Por exemplo, habilitamos a capacidade de desmarcar botões de opção e mostrar termos vazios e definir rótulos de filtro na seção correspondente.

Depois de ajustar as configurações do filtro, pressione o botão “ Atualizar ”.

Configurando uma consulta personalizada

Siga o diretório WordPress Dashboard > JetEngine > Query Builder e pressione o botão “ Adicionar Novo ”.

Na seção Configurações Gerais , insira o Nome e escolha o Tipo de Consulta “ Consulta de Termos ” .

Na seção Consulta de Termos , vá para a aba Geral e escolha a Taxonomia necessária .

Abra a guia Incluir/Excluir , pressione o ícone “ pilha de moedas ” próximo ao campo “ Incluir ” e selecione a macro “Consulta JetSmartFilters”.

No pop-up aberto, escolha o tipo “Taxonomia” e insira o slug da taxonomia como o nome da variável .

Clique no link “ Configurações avançadas ”, mantenha o contexto “Objeto padrão” e digite “9999999” no campo Fallback . Isso garante que a listagem com a origem da consulta mostrará o resultado somente quando o filtro for aplicado. Em outras palavras, sem o substituto, a listagem do banner mostrará todos os termos; definir o substituto garante que o banner ficará invisível até que uma opção do filtro seja escolhida.

Em seguida, clique em “ Voltar ” e no botão “ Aplicar ”.

Ajuste outras configurações de consulta se desejar e clique no botão “ Adicionar/Atualizar Consulta ”.

Criando uma listagem

Vá para Painel WordPress> JetEngine> Listagens e clique no botão “ Adicionar Novo ”.

Escolha a fonte da listagem “Termos” , defina a taxonomia necessária no campo Da taxonomia e insira o nome do item da listagem . Como visualização de listagem , você pode selecionar os editores Elementor, Blocks (Gutenberg) ou Bricks. Por exemplo, escolhemos a opção “Elementor”.

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

Aqui, você pode personalizar o modelo para combinar com a aparência do banner. Por exemplo, arrastamos e soltamos o widget Dynamic Image e definimos o campo “Media” da taxonomia personalizada como Source .

Em seguida, colocamos o widget Dynamic Field , para o qual selecionamos a fonte “Post/Term/User/Object Data”, Object Field “Term description” e tag HTML “H2” .

Para colocar o banner na moldura, abrimos as configurações de Estilo das configurações de Seção , desdobramos a aba Borda e definimos o Tipo de Borda “Sólida” . Você pode personalizar outras configurações de estilo para a seção, colunas e widgets da listagem, se estiver interessado.

Depois de ajustar todas as configurações, clicamos no botão “ Atualizar ”.

Personalizando um Banner na Página

Crie uma nova página ou abra a necessária.

Por exemplo, fomos para WordPress Dashboard > Pages > Add New Page , digitamos o nome da página e clicamos no botão “ Edit with Elementor ”.

Colocamos o widget Listing Grid no topo da página, escolhemos a Listagem recentemente criada para o banner e definimos o valor “1” como um Número de Colunas .

Depois de aplicar uma consulta personalizada à Grade de Listagem , ela mostrará a mensagem Não encontrado . Você pode deixar este campo vazio para tornar o widget invisível até que o filtro seja aplicado ou definir uma mensagem personalizada.

Em seguida, desdobramos a guia Consulta Personalizada , ativamos a alternância Usar Consulta Personalizada e escolhemos a Consulta Personalizada recentemente criada .

Abrimos a seção Configurações avançadas e digitamos o ID CSS (por exemplo, pode ser “lista de banners”). Usaremos esse ID nas configurações de filtro posteriormente.

Em seguida, adicionamos duas colunas e colocamos outra grade de listagem na segunda coluna. Aqui, selecionamos o Listagem com vagas criadas para o CPT “Empregos (Vagas)” . Para saber mais, prossiga para o tutorial Como criar um modelo de listagem para tipos de postagem no Elementor . 

Abrimos a seção Configurações avançadas e digitamos também o ID CSS (no nosso caso, é “lista principal”).

Eventualmente, arrastamos e soltamos o widget Filtro de Rádio . Se você criou o filtro “Selecionar”, você precisa usar o widget Selecionar Filtro respectivamente.

Nas configurações de conteúdo do filtro , definimos o filtro necessário no campo Selecionar filtro .

O campo Este filtro para é para o provedor principal do filtro. No nosso caso é a Grade de Listagem com vagas, então escolhemos a opção “JetEngine”. Saiba quais widgets, blocos e elementos podem ser usados ​​com os filtros JetSmartFilters na Visão geral dos provedores de filtros .

Opcionalmente, definimos essas configurações: escolhemos o tipo Aplicar “AJAX” e Aplicar “Alteração de valor” e ativamos a alternância Mostrar rótulo do filtro .

No campo Query ID , inserimos o CSS ID do widget do fornecedor principal (no nosso caso, é a “lista principal” da Listing Grid com vagas).

Para anexar o filtro à Grade de Listagem com banners, ativamos o botão Provedores Adicionais Habilitados e pressionamos o botão “ + Adicionar Item ”. Como o segundo provedor também é um Listing Grid , escolhemos o Provedor Adicional “JetEngine” . No campo ID de consulta adicional , colamos o ID CSS (“banner-list”, no nosso caso).

Para saber mais sobre a guia Configurações adicionais , vá para o capítulo Configurações adicionais da Visão geral do filtro de rádio .

Você também pode definir as opções do indexador . Para isso, ativamos os botões Aplicar Indexador e Mostrar Contador . O contador funcionará corretamente no front-end após a aplicação do filtro.

As configurações essenciais foram ajustadas, então agora você pode personalizar as configurações de estilo. 

Por exemplo, para personalizar o rótulo do filtro, abrimos a guia da seção Estilo do widget Filtro de Rádio e desdobramos a guia Rótulo . Clicamos no ícone “ lápis ” próximo à Tipografia para abrir um pop-up. Aqui, definimos o tamanho “20”, a espessura “600 (semi negrito)” e a altura da linha “40” .

Depois de modificar todas as configurações necessárias, clique no botão “ Publicar/Atualizar ”.

Verificando os resultados

Abrimos a página no front end. O banner não foi exibido porque o filtro ainda não foi aplicado.

Após escolhermos uma opção do Filtro de Rádio (categoria “Full Time”), o banner apropriado apareceu.

Após selecionarmos outra opção (a categoria “Estágio”), outro banner apareceu.

Isso é tudo. Agora você sabe como alterar o banner no front end após filtrar por categoria usando os plugins JetSmartFilters e JetEngine em seu site WordPress.