Como permitir que os usuários filtrem publicações e páginas no WordPress (3 métodos)

Deseja permitir que os usuários filtrem posts e páginas no seu site WordPress?

Os usuários costumam visitar seu site em busca de um tipo específico de conteúdo. Talvez eles estejam interessados em seus tutoriais mais recentes ou em análises de produtos. Não seria útil se eles pudessem filtrar facilmente seu conteúdo para encontrar exatamente o que estão procurando?

Neste artigo, mostraremos como permitir que os usuários filtrem posts e páginas no WordPress usando um prático recurso de pesquisa e filtro.

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

Você já visitou um site repleto de conteúdo e teve dificuldade para encontrar o que precisava? Essa pode ser uma experiência frustrante para os usuários e fazer com que eles abandonem o site.

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

Felizmente, há uma solução simples: implementar um recurso de pesquisa e filtro em seu site WordPress. Essa poderosa ferramenta permite que os usuários limitem o conteúdo com base em critérios específicos, facilitando a localização do que estão procurando.

Um recurso de pesquisa e filtro não é bom apenas para blogs do WordPress. Ele 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ê tiver um site de podcast, os ouvintes poderão procurar o episódio de sua preferência usando o recurso.

Com isso em mente, vamos analisar três métodos fáceis para permitir que os usuários filtrem posts e páginas no seu site WordPress. Você pode usar os links rápidos abaixo para pular para o método de sua preferência:

Método 1: Filtrar postagens e páginas com o SearchWP (recomendado)

OSearchWP é um poderoso plug-in de pesquisa do WordPress e é nossa principal recomendação para adicionar a funcionalidade de filtragem ao seu site. Ele é muito fácil de usar, o que o torna uma ótima opção para iniciantes.

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

Etapa 1: Instalar e configurar o SearchWP

Primeiro, você precisará instalar e ativar o plug-in SearchWP. Se você não tem experiência com isso, temos um guia útil sobre como instalar um plug-in do WordPress.

Depois de ativado, vá para SearchWP ” Settings. Na guia “General” (Geral), insira sua chave de licença para ativá-la.

Agora, vá para SearchWP ” Algorithm. Aqui, você pode editar o mecanismo de pesquisa padrão ou criar um adicional.

O mecanismo padrão permite que os usuários pesquisem em Páginas, Publicações, Mídia e Comentários, o que é bom para um blog típico do WordPress.

Por outro lado, o mecanismo de pesquisa adicional pode usar outras fontes, como categorias, tags, tipos de post 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 de comércio eletrônico para sites do WooCommerce.

Para este tutorial, usaremos o mecanismo padrão e simplesmente ajustaremos suas configurações. Para fazer isso, clique em “Sources & Settings”.

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

Também ativamos o recurso “Keyword Stems”, que permite que o SearchWP mostre resultados mesmo que a palavra-chave não seja uma correspondência perfeita.

Quando estiver satisfeito com as configurações, clique em “Done” (Concluído).

Etapa 2: Ajuste seu mecanismo de pesquisa

Agora, você verá uma seção para todas as fontes selecionadas (no nosso caso, apenas Pages e Posts).

Cada fonte tem controles deslizantes para “Relevância do 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 corresponder de perto a um atributo de alta ponderação aparecerá mais alto nos resultados da pesquisa.

Por exemplo, se você der mais peso ao atributo “Post Content” (Conteúdo da postagem) do que ao atributo “Post Title” (Título da postagem), o SearchWP priorizará os resultados em que o termo de pesquisa aparece no próprio conteúdo.

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

Você também pode clicar em “Add/Remove Attributes” (Adicionar/remover atributos).

Isso fará com que apareça uma janela pop-up para que você inclua ou exclua mais atributos.

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

Outro recurso avançado é a capacidade de criar regras que incluem ou excluem conteúdo específico dos resultados de pesquisa.

Para fazer isso, basta clicar no botão “Edit Rules” (Editar regras).

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

Na janela pop-up seguinte, clique em “Add Rule” (Adicionar regra).

Agora, basta acessar o menu suspenso e escolher “Only show entries if” (Mostrar apenas entradas se) ou “Exclude entries if” (Excluir entradas se).

Em seguida, você pode optar por excluir ou incluir o conteúdo se ele fizer parte de uma taxonomia específica, tiver sido publicado em um determinado intervalo de datas ou tiver uma determinada ID.

