Como Permitir que Usuários Filtrem Posts e Páginas no WordPress (3 Métodos)

Uma biblioteca de conteúdo crescente é frequentemente um sinal de um site WordPress saudável. Mas mais conteúdo nem sempre significa uma experiência melhor. Especialmente quando os visitantes não conseguem encontrar o que procuram.

Já vimos isso acontecer em muitos blogs em crescimento: toneladas de ótimas postagens, mas nenhuma maneira fácil para os visitantes filtrá-las, então eles saem frustrados.

Isso significa que adicionar filtros às suas postagens e páginas não é apenas um extra agradável. É essencial se você quiser manter os visitantes engajados.

Quando as pessoas podem classificar rapidamente seu conteúdo por categoria, tag, data ou até mesmo campos personalizados, elas são muito mais propensas a permanecer e explorar.

Passamos muito tempo pesquisando e testando diferentes soluções de filtragem para resolver esse problema. Neste guia, apresentaremos 3 das maneiras mais fáceis e eficazes de permitir que os usuários filtrem postagens e páginas no WordPress usando SearchWP, WPCode e o plugin Search & Filter.

Por que adicionar um recurso de filtragem para suas postagens e páginas do WordPress?

Você já visitou um site WordPress transbordando de conteúdo, apenas para ter dificuldade em encontrar o que precisa? Essa pode ser uma experiência frustrante para os usuários e fazer com que eles abandonem seu site completamente.

Em última análise, isso pode impactar negativamente o SEO, pois os mecanismos de busca consideram a experiência do usuário um fator de classificação. Um site com altas taxas de rejeição e baixo engajamento pode ser visto como menos valioso pelos mecanismos de busca.

Felizmente, existe uma solução simples: implementar um recurso de busca e filtro em seu site WordPress. Essa ferramenta poderosa permite que os usuários restrinjam o conteúdo com base em critérios específicos, tornando muito fácil encontrar o que procuram.

Um recurso de busca e filtro não é bom apenas para blogs WordPress. Também é ideal para sites como fóruns com milhares de tópicos. Dessa forma, os usuários podem pesquisar a discussão certa por tópico, data ou autor.

Ou, se você tem um site de podcast, os ouvintes podem procurar seu episódio preferido usando o recurso.

Com isso em mente, mostraremos 3 métodos fáceis para permitir que os usuários filtrem posts e páginas em seu site WordPress. Você pode usar os links rápidos abaixo para pular para o seu método preferido:

• Método 1: Filtrar Posts e Páginas com SearchWP (Recomendado)
• Método 2: Filtrar Posts e Páginas com Código Personalizado (Avançado)
• Método 3: Filtrar Posts e Páginas com o Plugin Search & Filter (Grátis)
• Dica Bônus: Adicione Busca Ajax ao Vivo ao Seu Site WordPress

Pronto? Vamos começar!

Método 1: Filtrar Posts e Páginas com SearchWP (Recomendado)

SearchWP é um poderoso plugin de busca para WordPress e é nossa principal recomendação para adicionar funcionalidade de filtragem ao seu site. É muito fácil de usar, tornando-o uma ótima opção para iniciantes.

Aqui está um guia passo a passo sobre como usar o SearchWP para criar um formulário de busca personalizado com opções de filtragem.

Passo 1: Instalar e Configurar o SearchWP

Primeiro, você precisará instalar e ativar o plugin SearchWP. Se você é novo nisso, temos um guia útil sobre como instalar um plugin do WordPress.

Uma vez ativado, você pode ir para SearchWP » Configurações. Em seguida, na aba 'Geral', insira sua chave de licença para ativá-lo.

Agora, vamos para SearchWP » Algoritmo. Aqui, você pode editar o mecanismo de busca padrão ou criar um adicional.

O mecanismo padrão permite que os usuários pesquisem em páginas, posts, arquivos de mídia e comentários, o que é bom para um blog WordPress típico.

