WordPress主题给自定义文章Portfolio添加筛选功能Filter

我们在做WordPress主题时，都喜欢使用自定义文章类型来丰富主题的功能。这个时候免不了需要给自定义文章做个类别或者标签筛选功能，今天WP零伍利用 Isotope 来给自定义文章添加筛选功能。

首先我们必须添加自定义文章类型以及自定义文章分类功能，这个部分请看我们的文章《WordPress主题添加自定义文章类型register_post_type和分类register_taxonomy》。

我们先需要在主题的 functions.php 里面添加筛选功能的JQuery代码，如下代码：

wp_enqueue_script( 'wpgp-isotope', get_template_directory_uri() . '/js/isotope.pkgd.min.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'wpgp-main', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );

下面我们启用 isotope 的功能，需要在 main.js 里面写上这些代码：

// portfolio filter
$( window ).load( function() {

	// Portfolio filtering
	var $container = $( '.portfolio' );

	$container.isotope( {
		filter: '*',
		layoutMode: 'fitRows',
		resizable: true, 
	  } );

	// filter items when filter link is clicked
	$( '.portfolio-filter li' ).click( function(){
		var selector = $( this ).attr( 'data-filter' );
			$container.isotope( { 
				filter: selector,
			} );
	  return false;
	} );
} );

首先，获取自定义分类列表做个筛选菜单，代码如下：

<div class="portfolio-filter">
<ul>
<li id="filter-all" class="filter active" data-filter="*"><?php _e( '全部产品', 'WPGP' ) ?></li>
<?php
// list terms in a given taxonomy
$taxonomy = 'taxonomy';
$tax_terms = get_terms( $taxonomy );

foreach ( $tax_terms as $tax_term ) {
echo '<li class="filter" data-filter=".'. $tax_term->slug.'">' . $tax_term->name .'</li>';
}
?>
</ul>
</div>

接下来我们做个自定义文章内容显示的部分，筛选菜单点击后，下面的内容自动筛选显示：

<div class="portfolio">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$args = array(
'post_type' => 'portfolios',
'paged' => $paged,
);

$pf_query = new WP_Query ( $args );

if ( $pf_query -> have_posts() ) :

/* Start the Loop */
while ( $pf_query -> have_posts() ) : $pf_query -> the_post();

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

if ( $terms && ! is_wp_error( $terms ) ) {

$filter_links = array();

foreach ( $terms as $term ) {
$filter_links[] = $term->slug;
}

$filter = join( " ", $filter_links );
?>

<div class="portfolio-item <?php echo $filter; ?>">
<div class="items">
<?php if ( '' !== get_the_post_thumbnail() ) { ?>
<a class="post-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnails'); ?></a>
<?php } ?>

<div class="title">
<a rel="bookmark" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</div>
</div>
</div>
<?php
}
endwhile;
endif;
?>
</div>

页面完整的代码这里就不写了，需要看效果的可以到我们网站WordPress主题下载分类页看具体效果。最后我们把筛选菜单的CSS贴一下，这个很重要：

.portfolio-filter {
  font-size: 1rem;
  overflow: hidden;
}
.portfolio-filter ul {
  margin: 0;
  padding: 30px 0;
  text-align: center;
  width: 100%;
}
.portfolio-filter ul li {
  background: #f0f0f0;
  color: #212529;
  cursor: pointer;
  display: inline-block;
  list-style-type: none;
  margin: 0 15px 0 0;
  padding: 5px 10px;
}
.portfolio-filter ul li:first-child {
}
.portfolio-filter ul li:focus, .portfolio-filter ul li:hover {
  color: #e14d43;
}