Campos personalizados são uma maneira poderosa de exibir informações adicionais em um site WordPress.
Por exemplo, você pode usá-los para armazenar detalhes como SKU do produto, cor, ingredientes de receitas ou preços de imóveis.
No entanto, mostrar esses dados aos visitantes de uma forma com a qual eles possam interagir é frequentemente um desafio.
É aqui que a criação de um filtro para seus campos personalizados ajuda os usuários a refinar os resultados e encontrar exatamente o que precisam. Felizmente, existe uma maneira simples de permitir que os usuários classifiquem o conteúdo com base nesses dados personalizados.
Neste artigo, mostraremos como criar filtros de campos personalizados no WordPress.
Por que os Filtros de Campos Personalizados São Importantes para o Seu Site?
Sabemos por experiência que campos personalizados são ótimos para armazenar dados extras. Mas esses dados são inúteis se os visitantes não puderem usá-los para classificar o conteúdo.
Imagine tentar comprar uma camisa online, mas ter que clicar em cada produto individualmente apenas para ver se ela está disponível no seu tamanho. É exatamente isso que acontece quando você não tem filtros conectados aos seus campos personalizados.
Vamos analisar um site de imóveis como exemplo. Você pode usar campos personalizados para armazenar o número de quartos ou a metragem quadrada total de uma casa.
Sem um filtro para esses campos, uma família procurando uma casa com três quartos tem que percorrer todas as listagens de estúdios.
O mesmo se aplica a um blog de culinária. Frequentemente vemos campos personalizados usados para detalhes específicos como contagem de calorias ou tempo de preparo.
Se um visitante quer uma refeição rápida de 30 minutos, ele não deveria ter que ler longas receitas de cozimento lento para encontrar uma.
Os visitantes querem encontrar coisas rapidamente. Se eles não puderem filtrar por preço, localização ou ingredientes específicos, eles provavelmente sairão do seu site.
Adicionar esses filtros específicos preenche a lacuna entre os dados adicionais e a experiência do usuário. Transforma uma lista confusa em um catálogo organizado.
Agora, vamos ver como você pode configurar facilmente um filtro de campos personalizados no WordPress.
Crie Filtros de Campos Personalizados no WordPress
O método mais fácil para adicionar filtros de campos personalizados é usando um plugin como o WPFilters.
WPFilters é o plugin de filtragem mais capaz, fácil de usar para iniciantes e permite que você adicione filtros no estilo Amazon ao seu site WordPress.
Ele permite que você crie conjuntos de filtros personalizados com base em categorias, tags ou dados personalizados e os coloque em qualquer lugar do seu site.
Isso permite que seus visitantes explorem seu conteúdo para encontrar exatamente o que precisam em segundos.
WPFilters é construído pela mesma equipe por trás do SearchWP. Isso nos dá confiança de que ele funcionará perfeitamente com nossos resultados de pesquisa.
Com WPFilters, você pode transformar um campo de texto simples em um checkbox, dropdown, sliders de intervalo, botão de rádio e mais filtros. Isso coloca o poder dos seus dados personalizados diretamente nas mãos dos seus visitantes.
Agora, vamos ver como você pode usá-lo para criar filtros de campos personalizados em seu site.
Passo 1: Instale e Ative o WPFilters
Primeiro, você precisará ir ao site do SearchWP para obter sua cópia do WPFilters.
Assim que você se inscrever, faça login na sua área de conta e clique na aba Downloads.
Aqui, clique no botão Download WPFilters para salvar o arquivo no seu computador. Recomendamos também copiar sua chave de licença agora para tê-la pronta para mais tarde.
Em seguida, você precisa fazer o upload e instalar o plugin no seu site. Se você é novo nisso, consulte este guia sobre como instalar um plugin do WordPress.
Após a ativação, o assistente de configuração aparecerá. Clique no botão ‘Vamos Começar’ para concluir a configuração inicial.
Etapa 2: Crie um Novo Elemento de Filtro
Para começar, basta navegar até WPFilters » Elementos no seu painel do WordPress.
Em seguida, clique no botão Adicionar Novo para começar a construir seu filtro.
A partir daqui, você deve dar um nome claro ao seu filtro no topo. Isso ajuda você a acompanhar as coisas se planeja criar vários filtros mais tarde.
Em seguida, observe a seção Tipo de Campo. Você pode escolher como deseja que o filtro apareça, como caixas de seleção, um menu suspenso, um controle deslizante ou botões de rádio.
Por exemplo, um controle deslizante funcionará melhor se você quiser que os visitantes filtrem por preço, uma caixa de seleção é ótima para classificar itens usando várias opções, ou um menu suspenso para selecionar uma marca.
Você também pode permitir que os usuários filtrem por palavras-chave específicas usando o campo de filtro de pesquisa.
Etapa 3: Conecte o Filtro a um Campo Personalizado
Agora, você precisa dizer ao filtro de onde obter suas informações. Para fazer isso, basta rolar para baixo até a seção Fonte de Dados.
Em seguida, clique no menu suspenso e role até a seção Campo Personalizado. A partir daqui, você pode escolher qual campo personalizado deseja usar para criar um filtro.
Por exemplo, você pode escolher preço, cor, marcas, peso, comprimento e outros atributos do produto.
O WPFilters também funciona perfeitamente com plugins de campos personalizados como o Advanced Custom Fields (ACF). Você pode facilmente criar um filtro para qualquer um dos campos do ACF no seu site.
Etapa 4: Personalize as Configurações do Filtro
Após conectar a fonte de dados, você precisa fazer o filtro parecer bom para os visitantes, personalizando-o.
Você pode começar rolando para baixo até a seção Contêiner para alterar como a caixa do filtro se comporta.
Por exemplo, habilitar a opção ‘Mostrar Título’ permite que os usuários saibam o que estão filtrando, como “Faixa de Preço” ou “Ingredientes”.
Ou você pode ativar a opção ‘Colapsável’ para permitir que os usuários ocultem o filtro para economizar espaço. Também gostamos de usar a opção ‘Horizontal’ para colocar as escolhas lado a lado em vez de em uma longa lista vertical.
Em seguida, observe a seção Itens abaixo para controlar as escolhas específicas na lista.
Aqui, você pode habilitar ‘Contagem de Itens’ para mostrar exatamente quantos resultados existem para cada opção, o que ajuda a definir as expectativas do usuário. Geralmente sugerimos manter Mostrar Vazio desativado para que seus visitantes não percam tempo clicando em opções que levam a zero resultados.
Quando estiver satisfeito com a aparência de tudo, basta rolar até o topo e clicar no botão Salvar no canto superior direito.
Você também verá uma prévia do filtro de campos personalizados no painel à esquerda.
Etapa 5: Exibir o Filtro de Campos Personalizados em Seu Site
A melhor coisa sobre o WPFilters é que você pode colocar seu novo filtro em qualquer lugar do seu site.
Vamos ver como você pode adicionar o filtro a uma página e à barra lateral do seu site.
1. Adicionando o Filtro de Campos Personalizados a uma Página
O plugin oferece uma opção de incorporação integrada ao criar o filtro. Simplesmente clique no botão 'Incorporar' no canto superior direito.
Em seguida, uma janela pop-up será aberta onde você pode escolher entre diferentes opções de incorporação.
Você pode escolher entre o bloco Gutenberg, um shortcode ou código PHP se você for um desenvolvedor.
Há também uma opção para adicionar o filtro a uma página existente ou criar uma nova.
Por exemplo, digamos que você queira usar o 'Bloco Gutenberg' e adicioná-lo a uma nova página.
Em seguida, você precisará inserir o nome da nova página e, em seguida, clicar no botão 'Vamos Lá'.
Seu filtro de campos personalizados será pré-carregado na nova página, e você poderá visualizá-lo no editor de conteúdo do WordPress.
Em seguida, você pode clicar no botão 'Publicar' no canto superior direito.
Por outro lado, você também pode colocar o bloco WPFilters manualmente em qualquer página ou postagem.
Para começar, basta abrir a página ou postagem onde você deseja que o filtro apareça, clicar no botão de mais (+) para adicionar um novo bloco e pesquisar por WPFilters Element.
Em seguida, você precisará selecionar o filtro que acabou de criar no painel de Configurações.
Simplesmente clique no menu suspenso em 'Selecionar Elemento' e escolha seu filtro.
Quando terminar, clique no botão 'Salvar'.
2. Adicionando o Filtro de Campos Personalizados à Barra Lateral
Você também pode adicionar o filtro à barra lateral do seu site. Esta é uma ótima maneira de manter os filtros visíveis para os usuários, para que eles possam classificar e encontrar rapidamente o produto ou conteúdo certo.
Para começar, você pode ir para Aparência » Widgets no seu painel do WordPress. Observe que esta etapa pode diferir dependendo do tema do WordPress que você está usando.
Em seguida, role para baixo até a seção da barra lateral e clique no sinal '+' para adicionar o bloco de widget WPFilters Element.
A partir daqui, você pode selecionar o filtro de campos personalizados que criou no painel de configurações à direita.
Simplesmente clique no menu suspenso 'Selecionar Elemento' e escolha seu filtro.
Quando terminar, prossiga e clique no botão Atualizar.
Agora, visite a página para ver o filtro de campos personalizados em ação.
Por exemplo, veja como diferentes filtros de campos personalizados ficam em nossa loja online de demonstração.
Perguntas frequentes sobre Filtros de Campos Personalizados
1. Posso usar filtros para dados de Campos Personalizados Avançados (ACF)?
Sim, com certeza. Usamos ACF em muitos dos nossos sites e o WPFilters funciona perfeitamente com ele.
2. Posso adicionar mais de um filtro de campo personalizado a uma página?
Com certeza. Você pode criar elementos de filtro separados para campos diferentes, como um para “Cor” e outro para “Tamanho”. Para torná-los mais visíveis, você pode empilhá-los na sua barra lateral para que os usuários possam refinar os resultados passo a passo.
3. Preciso saber programar para configurar isso?
De jeito nenhum. O principal benefício de usar o WPFilters é que ele cuida do trabalho técnico para você. Ele ajuda você a configurar filtros avançados apenas clicando nos menus, sem tocar em um único arquivo PHP.
Filtros de campo personalizado mudam a forma como os visitantes interagem com seus dados.
Esperamos que este tutorial tenha ajudado você a aprender como criá-los no WordPress sem nenhum código. Você também pode consultar nossos guias sobre como adicionar pesquisa em tempo real ao seu site e como pesquisar por categoria no WooCommerce.
Pronto para oferecer aos seus visitantes uma maneira melhor de classificar conteúdo? Você pode começar com o WPFilters aqui.