Por outro lado, o mecanismo de busca adicional pode usar outras fontes como categorias, tags, tipos de postagem personalizados e taxonomias personalizadas. Isso pode ser útil para criar um formulário de pesquisa e filtro de conteúdo que não seja de blog, como um filtro de produtos eCommerce para sites WooCommerce.

Para este tutorial, ficaremos com o mecanismo padrão e simplesmente ajustaremos suas configurações. Para fazer isso, você pode clicar em ‘Fontes e Configurações’.

Como estamos criando uma função de pesquisa e filtro para filtrar posts e páginas, incluiremos apenas páginas e posts como as fontes para o mecanismo de busca do WordPress.

Também habilitamos o recurso ‘Raízes de Palavras-chave’, que permite ao SearchWP mostrar resultados mesmo que a palavra-chave não seja uma correspondência exata.

Assim que estiver satisfeito com as configurações, você pode clicar em ‘Concluído’.

Passo 2: Ajuste Fino do Seu Mecanismo de Busca

Agora, você verá uma seção para todas as fontes que selecionou (em nosso caso, apenas posts e páginas).

Cada fonte tem controles deslizantes para ‘Relevância de Atributo Aplicável’. Esses controles deslizantes determinam o peso que o SearchWP dá a cada atributo ao classificar os resultados da pesquisa.

Em termos mais simples, o conteúdo que corresponde de perto a um atributo de alto peso aparecerá mais alto nos resultados da pesquisa.

Por exemplo, se você der mais peso ao atributo ‘Conteúdo do Post’ do que ao atributo ‘Título do Post’, o SearchWP priorizará os resultados onde o termo de pesquisa aparece dentro do próprio conteúdo.

Você pode ajustar esses controles deslizantes de acordo com sua preferência.

Você também pode clicar em ‘Adicionar/Remover Atributos’.

Isso fará com que um pop-up apareça para você incluir ou excluir mais atributos.

Por exemplo, você pode incluir taxonomias personalizadas ou campos personalizados para torná-los pesquisáveis.

Outro recurso poderoso é a capacidade de criar regras que incluam ou excluam conteúdo específico dos resultados da pesquisa.

Para fazer isso, basta clicar no botão ‘Editar Regras’.

Esta configuração permite que você filtre conteúdo irrelevante ou destaque categorias específicas.

No próximo pop-up, você pode clicar em ‘Adicionar Regra’.

Agora, simplesmente clique no menu suspenso e escolha ‘Mostrar apenas entradas se’ ou ‘Excluir entradas se’.

Em seguida, você pode escolher se deseja excluir ou incluir o conteúdo se ele fizer parte de uma taxonomia específica, foi publicado dentro de um determinado intervalo de datas ou tem um determinado ID.

Para adicionar outra regra, basta clicar no botão ‘Adicionar Regra’ e repetir o mesmo processo descrito acima. Quando você estiver satisfeito com a configuração das regras, prossiga e clique em ‘Concluído’.

Você pode repetir o mesmo processo para as outras fontes de entrada de pesquisa, se necessário.

Quando você estiver satisfeito com o mecanismo de pesquisa, pode voltar ao topo da página e clicar em ‘Salvar’.

O SearchWP agora reconstruirá o índice, o que pode levar alguns minutos.

Assim que você vir ‘Status do Índice 100%’, isso significa que o SearchWP indexou todo o seu conteúdo e regras para o mecanismo de pesquisa.

Etapa 3: Criar um Formulário de Pesquisa Personalizado

Agora que o mecanismo de busca está configurado, vamos criar um formulário de busca amigável com opções de filtragem.

Para começar, vamos em SearchWP » Formulários de Busca, e então clique em ‘Adicionar Novo.’

Na próxima tela, a primeira coisa que você fará é dar um nome reconhecível ao seu formulário.

Isso é apenas para sua referência interna, então o nome pode ser qualquer coisa que seja fácil para você lembrar.

Em seguida, você escolherá um layout.

