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;
}
这篇文章如果帮到了你 打赏
分享到: 更多 (0)
0
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • WordPress在文章列表插入一篇广告跳转文章或在任意位置插入广告代码
    这个Wordpress技巧可以让你在文章列表中的任意位置插入一篇或多篇广告跳转文章,完美的与主题结构融合,与主题列表的展现形式一模一样,不用去额外的改变任何结构!而且可以一键无痕的将发布的任何文章变成广告跳转文章! 实现过程非常简单,利用了...
  • WordPress 5.0 换回原有”Classic Editor”经典编辑器的三种方法
    WordPress 5.0 正式采用了全新的“Block Editor”编辑器,从而替换了原有“Classic Editor”编辑器,相信有很多人都不习惯或者不喜欢新编辑器,那么新版 WordPress 该如何换回原来的 WordPress...
  • WordPress主题添加自定义文章类型register_post_type和分类
    WordPress功能强大之处其中之一就是支持自定义文章类型和分类,非常的好用。本文给大家简单说一下如何在我们的主题中添加自定义文章类型register_post_type和分类register_taxonomy。 首先,添加自定义文章类型...
  • wordpress给你的网页添加一个加载动画
    网页加载需要一个过程,现在这个过程可以极短了,不过有些朋友还是希望能用一个动画来代替这个过程,让加载不再那么枯燥。搜索了一下,很多这类文章,方法很多,利用CSS实现应该是最好的办法了。过程很简单,只需两步。 添加方法 第一步 创建一个css...
  • WordPress插件-Post Expirator 给文章或页面设置一个到期时间
    有些时候,一些文章或页面没必要始终展示,比如公告,活动,广告等,但是对于像我一样的懒人们又不想拐回去关闭文章,或者忘记关闭文章。这是你就需要这样一个插件。 Post Expirator 这个插件使用起来比较简单,功能也够强大,可以为文章或者...
  • 代码实现网站外链自动转换为内链
    实现步骤: 首先复制以下代码,添加到主题目录下的function.php文件中 /*  *自动给文章的外部链接添加nofollow属性  */    add_filter('the_content','web589_the_content_...
  • DUX主题文章页相关推荐双栏显示
    DUX主题是themebetter原创开发的一款基于WordPress程序的多功能主题,响应式布局,不同设备不同展示效果,简洁大气  ,多设备支持、优化SEO,适用于垂直站点、科技博客、个人站,目前我站点使用的就是DUX主题,作为一个喜欢折...
  • 纯代码实现WordPress文章页展开收缩功能
    网上关于实现文章内容“展开/收缩”效果的方法有很多,但是有很多代码似乎已经不可用,而另一些虽然可用但是前端显示效果不怎么美观,于是我便根据网上的一些代码进行了些许的改动便有了这篇文章。下面我们就来具体了解下如何实现文章内容的“展开/收缩”功...
  • 为亮点功能添加快捷按钮
    其实该功能主要是通过 CSS 样式的调整来实现的,实现方式虽然简单但是前端显示效果确实不错,官方给出的调用方式也极其简单,通过下面两行代码调用: <ol class="liangdian"> <li><stro...
  • WordPress 后台文章编辑器添加下拉式短代码选择
    // 后台编辑器添加下拉式按钮 function wzt_select(){ echo ' <select id="short_code_select"> <option value="请选择一个短代码!!!">插入...
  • 怎样在wordpress使用Font Awesome字体图标
    Font Awesome是一款矢量的图标或可以称为字体图标,他的所有属性都可以通过CSS进行设定,包括:大小、颜色、阴影或者其它任何支持的效果。不旦有效解决了图像加载慢的问题,而且好提供了超过5000+的图标方案。 在wordpress使用...
  • WordPress 批量删除所有文章的特色图像
    说到 WordPress 的特色图像功能,相信大家都比较熟悉了,今天分享 批量删除所有文章的特色图像 的方法,或许有些朋友会用得上。将下面的代码添加到当前主题的 functions.php : /** * WordPress 批量删除所有文...

评论 抢沙发



觉得文章有用就赞赏支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