Para adicionar outra regra, basta clicar no botão “Add Rule” e repetir o mesmo processo descrito acima. Quando você estiver satisfeito com a configuração das regras, clique em “Done” (Concluído).

Agora você pode repetir o mesmo processo para as outras fontes de entrada de pesquisa.

Quando estiver satisfeito com o mecanismo de busca, volte para a parte superior da página e clique em “Salvar”.

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

Quando você vir “Index Status 100%”, isso significa que o SearchWP indexou todo o seu conteúdo e regras para o mecanismo de busca.

Etapa 3: Crie um formulário de pesquisa personalizado

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

Vá para SearchWP ” Search Forms e clique em “Add New” (Adicionar novo).

Primeiro, dê ao seu formulário um nome reconhecível.

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

Em seguida, escolha um layout.

Para este tutorial, usaremos a opção “Combined” (Combinado), pois ela oferece o maior número de menus de filtragem.

Agora, role para baixo até a seção “Custom Styling” (Estilo personalizado) e selecione as opções “Category Search” (Pesquisa por categoria) e “Advanced Search” (Pesquisa avançada). Isso garante que seu formulário inclua todos os recursos de filtragem.

Opcionalmente, você pode escolher “Quick Search” se quiser adicionar alguns termos de pesquisa sugeridos abaixo da barra de pesquisa.

Em seguida, no menu “Engine” (Mecanismo), selecione o mecanismo de pesquisa que você 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”, selecione Posts e páginas.

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

Para o Field Label (Rótulo do campo), digite um texto de espaço reservado que apareça no campo de pesquisa, como “What are you looking for?” (O que você está procurando?).

Se você selecionou “Quick Search” anteriormente, poderá incluir termos que os usuários normalmente pesquisam nos itens de pesquisa rápida.

Em “Advanced Search Filter/s” (Filtros de pesquisa avançada), basta escolher as opções de filtragem que deseja oferecer aos usuários, como autores, tipos de post ou tags.

Por fim, em “Form Style” (Estilo do formulário) e “Button Style” (Estilo do botão), personalize a aparência do formulário de pesquisa de acordo com o design do seu site.

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

Quando tudo estiver configurado, role novamente para cima.

Em seguida, clique em “Salvar” para criar seu formulário de pesquisa.

Etapa 4: Incorporar o formulário de pesquisa e filtro

O plug-in SearchWP permite incorporar facilmente o formulário de pesquisa no front-end do seu site, como na 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 Search Form.

Primeiro, abra a página ou postagem à qual você deseja adicionar o formulário. Em seguida, clique no ícone “+ Add Block” e procure por “Search Form”.

Na barra lateral Block Settings (Configurações do bloco), escolha o formulário que você criou no menu suspenso.

Por fim, publique ou atualize a página para ver o formulário de pesquisa ativo.

Para obter mais informações, consulte estes guias passo a passo:

• Como adicionar um formulário de pesquisa em um post do WordPress
• Como adicionar uma barra de pesquisa ao menu do WordPress

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

Para fazer isso, localize o shortcode para seu formulário específico acessando SearchWP ” Search Forms e copiando o código na coluna “Shortcode”.

Temos um guia sobre como adicionar códigos de acesso no WordPress se você precisar de ajuda.

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

Isso não apenas melhora a experiência do usuário, mas também pode incentivá-lo a explorar diferentes categorias e descobrir mais 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, esse processo pode parecer intimidador, mas experimentamos e testamos o código para garantir que ele funcione sem problemas em seu site.

Além disso, usaremos o WPCode, que é o melhor plugin de snippet de código do mercado. Esse plug-in torna segura a inserção de código personalizado sem lidar diretamente com os arquivos do seu site, portanto, é menos provável que ele seja danificado.

A primeira etapa é instalar o WPCode. Para obter mais informações, consulte nosso guia sobre como instalar um plug-in do WordPress.