Para este tutorial, usaremos a opção ‘Combinado’, pois ela oferece mais menus de filtragem.

Agora, você pode rolar para baixo até a seção ‘Estilo Personalizado’ e selecionar as opções ‘Pesquisa por Categoria’ e ‘Pesquisa Avançada’. Isso garante que seu formulário inclua todos os recursos de filtragem.

Opcionalmente, você pode escolher ‘Pesquisa Rápida’ se quiser adicionar alguns termos de pesquisa sugeridos abaixo da barra de pesquisa.

Em seguida, no menu ‘Motor’, você selecionará o motor de busca que criou anteriormente.

Quanto a ‘Resultados’, você pode escolher qual página de resultados de pesquisa usar: os resultados padrão do WordPress ou a versão do SearchWP.

Em ‘Tipo de Pesquisa’, vamos selecionar ‘Posts’ e ‘Páginas’.

Abaixo disso, você pode adicionar os nomes das categorias que deseja incluir no menu de filtro.

Para o ‘Rótulo do Campo’, insira um texto de espaço reservado que aparece no campo de pesquisa, como ‘O que você está procurando?’

Se você selecionou ‘Pesquisa Rápida’ anteriormente, poderá incluir termos que os usuários podem pesquisar comumente em ‘Itens de Pesquisa Rápida’.

Em ‘Filtro(s) de Pesquisa Avançada’, simplesmente escolha quais opções de filtragem você deseja oferecer aos usuários, como ‘Autores’, ‘Tipos de Post’ ou ‘Tags’.

Finalmente, em ‘Estilo do Formulário’ e ‘Estilo do Botão’, personalize a aparência do formulário de pesquisa para combinar com o design do seu site.

Você pode alterar as cores, fontes e formas do formulário de pesquisa.

Assim que tudo estiver configurado, você pode rolar para cima.

Em seguida, é hora de clicar em ‘Salvar’ para criar seu formulário de pesquisa.

Etapa 4: Incorporar o Formulário de Pesquisa e Filtro

O plugin SearchWP permite que você incorpore facilmente o formulário de pesquisa na parte frontal do seu site, como na sua página inicial ou em áreas prontas para widgets. Aqui, demonstraremos como adicioná-lo a uma página usando o editor de blocos do WordPress e o bloco Formulário de Pesquisa.

Primeiro, você pode abrir a página ou postagem onde deseja adicionar o formulário. Em seguida, vamos clicar no ícone ‘+ Adicionar Bloco’ e procurar por ‘Formulário de Pesquisa’.

Na barra lateral ‘Configurações do Bloco’, você escolherá o formulário que criou no menu suspenso.

Finalmente, basta clicar em ‘Publicar’ ou ‘Atualizar’ para ver o formulário de pesquisa ao vivo.

Para mais informações, você pode conferir estes guias passo a passo:

• Como Adicionar um Formulário de Busca em um Post do WordPress
• Como Adicionar uma Barra de Pesquisa ao Menu do WordPress

Alternativamente, você pode exibir o formulário usando um shortcode.

Para fazer isso, você precisará encontrar o shortcode para o seu formulário específico indo em SearchWP » Formulários de Pesquisa e copiando o código na coluna ‘Shortcode’.

Temos um guia sobre como adicionar shortcodes no WordPress se precisar de ajuda.

Com o formulário de pesquisa e as opções de filtragem implementadas, seus visitantes agora podem encontrar facilmente o conteúdo que procuram em seu site.

Isso não apenas melhora a experiência do usuário, mas também pode incentivá-los a explorar diferentes categorias e descobrir mais do seu conteúdo valioso.

Método 2: Filtrar Posts e Páginas com Código Personalizado (Avançado)

O próximo método usará código personalizado. Para iniciantes, este processo pode parecer intimidante, mas testamos o código para garantir que ele funcione perfeitamente com o seu site.

