Filtragem Dinâmica de Posts sem Plugins no WordPress

A filtragem dinâmica de posts é uma funcionalidade altamente requisitada em sites WordPress. Ela permite que os usuários filtrem conteúdos por categorias, tags ou outros critérios sem precisar recarregar a página. Embora existam muitos plugins que oferecem essa função, é possível implementá-la manualmente com PHP, JavaScript e AJAX. Este guia prático e direto vai te ensinar como criar sua própria filtragem dinâmica de posts sem usar plugins.

Por que Implementar Sem Plugins?

• Desempenho Melhorado: Reduz a sobrecarga no site, deixando-o mais rápido.
• Flexibilidade: Controle total sobre a funcionalidade e estilo do filtro.
• Evita Conflitos: Elimina possíveis conflitos com outros plugins.

Neste tutorial, você criará:

• Um formulário de filtros dinâmicos.
• Uma consulta personalizada para buscar posts.
• Um sistema de carregamento dinâmico dos resultados.

1. Estrutura HTML para os Filtros

Crie o formulário de filtros em um arquivo de template personalizado, como page-listagem.php.

Por que criar um arquivo personalizado?

Um arquivo como page-listagem.php permite que você crie uma página dedicada para listar posts com filtros dinâmicos, sem interferir nos outros templates do tema. Essa abordagem separa o código e facilita a manutenção. Além disso, ela possibilita que você visualize a página diretamente no navegador sem precisar criá-la pelo painel administrativo do WordPress.

Exemplo do Arquivo page-listagem.php

Crie o arquivo page-listagem.php na pasta do tema ativo:

	<?php
	/*
	* Template para listagem dinâmica de posts
	*/
	get_header();
	?>
	<div id="post-filters">
	<form id="filter-form">
	<select name="category" id="category-filter">
	<option value="">Todas as Categorias</option>
	<?php
	$categories = get_categories();
	foreach ($categories as $category) {
	echo '<option value="' . $category->term_id . '">' . $category->name . '</option>';
	}
	?>
	</select>
	<select name="tag" id="tag-filter">
	<option value="">Todas as Tags</option>
	<?php
	$tags = get_tags();
	foreach ($tags as $tag) {
	echo '<option value="' . $tag->term_id . '">' . $tag->name . '</option>';
	}
	?>
	</select>
	<button type="submit">Filtrar</button>
	</form>
	</div>
	<div id="post-results">
	<!-- Posts serão carregados aqui dinamicamente -->
	</div>
	<?php
	get_footer();

view raw 00-page-listagem.php hosted with ❤ by GitHub

Tornando a Página Acessível pela URL /listagem

Para que a página seja acessível diretamente pela URL /listagem, você precisará adicionar uma regra de reescrita ao WordPress. Essa configuração criará um endpoint personalizado.

Adicione o seguinte código ao arquivo functions.php:

	<?php
	// Adiciona endpoint para a página "listagem"
	function adicionar_endpoint_listagem() {
	add_rewrite_rule(
	'^listagem/?$',
	'index.php?is_listagem=1',
	'top'
	);
	add_rewrite_tag('%is_listagem%', '([0-9]+)');
	}
	add_action('init', 'adicionar_endpoint_listagem');
	// Garante que as regras sejam registradas após ativação do tema
	function flush_rewrite_rules_on_activation() {
	adicionar_endpoint_listagem();
	flush_rewrite_rules();
	}
	add_action('after_switch_theme', 'flush_rewrite_rules_on_activation');
	// Carrega o template correto para o endpoint
	function carregar_template_listagem($template) {
	if (get_query_var('is_listagem')) {
	return get_template_directory() . '/page-listagem.php';
	}
	return $template;
	}
	add_filter('template_include', 'carregar_template_listagem');
	// Define o título personalizado para o endpoint "listagem"
	function custom_document_title_listagem($title) {
	if (get_query_var('is_listagem')) {
	$project_name = get_bloginfo('name');
	$title['title'] = "Listagem de Posts - " . $project_name;
	}
	return $title;
	}
	add_filter('document_title_parts', 'custom_document_title_listagem');

view raw 01-endpoint.php hosted with ❤ by GitHub

Regenerando o .htaccess

Após aplicar a função add_rewrite_rule, é necessário regerar o arquivo .htaccess para que as novas regras de reescrita funcionem corretamente. Para isso, você pode:

1. Acessar o painel administrativo do WordPress.
2. Ir até Configurações > Links Permanentes.
3. Clicar no botão Salvar alterações sem modificar nada.

Essa ação atualiza automaticamente o arquivo .htaccess e aplica as novas regras de URL.

Como Funciona?