Feito isso, vá para Code Snippets ” + Add Snippet em sua área de administração do WordPress. Em seguida, selecione “Add Your Custom Code (New Snippet” (Adicionar seu código personalizado) e clique no botão “Use snippet” (Usar snippet).

Agora, há dois tipos de snippets de código que você precisa adicionar. Vamos examiná-los um a um:

Adição de um código de filtro do WordPress

Esse código informa ao WordPress para filtrar os resultados da pesquisa do usuário com base nas opções que ele selecionou no formulário de pesquisa. Ele funcionará com outro trecho de código responsável pela criação do formulário de pesquisa, sobre o qual falaremos 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, altere o tipo de código para “PHP Snippet”.

Em seguida, copie o código a seguir e cole-o na caixa Code Preview (Visualização de 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');

Esse trecho 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 somente as postagens pertencentes a ela.

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

Por fim, o código verifica e filtra os resultados com base no fato de o usuário desejar ver apenas posts, páginas ou todos os tipos de post (incluindo tipos de post personalizados).

Com o código colado, vá em frente e role para baixo até a seção “Insert Location” (Local de inserção). Por padrão, o método de inserção será “Auto Insert” e o local será “Run Everywhere”.

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

Em seguida, basta ativar o snippet de código e clicar em ‘Save Snippet’.

Adição de um código de formulário de pesquisa do WordPress

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

Tudo o que você precisa fazer é repetir as mesmas etapas para adicionar o código personalizado usando o WPCode como antes. Em seguida, você pode nomear esse código como “WordPress Search Form” e alterar o tipo de código para “PHP Snippet”.

Agora, cole o trecho de código abaixo na caixa Code Preview (Visualização de 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');

Esse código cria um shortcode chamado [wpb_filter_posts_form], que adicionará um formulário que permite que os usuários pesquisem 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 publicações disponíveis em seu site para os menus suspensos da barra de pesquisa. Os usuários podem escolher categorias, tags ou tipos de post específicos para restringir os resultados da pesquisa.

Além disso, o código inclui dropdowns 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.

Como no código anterior, você pode deixar as configurações do Insert Method como estão. Em seguida, ative o código e salve-o.

Incorporação do código curto do formulário de pesquisa

Nesse estágio, você pode adicionar o shortcode [wpb_filter_posts_form] a um post, página, modelo de tema ou área pronta para widget. Para obter mais informações, consulte nosso guia sobre como adicionar códigos de acesso no WordPress.

Nesse 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, clique no botão “+ Add Block” e selecione o bloco “Shortcode”.

Depois disso, basta inserir o shortcode [wpb_filter_posts_form] no campo apropriado.

Pressione o botão Publish (Publicar), Update (Atualizar) ou Save (Salvar) para tornar suas alterações efetivas.

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

Esta é a aparência em nosso site de demonstração:

Método 3: Filtrar publicações e páginas com o plug-in Search & Filter (gratuito)

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

O que você deseja fazer é instalar e ativar o Search & Filter plugin. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, o plug-in adicionará um novo item de menu denominado “Search & Filter” à sua área de administração do WordPress. Ao clicar nele, você será levado à página de uso do plug-in 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 esse shortcode em um post, 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 interessante do plug-in é que você pode personalizar quais opções de filtragem estão disponíveis editando as tags de shortcode.

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

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

É assim que ele se parece:

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

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

[searchandfilter headings="Select categories:" types="checkbox" fields="category"]

Veja o exemplo abaixo:

Além disso, você pode instruir o plug-in a usar caixas de seleção para algumas opções de filtro e menus suspensos para outras em um único shortcode.

Esse é o shortcode que usamos para incluir tipos de posts, categorias e tags na barra de pesquisa. Solicitamos ao plug-in que usasse caixas de seleção para a opção de tipos de post:

[searchandfilter headings="Post type, Category, Tag" types="checkbox, select, select" fields="post_types,category,post_tag"]

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

Dica bônus: Adicionar pesquisa Ajax ao vivo em seu site WordPress

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

A pesquisa Live Ajax usa tecnologia em tempo real para exibir resultados de pesquisa à medida que os usuários digitam suas consultas. Isso significa que não é mais necessário esperar a atualização da página. Os resultados serão exibidos instantaneamente, tornando o processo de pesquisa muito mais rápido e conveniente para seus visitantes.

Uma experiência de pesquisa mais rápida significa que você pode manter os usuários no 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 plug-in gratuito chamado SearchWP Live Ajax Search. Para obter mais informações, leia nosso tutorial do WordPress sobre como adicionar a pesquisa Ajax ao vivo em seu site.

Esperamos que este artigo tenha ajudado você a aprender como permitir que os usuários filtrem posts e páginas no WordPress. Talvez você também queira conferir nosso guia sobre como criar um diretório da Web no WordPress e nossa seleção de especialistas de plug-ins obrigatórios do WordPress para expandir seu site.

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