Além disso, usaremos o WPCode, que é o melhor plugin de snippets de código do mercado. Este plugin torna seguro inserir código personalizado sem lidar diretamente com os arquivos do seu site, então é menos provável que você quebre seu site.

Algumas de nossas marcas parceiras usam o WPCode para adicionar e gerenciar snippets de código personalizados, e elas adoram. Nós também o testamos e descobrimos que ele funciona excepcionalmente bem. Você pode aprender mais sobre nossas experiências em nossa análise completa do WPCode.

O primeiro passo é instalar e ativar o WPCode. Para mais informações, você pode conferir nosso guia sobre como instalar um plugin do WordPress.

Assim que isso for feito, você pode ir para Snippets de Código » + Adicionar Snippet na sua área de administração do WordPress.

Em seguida, vamos selecionar ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clicar no botão ‘Usar snippet’.

Agora, existem 2 tipos de snippets de código que você precisa adicionar. Vamos passar por eles um por um:

Adicionando um Código de Filtro do WordPress

Este código instrui o WordPress a filtrar os resultados de pesquisa do usuário com base nas opções que ele selecionou no formulário de pesquisa. Ele funcionará com outro snippet de código que cria o formulário de pesquisa, que discutiremos mais tarde.

Primeiro, você precisa dar um nome ao seu novo snippet. Pode ser algo tão simples quanto ‘Filtro de Pesquisa do WordPress’.

Em seguida, você precisará alterar o ‘Tipo de Código’ para ‘Snippet PHP’.

Em seguida, simplesmente copie o seguinte código e cole-o na caixa ‘Prévia do Código’:

function wpb_filter_posts($query) {
if ($query->is_main_query() && $query->is_search) {

// Category filter
if (isset($_GET['category'])) {
$category = get_category_by_slug($_GET['category']);
if ($category) {
$query->set('cat', $category->term_id);
}
}

// Published date filter based on URL structure
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$url_parts = explode('/', trim($url_path, '/'));
if (count($url_parts) >= 4 && is_numeric($url_parts[0]) && is_numeric($url_parts[1]) && is_numeric($url_parts[2])) {
$year = $url_parts[0];
$month = $url_parts[1];
$day = $url_parts[2];
$query->set('date_query', array(
array(
'year' => $year,
'month' => $month,
'day' => $day,
),
));
}

// Include posts without categories or tags
$query->set('post_status', 'publish');
$query->set('post_type', 'post');
$query->set('posts_per_page', -1);

// Include post types
if (isset($_GET['post_type']) && $_GET['post_type'] == 'page') {
$query->set('post_type', array('page'));
} else {
$query->set('post_type', array('post', 'page', 'custom_post_type'));
}
}
}

add_action('pre_get_posts', 'wpb_filter_posts');

Este snippet de código verifica se o usuário escolheu algum filtro no formulário de pesquisa. Por exemplo, se um filtro de categoria for selecionado, o código poderá identificar essa categoria e mostrar apenas posts que pertencem a ela.

Ele também pode filtrar os resultados por data, procurando o ano, mês e dia específicos que o usuário escolheu.

Finalmente, o código verifica e filtra os resultados com base se o usuário deseja ver apenas posts, páginas ou todos os tipos de post (incluindo tipos de post personalizados).

Com o código colado, role para baixo até a seção ‘Local de Inserção’. Por padrão, o ‘Método de Inserção’ será ‘Inserir Automaticamente’ e o Local será ‘Executar em Todos os Lugares’.

Você pode deixar essas configurações como estão para que o código possa ser adicionado ao arquivo functions.php do seu tema WordPress e funcionar corretamente.

Em seguida, basta ativar o trecho de código e clicar em ‘Salvar Trecho’.

Adicionando um Código de Formulário de Busca WordPress

O próximo código criará um formulário de busca personalizado, que você poderá incorporar usando um shortcode mais tarde.

Você pode adicionar código personalizado usando o WPCode repetindo os mesmos passos. Em seguida, você pode nomear este código como ‘Formulário de Busca WordPress’ e alterar o tipo de código para ‘Trecho PHP’.