1. Reescrita de URL: O código cria uma regra que mapeia /listagem para o parâmetro is_listagem.
2. Registro de Tag: Registra o parâmetro is_listagem para que o WordPress o reconheça.
3. Carregamento do Template: Quando a URL corresponde ao endpoint, o arquivo page-listagem.php é carregado automaticamente.
4. Título Personalizado: Define um título dinâmico para o endpoint usando o filtro document_title_parts.
5. Flush Automático: Após ativar o tema, as regras de reescrita são atualizadas automaticamente.

Agora você pode acessar a página diretamente pelo link http://seusite.com/listagem sem a necessidade de criar a página no backend.

2. Criando a Função de Filtragem em PHP

No arquivo functions.php do seu tema, adicione a lógica para manipular a filtragem:

	<?php
	add_action('wp_ajax_filter_posts', 'filter_posts');
	add_action('wp_ajax_nopriv_filter_posts', 'filter_posts');
	function filter_posts() {
	$args = [
	'post_type' => 'post',
	'posts_per_page' => -1,
	];
	// Filtro por categoria
	if (!empty($_POST['category'])) {
	$args['cat'] = sanitize_text_field($_POST['category']);
	}
	// Filtro por tag
	if (!empty($_POST['tag'])) {
	$args['tag_id'] = sanitize_text_field($_POST['tag']);
	}
	$query = new WP_Query($args);
	if ($query->have_posts()) {
	while ($query->have_posts()) {
	$query->the_post();
	?>
	<div class="post-item">
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<p><?php the_excerpt(); ?></p>
	</div>
	<?php
	}
	} else {
	echo '<p>Nenhum post encontrado.</p>';
	}
	wp_die();
	}

view raw 02-ajax-filtragrem.php hosted with ❤ by GitHub

3. Criando Arquivos Separados para AJAX e CSS

Para uma estrutura mais organizada, crie dois arquivos separados:

Arquivo filtragem.js

Crie um arquivo na pasta assets/js do tema (exemplo: /wp-content/themes/seutema/assets/js/filtragem.js) com o seguinte código:

	document.getElementById('filter-form').addEventListener('submit', function(event) {
	event.preventDefault();
	const formData = new FormData(this);
	fetch(ajaxurl, {
	method: "POST",
	body: new URLSearchParams({
	action: 'filter_posts',
	category: formData.get('category'),
	tag: formData.get('tag')
	})
	})
	.then(response => response.text())
	.then(data => {
	document.getElementById('post-results').innerHTML = data;
	});
	});

view raw 03-filtragem.js hosted with ❤ by GitHub

Arquivo filtragem.css

Crie um arquivo na pasta assets/css do tema (exemplo: /wp-content/themes/seutema/assets/css/filtragem.css) com o seguinte código:

	#post-filters {
	margin-bottom: 20px;
	}
	#post-filters select, #post-filters button {
	margin-right: 10px;
	padding: 10px;
	font-size: 16px;
	}
	#post-results .post-item {
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	}
	#post-results .post-item h2 {
	margin: 0 0 10px;
	}

view raw 04-filtragem.css hosted with ❤ by GitHub

4. Registrando os Arquivos no functions.php

Adicione o seguinte código ao functions.php para registrar os arquivos de JavaScript e CSS, garantindo que eles sejam atualizados ao alterar o tema:

	<?php
	function registrar_scripts_filtragem() {
	wp_enqueue_script('filtragem-ajax', get_template_directory_uri() . '/js/filtragem.js', ['jquery'], filemtime(get_template_directory() . '/js/filtragem.js'), true);
	wp_localize_script('filtragem-ajax', 'ajaxurl', admin_url('admin-ajax.php'));
	wp_enqueue_style('filtragem-css', get_template_directory_uri() . '/css/filtragem.css', [], filemtime(get_template_directory() . '/css/filtragem.css'));
	}
	add_action('wp_enqueue_scripts', 'registrar_scripts_filtragem');

view raw 05-script-style-filtragem.php hosted with ❤ by GitHub

5. Teste e Ajuste

• Adicione categorias e tags nos seus posts para testar o filtro.
• Certifique-se de que as categorias e tags aparecem corretamente no dropdown.
• Verifique se os resultados são carregados dinamicamente sem recarregar a página.

Conclusão

Com esta solução, você implementou um sistema de filtragem dinâmica de posts no WordPress sem a necessidade de plugins. Agora, você pode acessar a página diretamente pela URL /listagem sem precisar criá-la no backend. Não se esqueça de regenerar o arquivo .htaccess após aplicar as regras de reescrita. Essa abordagem oferece mais controle e personalização, além de melhorar o desempenho do site.

Se você gostou deste tutorial ou tem dúvidas, deixe um comentário!