Como adicionar filtros ao seu portfólio WordPress

No mês passado, mostrei como criar um site de portfólio no WordPress usando um tipo de postagem personalizado, uma nova consulta de “projetos” e alguns novos modelos.

Neste post, mostrarei como adicionar filtros à sua página de portfólio usando a biblioteca Isotope.js.

Se ainda não o fez, entre no seu site WordPress, crie algumas categorias e atribua-as aos itens do seu portfólio. Se você ler o primeiro artigo, estou usando um CPT chamado 'Projetos' novamente, portanto, para cada projeto adicionado ao meu site WordPress, precisarei garantir que uma categoria seja atribuída. No meu site, meus projetos serão categorizados como “Nova Construção” ou “Renovações”.

Depois de atribuir uma categoria a cada um de seus projetos, é hora de adicionar o JavaScript que fará o trabalho de filtragem sofisticado para você.

Isotope.js é uma biblioteca de layout desenvolvida por David DeSandro. É gratuito para código aberto e uso pessoal, no entanto, para uso comercial, você deve adquirir uma licença. Consulte a página de licenças para obter mais informações e preços.

Então, vamos adicionar o arquivo isotope.js ao seu site. Idealmente, você adicionaria isso a um diretório chamado /js/ em seu tema filho para garantir que as atualizações nunca o excluam.

Você também precisa criar mais um arquivo e adicioná-lo ao seu diretório /js/ . Este arquivo conterá o jQuery necessário para direcionar seus projetos. No meu exemplo, chamei esse arquivo de projects.js .

Cole o seguinte código nesse arquivo e salve-o. As principais coisas a serem observadas neste arquivo são os #projects , .project-item e #filters . Este é o arquivo onde você também pode alterar layoutMode: para alvenaria, embalagem, célulasByColumn e muito mais. Neste tutorial, estou usando o modo de grade.

jQuery(function ($) {

// initialize Isotope after all images have loaded

var $container = $('#projects').imagesLoaded( function() { //The ID for the list with all the blog posts

$container.isotope({ //Isotope options, 'item' matches the class in the PHP

itemSelector : '.project-item',

grid: {

columnWidth: 200

}

});

});

 
//Add the class selected to the item that is clicked, and remove from the others

var $optionSets = $('#filters'),

$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){

var $this = $(this);

// don't proceed if already selected

if ( $this.hasClass('selected') ) {

return false;

}

var $optionSet = $this.parents('#filters');

$optionSets.find('.selected').removeClass('selected');

$this.addClass('selected');
//When an item is clicked, sort the items.

var selector = $(this).attr('data-filter');

$container.isotope({ filter: selector });
return false;

});

});

Depois de adicionar esse código ao seu site, é hora de enfileirar os arquivos. Se o functions.php do seu tema filho já tiver uma função declarada para fazer isso, você só precisará adicionar uma linha de código a ele como a abaixo.

wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array(), '1.0.0', true );

wp_enqueue_script('projects', get_stylesheet_directory_uri() . '/js/projects.js', array(), '1.0.0', true );

Observe get_stylesheet_directory_uri() sempre se refere ao tema ativo atual.
No caso de um tema personalizado ou no cenário em que você está alterando um tema sem um tema filho, você provavelmente usaria get_template_directory_uri() no lugar de get_stylesheet_directory_uri()
Se o seu tema filho ainda não tiver uma função para enfileirar seu script, você precisará adicionar uma. Use o seguinte para enfileirar seu arquivo isotope.js .

add_action( 'wp_enqueue_scripts', 'child_scripts');

function child_scripts(){

wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array(), '1.0.0', true );

wp_enqueue_script('projects', get_stylesheet_directory_uri() . '/js/projects.js', array(), '1.0.0', true );

}

Uma última observação aqui, você deve se certificar de que seu tema já tenha enfileirado o jQuery. Se não tiver, você precisará adicionar wp_enqueue_script('jquery'); mas a partir do WordPress 3.8, o jQuery é empacotado com o núcleo do WordPress em /wp-includes/js/jquery/jquery.js .

Finalmente, salve seu arquivo functions.php .

Agora, volte ao seu arquivo projects-page.php e adicione o código que exibirá seus filtros, além de obter o número de categorias e o nome da categoria de cada projeto.

Cole o código a seguir logo acima de onde seu portfólio começa. Como no último tutorial, estou usando o Bootstrap e no HTML abaixo, estou configurando minha linha de filtro para a largura total do contêiner. Por padrão, meus filtros serão alinhados à esquerda da coluna. Se você não estiver usando Bootstrap, você pode querer começar e terminar com as tags <ul> .

<div id="filter-row" class="row">
<div id="project-page" class="col-lg-12">
		<ul class="nav navbar-nav navbar-left" id="filters">
			<?php
				$terms2 = get_terms("project_categories"); // This will go get all the categories
				$count = count($terms2); //This counts the number of categories
				echo '<li><a href="javascript:void(0)" title="" data-filter=".all" class="active">Show All</a></li>';
				if ( $count > 0 ){
				foreach ( $terms2 as $term ) {
												$termname = strtolower($term->name);								$termname = str_replace(' ', '-', $termname);
	echo '<li style="list-style:inline;"><a href="javascript:void(0)" title="" class="" data-filter=".'.$termname.'">'.$term->name.'</a></li>';
	}
}
// in the above foreach loop, the code will return all the values stored in $terms2 array.

 ?>
		</ul>
	</div>