Agora, você pode colar o trecho de código abaixo na caixa ‘Pré-visualização do Código’:

function wpb_filter_posts_form() {
$categories = get_categories();
$tags = get_tags();
$post_types = get_post_types(array('public' => true));
$output = '<form action="' . home_url('/') . '" method="get">';
$output .= '<input type="search" name="s" placeholder="Search...">';

// Category dropdown
$output .= '<select name="category">';
$output .= '<option value="" selected>All Categories</option>';
foreach ($categories as $category) {
$output .= '<option value="' . $category->slug . '">' . $category->name . '</option>';
}
$output .= '</select>';

// Tag dropdown
$output .= '<select name="tag">';
$output .= '<option value="" selected>All Tags</option>';
foreach ($tags as $tag) {
$output .= '<option value="' . $tag->slug . '">' . $tag->name . '</option>';
}
$output .= '</select>';

// Post type dropdown
$output .= '<select name="post_type">';
$output .= '<option value="all" selected>All Post Types</option>';
foreach ($post_types as $post_type) {
$post_type_object = get_post_type_object($post_type);
$output .= '<option value="' . $post_type . '">' . $post_type_object->label . '</option>';
}
$output .= '</select>';

// Year dropdown
$output .= '<select name="year">';
$output .= '<option value="">Select Year</option>';
for ($year = date('Y'); $year >= 2000; $year--) {
$output .= '<option value="' . $year . '">' . $year . '</option>';
}

$output .= '</select>';
// Month dropdown
$output .= '<select name="month">';
$output .= '<option value="">Select Month</option>';
for ($month = 1; $month <= 12; $month++) {
$output .= '<option value="' . sprintf('%02d', $month) . '">' . date('F', mktime(0, 0, 0, $month, 1)) . '</option>';
}
$output .= '</select>';

// Day dropdown
$output .= '<select name="day">';
$output .= '<option value="">Select Day</option>';
for ($day = 1; $day <= 31; $day++) {
$output .= '<option value="' . sprintf('%02d', $day) . '">' . $day . '</option>';
}
$output .= '</select>';
$output .= '<input type="submit" value="Search">';
$output .= '</form>';
return $output;
}

add_shortcode('wpb_filter_posts_form', 'wpb_filter_posts_form');

Este código cria um shortcode chamado [wpb_filter_posts_form], que adicionará um formulário que permite aos usuários pesquisar em seu site. O formulário inclui uma barra de pesquisa para palavras-chave e vários menus suspensos para filtragem.

O código recupera categorias, tags e tipos de post disponíveis do seu site para os menus suspensos da barra de pesquisa. Os usuários podem escolher categorias, tags ou tipos de post específicos para refinar seus resultados de pesquisa.

Além disso, o código inclui menus suspensos de ano, mês e dia para uma filtragem ainda mais precisa por data. Por fim, ele adiciona um botão de envio para iniciar a pesquisa com os filtros escolhidos.

Assim como no código anterior, você pode deixar as configurações de ‘Método de Inserção’ como estão. Em seguida, basta ativar o código e salvá-lo.

Incorporando o Shortcode do Formulário de Pesquisa

Nesta fase, você pode adicionar o shortcode [wpb_filter_posts_form] a uma postagem, página, modelo de tema ou área pronta para widgets. Para mais informações, você pode conferir nosso guia sobre como adicionar shortcodes no WordPress.

Neste caso, adicionaremos o shortcode a uma página de pesquisa personalizada. Se você quiser fazer o mesmo, vá em frente e crie uma nova página no WordPress.

Em seguida, personalize a página de pesquisa usando qualquer tipo de bloco que você precisar. Por exemplo, você pode adicionar imagens ou texto para instruir os leitores sobre como usar a barra de pesquisa.

Depois disso, você pode simplesmente clicar no botão ‘+ Adicionar Bloco’ e selecionar o bloco ‘Shortcode’.

