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>

发表评论