</div>

A próxima etapa é obter a categoria para cada projeto e colocá-la no contêiner do projeto como uma classe.

<?php
/*
Get the category for each unique post using the post ID
*/
$terms = get_the_terms( $post->ID, 'project_categories' );
if ( $terms && ! is_wp_error( $terms ) ) :
$links = array();
	foreach ( $terms as $term ) {
	$links[] = $term->name;
	}
	$tax_links = join( " ", str_replace(' ', '-', $links));
	$tax = strtolower($tax_links);
	else :
	$tax = '';
	endif;

	$terms = get_the_terms( $post->ID, 'project_categories' );
?>

<?php echo '<div class="project col-sm-6 col-md-4 all project-item '. $tax .'">';?>

No código acima, all , project-item e $tax são adicionados a cada contêiner do projeto. $tax será a categoria que você atribuiu a ele no wp-admin . Adicionar “todos” permite redefinir a página do portfólio sempre que um usuário clicar no filtro “todos”.

No final, cada projeto deve ter uma classe chamada “all” e no meu caso, cada projeto também terá “new-construction” ou “renovations”. Agora, quando um usuário clica em uma das categorias, a página será reformatada elegantemente para exibir apenas a categoria que foi selecionada, mantendo o layout de grade do portfólio.

Em conclusão, Isotope.js é um plugin jQuery muito poderoso que pode ser implementado em qualquer site WordPress. Uma vez instalado, ele pode ser usado para classificar e filtrar layouts de catálogo, galeria ou portfólio. Além disso, existem várias opções de layout que você pode usar. Confira todas as opções aqui.

No final, aqui está a aparência do meu projects-page.php quando concluído:

<?php
/* This is my Projects Portfolio page */

get_header(); 

?>
<div id="content-full-width" class="page-wrap">
    <div class="container content-wrapper">
        <div class="row">
            <div id="content-projects" class="page-wrap2">
	    <div class="container content-wrapper">
	<!-- ============ CONTENT START ============ -->
	        <section id="project-content">
		<div id="intro" class="row">
		    <div class="col-sm-12 text-center">
			<?php while ( have_posts() ) : the_post(); ?>
			<?php the_content() ?>
			<?php endwhile; // end of the loop. ?>
		    </div>
		</div>
	            <div id="filters-row" class="row">
		    <div id="project-page" class="col-lg-12">
		        <ul class="nav navbar-nav navbar-left" id="filters">
			<?php
			$terms2 = get_terms("project_categories");
			$count = count($terms2);
			echo '<li><a href="javascript:void(0)" title="" data-filter=".all" class="active">All</a></li>';
			if ( $count > 0 ){
			    foreach ( $terms2 as $term ) {									    $termname = strtolower($term->name);
			    $termname = str_replace(' ', '-', $termname);
			echo '<li style="list-style:inline;"><a href="javascript:void(0)" title="" class="" data-filter=".'.$termname.'">'.$term->name.'</a></li>';
			}
		} ?>
		    </ul>
		</div>
	        </div>
	    <div id="projects" class="row">
	<!-- Start projects Loop -->
		<?php  /* Query the post   */
	$args = array( 'post_type' => 'projects', 'posts_per_page' => -1, 'orderby'=>'menu_order','order'=>'ASC' );
	$loop = new WP_Query( $args );
	while ( $loop->have_posts() ) : $loop->the_post();
/* Pull category for each unique post using the ID */
	$terms = get_the_terms( $post->ID, 'project_categories' );
	if ( $terms && ! is_wp_error( $terms ) ) :
	   $links = array();
	       foreach ( $terms as $term ) {
	       $links[] = $term->name;
		}
	       $tax_links = join( " ", str_replace(' ', '-', $links));
	       $tax = strtolower($tax_links);
		else :
		$tax = '';
	endif;
	<?php echo '<div class="project col-sm-6 col-md-4 all project-item '. $tax .'">';?>
            <a href="<?php print get_permalink($post->ID) ?>">
              <?php echo the_post_thumbnail(); ?></a>
              <h4><?php print get_the_title(); ?></h4>
              <?php print get_the_excerpt(); ?><br />
              <a class="btn btn-default" href="<?php print get_permalink($post->ID) ?>">Details</a>
        </div> <!-- End individual project col -->
        <?php endwhile; ?>
    </div><!-- End Projects Row -->
</div><!-- End Container -->
<!-- ============ CONTENT END ============ -->

<?php get_footer(); ?>

E com isso, você terá uma página de portfólio de filtragem de conteúdo totalmente funcional!

Plugins do WordPress que você vai adorar

Baixe este e-book para obter uma lista dos nossos plugins mais recomendados para desenvolvedores! Descobrimos que todos esses plug-ins são fáceis de usar, não têm um desempenho muito pesado em seu site e são totalmente confiáveis.