O bloco Query Loop do WordPress já vem com um painel de Filtros, mas nenhum deles é para seus visitantes.
Essas taxonomias, autores e opções de palavra-chave ficam nas configurações do bloco do editor, onde eles decidem quais posts o loop exibe antes que alguém carregue a página.
Isso significa que um blog de viagens com uma grade de 60 posts exibe os mesmos 60 posts para todos os leitores. Alguém planejando uma viagem a Portugal ainda tem que rolar por todos os guias do Japão e do México para encontrar aquele que procurava.
Para adicionar filtros ao bloco Query Loop do WordPress que os visitantes possam clicar, você precisa adicionar código personalizado ou contratar um desenvolvedor. Mas um plugin como o WPFilters coloca um filtro de categoria ao lado do seu Query Loop, atualiza os resultados sem recarregar a página e fornece um link filtrado que você pode compartilhar.
Neste artigo, mostraremos como adicionar filtros ao bloco Query Loop do WordPress sem codificação.
Por que os Filtros Integrados do Bloco Query Loop Não São Suficientes
O bloco Query Loop exibe uma lista dinâmica de posts, páginas ou outro conteúdo em qualquer página ou modelo.
Você decide o que entra nessa lista a partir das configurações do bloco, incluindo o tipo de post, a ordem e quantos posts aparecem por página.
O painel Filtros do bloco Query Loop restringe ainda mais essa lista por categoria, tag, autor ou palavra-chave.
Você faz essas escolhas ao editar a página, e os visitantes veem apenas o resultado.
Não há caixa de seleção ou menu suspenso no front-end que permita a um leitor alterar o que o loop exibe.
Filtros de visitante colocam essas caixas de seleção e menus suspensos no front-end, para que os leitores possam refinar o loop por conta própria.
Por que Adicionar Filtros de Visitante a um Query Loop?
Notamos que uma grade longa de Query Loop funciona bem até que um site cresça além de algumas dezenas de posts.
Quatro problemas aparecem quando a grade fica longa:
- Os leitores não conseguem refinar a lista. Os filtros do lado do editor são fixos, então cada visitante recebe a mesma grade, não importa o que procurava.
- Grades longas enterram seu melhor conteúdo. Um leitor que tem que rolar página após página de posts muitas vezes desiste antes de chegar ao que queria.
- A rota do código precisa de um desenvolvedor. O WordPress permite que desenvolvedores alterem os resultados do Query Loop com o hook query_loop_block_query_vars, mas isso significa escrever e manter PHP.
- Recarregamentos completos da página tornam a navegação lenta. Cada vez que um filtro recarrega a página inteira, o leitor perde o lugar e espera tudo carregar novamente.
Um plugin de filtro adiciona filtros clicáveis ao lado do seu Query Loop existente, para que você não precise alterar suas configurações ou escrever PHP.
Como Adicionar Filtros ao Bloco Query Loop do WordPress com WPFilters
Recomendamos o WPFilters como a maneira mais fácil de adicionar filtros de visitantes a um bloco Query Loop.
WPFilters é o melhor plugin de filtragem para WordPress, construído pela mesma equipe por trás do SearchWP.
Ele permite que você crie filtros a partir das categorias, tags e campos personalizados que seu site já possui, e então os coloque ao lado de qualquer Query Loop sem escrever código.
Aqui estão alguns dos recursos que tornam o WPFilters uma boa opção para páginas Query Loop:
- Funciona com o bloco Query Loop. O WPFilters se conecta ao bloco Query Loop automaticamente, portanto, não há configuração extra para ativar.
- Sete tipos de elementos. Você pode escolher entre Caixa de seleção, Botão de opção, Menu suspenso, Menu suspenso (seleção múltipla), Slider, Pesquisar e Redefinir, dependendo de como você deseja que os visitantes filtrem a lista.
- Sem recarregamentos de página. Quando um visitante seleciona um filtro, o WPFilters usa AJAX para atualizar os resultados do Query Loop no local.
- URLs de filtro compartilháveis. Cada seleção é salva na URL da página, para que um leitor possa marcar ou compartilhar uma visualização filtrada.
Com isso, vamos ver como você pode usar o WPFilters para adicionar filtros ao seu bloco Query Loop.
Passo 1: Instale e Ative o WPFilters
Para começar, você pode assinar um plano WPFilters no site SearchWP.
Depois de se inscrever, você pode ir para a aba Downloads no painel da sua conta.
A partir daí, prossiga e baixe o arquivo ZIP do plugin WPFilters.
Enquanto estiver lá, copie sua chave de licença também, pois você precisará dela em breve.
Em seguida, você pode fazer login no seu painel do WordPress e instalar o plugin.
Se você nunca instalou um plugin a partir de um arquivo ZIP antes, veja este guia passo a passo que o orienta no processo.
Após a ativação, o assistente de configuração será aberto. Você pode clicar em Vamos Começar e seguir as instruções na tela para iniciar.
Com isso feito, o WPFilters está pronto e você pode criar seu primeiro filtro Query Loop.
Etapa 2: Crie um Elemento de Filtro de Categoria
Para criar o filtro, você pode ir para WPFilters » Elementos no seu painel do WordPress.
A partir daí, prossiga e clique no botão Adicionar Novo na parte superior da tela.
Um novo elemento é aberto com um título padrão, e você pode clicar no ícone de lápis ao lado dele para renomeá-lo para algo claro, como "Filtrar por Destino".
Em seguida, você pode encontrar a seção Campos de Filtro e selecionar Caixa de seleção.
Gostamos da Caixa de seleção para páginas Query Loop porque ela permite que os leitores escolham mais de uma categoria por vez, como Portugal e Japão juntos.
Depois disso, você pode rolar para baixo até a seção Fonte de Dados e abrir o menu suspenso.
Em Taxonomias, prossiga e selecione Categorias (category).
Depois que sua fonte de dados for definida, você pode ajustar a aparência do filtro.
Nas configurações do Contêiner, você pode ativar o seletor Mostrar Título para que os visitantes vejam um rótulo acima das caixas de seleção.
Os seletores Colapsável e Horizontal também estão lá, se você quiser um filtro que se recolha ou fique em uma única linha.
Nas configurações de Itens, recomendamos ativar Contagem de Itens, que mostra quantos posts existem em cada categoria.
Você também pode desativar Mostrar Vazio, para que as categorias sem posts permaneçam ocultas.
Ao alterar essas configurações, o painel Visualização em Tempo Real mostra como o filtro ficará.
Quando estiver satisfeito, clique em Salvar.
Etapa 3: Adicione o Filtro ao Lado do Seu Bloco de Loop de Consulta
Em seguida, você pode abrir a página onde deseja o filtro no editor de blocos (Gutenberg).
Se a página ainda não tiver um Loop de Consulta, você pode adicionar um bloco Loop de Consulta e configurá-lo para mostrar seus posts.
Depois disso, clique no inseridor + acima do Loop de Consulta e procure pelo bloco Elemento WPFilters.
Assim que o bloco estiver na página, você pode abrir Selecionar Elemento nas configurações do bloco e escolher “Filtrar por Destino”.
Y
Você pode colocar o filtro acima do loop ou usar um bloco de Colunas para colocá-lo em uma coluna lateral ao lado do loop.
Quando tudo estiver no lugar, salve ou publique a página.
Observação: Quando testamos dois blocos de Loop de Consulta em uma página, ambos mostraram os mesmos resultados filtrados, porque o WPFilters aplica o filtro a todos os blocos de Loop de Consulta na página. Se você precisar de uma segunda lista que permaneça sem filtros, como uma seção “Posts Recentes”, você pode usar o bloco Posts Mais Recentes em vez disso.
Se preferir não usar o bloco, o botão Incorporar na tela do elemento oferece um shortcode e uma opção de código PHP também.
Etapa 4: Teste os Filtros do Seu Loop de Consulta
Agora você pode visitar a página no front-end do seu site e experimentar o filtro.
Para o primeiro teste, marque a caixa de seleção “Portugal”. O Loop de Consulta deve ser atualizado imediatamente para mostrar apenas seus posts de Portugal, sem recarregar a página.
Você também notará que o URL da página muda para incluir sua seleção.
Para o segundo teste, clique para ir para a próxima página de resultados. A página dois ainda deve mostrar apenas posts de Portugal, com a caixa de seleção ainda marcada.
Você também pode copiar o URL e abri-lo em uma nova janela do navegador. A mesma visualização filtrada será carregada, o que significa que os visitantes podem compartilhá-la ou marcá-la.
Bônus: Adicione um Botão de Redefinir ou Pesquisa por Palavra-chave
Assim que seu filtro de categoria funcionar, você pode adicionar mais elementos ao lado dele.
O elemento Redefinir adiciona um botão que limpa todas as seleções de uma vez, o que abordamos em nosso guia sobre como adicionar um botão de filtro de redefinição no WordPress.
O elemento Pesquisar adiciona uma caixa de palavras-chave, para que os visitantes possam refinar a lista digitando uma palavra, como “praias”.
Quando o SearchWP estiver ativo em seu site, esse elemento Pesquisar usará o mecanismo de pesquisa do SearchWP em vez da pesquisa padrão do WordPress.
Perguntas Frequentes
1. Posso filtrar o bloco Loop de Consulta sem um plugin?
Apenas do lado do editor. O painel Filtros do bloco Loop de Consulta permite que você escolha quais categorias, tags, autores ou palavras-chave o loop exibe, mas os visitantes não podem alterar essas escolhas.
Permitir que os visitantes filtrem o loop sem um plugin significa escrever PHP personalizado com o hook query_loop_block_query_vars.
2. O WPFilters funciona com um Loop de Consulta que exibe produtos WooCommerce?
WPFilters se conecta ao bloco Product Template do WooCommerce da mesma forma que se conecta ao Query Loop padrão.
Você pode construir o filtro a partir de dados do produto, como Categorias de produtos (product_cat) no grupo Taxonomias em Data Source.
3. Meus filtros do Query Loop continuarão funcionando na próxima página de resultados?
Sim, os filtros selecionados permanecem na URL quando um visitante clica para a próxima página.
A próxima página carrega com os mesmos filtros aplicados e as mesmas caixas marcadas.
4. Posso filtrar dois blocos do Query Loop separadamente na mesma página?
Não, o WPFilters aplica o filtro a todos os blocos do Query Loop em uma página, então dois loops mostrarão os mesmos resultados filtrados.
Se você precisar de uma segunda lista que permaneça sem filtros, pode usar o bloco Latest Posts para isso.
Próximos Passos…
Agora você tem um filtro de categoria ao lado do seu bloco Query Loop, com resultados que atualizam sem recarregar a página e uma URL que seus leitores podem compartilhar.
Você também pode consultar nossos guias sobre como filtrar por várias taxonomias no WordPress e configurar filtros no WordPress sem codificação.
Pronto para deixar seus leitores filtrarem seu Query Loop? Você pode começar com o WPFilters aqui. Todos os planos vêm com uma garantia de devolução de 14 dias.