Uma vez feito, basta inserir o shortcode [wpb_filter_posts_form] no campo apropriado.

O próximo passo é clicar no botão ‘Publicar’, ‘Atualizar’ ou ‘Salvar’ para tornar suas alterações visíveis.

Agora você deve ver seu novo formulário de pesquisa personalizado.

Veja como fica em nosso site de demonstração:

Método 3: Filtrar Posts e Páginas com o Plugin Search & Filter (Grátis)

O último método é usar o plugin Search & Filter, que está disponível gratuitamente. É uma ótima opção se você estiver procurando uma maneira rápida e fácil de habilitar o recurso de pesquisa e filtro na sua página de blog do WordPress.

O que você quer fazer é instalar e ativar o plugin Search & Filter. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, o plugin adicionará um novo item de menu rotulado ‘Search & Filter’ à sua área de administração do WordPress. Clicar nele o levará à página de uso do plugin com documentação detalhada sobre como usá-lo.

O plugin Search & Filter vem com um shortcode que aceita diferentes parâmetros para exibir as opções de filtragem. Você pode usar este shortcode em uma postagem, página ou dentro de um widget de texto:

[searchandfilter fields="search,category,post_tag"]

Isso exibirá as opções de filtragem com campos de pesquisa, categoria e tag:

O legal do plugin é que você pode personalizar quais opções de filtragem estão disponíveis editando as tags do shortcode.

Por exemplo, se você quiser incluir campos de categoria, tag, tipo de postagem e data na barra de pesquisa, precisará usar este shortcode:

[searchandfilter fields="search,category,post_tag,post_types,post_date"]

Veja como fica:

Se você não quiser usar menus suspensos, também pode usar caixas de seleção e adicionar rótulos para cada campo.

No shortcode abaixo, estamos dizendo ao plugin para exibir a barra de pesquisa com caixas de seleção para opções de categoria:

[searchandfilter headings="Selecione as categorias:" types="checkbox" fields="category"]

Por favor, confira o exemplo abaixo:

Além disso, você pode dizer ao plugin para usar caixas de seleção para algumas opções de filtro e menus suspensos para outras em um único shortcode.

Este é o shortcode que usamos para incluir tipos de postagem, categorias e tags na barra de pesquisa. Pedimos ao plugin para usar caixas de seleção para a opção de tipos de postagem:

[searchandfilter headings="Tipo de postagem, Categoria, Tag" types="checkbox, select, select" fields="post_types,category,post_tag"]

Sinta-se à vontade para consultar a documentação do plugin para obter mais maneiras de usar o shortcode.

Dica Bônus: Adicione Busca Ajax ao Vivo ao Seu Site WordPress

Agora que você sabe como permitir que os usuários filtrem posts e páginas, pode ir um passo além e melhorar a experiência de pesquisa com pesquisa Ajax ao vivo.

A pesquisa Ajax ao vivo usa tecnologia em tempo real para exibir os resultados da pesquisa enquanto os usuários digitam suas consultas. Isso significa que não há mais espera para uma página ser atualizada. Os resultados aparecerão instantaneamente, tornando o processo de pesquisa muito mais rápido e conveniente para seus visitantes.

Uma experiência de busca mais rápida significa que você pode manter os usuários em seu site por mais tempo, aumentando as visualizações de página e reduzindo a taxa de rejeição.

A boa notícia é que você pode adicionar facilmente essa funcionalidade ao seu site com um plugin gratuito chamado SearchWP Live Ajax Search. Você pode ler nosso tutorial do WordPress sobre como adicionar busca Ajax ao vivo ao seu site para mais informações.

Esperamos que este artigo tenha ajudado você a aprender como permitir que os usuários filtrem posts e páginas no WordPress. Você também pode querer conferir nosso guia sobre como criar um diretório web e nossas escolhas de especialistas de plugins de busca do WordPress para melhorar a busca do seu site.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.