我们在做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; } ); } );
首先,获取自定义分类列表做个筛选菜单,代码如下:
slug.'">' . $tax_term->name .''; } ?>
接下来我们做个自定义文章内容显示的部分,筛选菜单点击后,下面的内容自动筛选显示:
'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 ); ?>
页面完整的代码这里就不写了,需要看效果的可以到我们网站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; }