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主题添加自定义文章类型register_post_type和分类
    WordPress功能强大之处其中之一就是支持自定义文章类型和分类,非常的好用。本文给大家简单说一下如何在我们的主题中添加自定义文章类型register_post_type和分类register_taxonomy。 首先,添加自定义文章类型...
  • WordPress 5.0 换回原有”Classic Editor”经典编辑器的三种方法
    WordPress 5.0 正式采用了全新的“Block Editor”编辑器,从而替换了原有“Classic Editor”编辑器,相信有很多人都不习惯或者不喜欢新编辑器,那么新版 WordPress 该如何换回原来的 WordPress...
  • WordPress在文章列表插入一篇广告跳转文章或在任意位置插入广告代码
    这个Wordpress技巧可以让你在文章列表中的任意位置插入一篇或多篇广告跳转文章,完美的与主题结构融合,与主题列表的展现形式一模一样,不用去额外的改变任何结构!而且可以一键无痕的将发布的任何文章变成广告跳转文章! 实现过程非常简单,利用了...
  • WordPress网站底部增加蒲公英动态特效教程
    这个特效曾经我也用过很长一段时间,还是比较不错的,喜欢折腾的朋友可以使用一下,下面说一下方法 如果你实在不想折腾直接粘贴一下代码到你的底部文件中吧,注意代码中“图片地址”四个大字哦,将文中图片传到你的服务器中获取图片地址即可 <!--...
  • WordPress自定义后台登录页面的方法
    一成不变的wordpress后台登录界面早已看腻了也用腻了,这篇文章教你改变一下这一成不变的后台登录界面 教程所需的代码已经打包在下面,点击下载就可以了,贴出部分代码: //开始 //登录页面 function custom_login()...
  • 为WordPress添加百度分享按钮侧边悬浮固定效果
    如上图所示,百度分享默认固定在页面左侧边,不管页面向下或者向上滚动,百度分享按钮都会固定悬浮显示; 好了,下面就介绍一下方法吧,其实很简单,在原百度分享代码上添加一段css即可。 1、首先在wordpress后台编辑footer.php文件...
  • WordPress给文章添加百度是否已收录展示和查询功能
    1、编辑主题目录的functions.php文件,在最后一个?>标签前新添如下代码并保存(如没有?>标签,则直接加到最后面): //百度收录展示 function baidu_check($url){ global $wpdb;...
  • WordPress纯代码实现“返回顶部、返回底部、评论”效果
    相信大家对返回顶部、返回底部这些功能已经不陌生了,wordpress上也有很多插件可以实现,也有很多代码方式; 今天我分享的也是以纯代码实现”返回顶部、返回底部、评论”的效果,但是样式跟其他人的可能不同,个人认为比较...
  • 检测自己的WordPress主机是否支持mail邮件功能
    在自己搭建环境或者租用虚拟主机安装wordpress后,经常有人会遇到这样的问题: 为什么在后台注册,WordPress没有给用户发送注册信息的Email? 为什么我已经安装了相关插件,但是WordPress没有给评论者发送新评论通知? 通...
  • 非插件实现WordPress彩色背景标签云
    WordPrss是用wp_tag_cloud函数来调用文章标签的显示边栏小工具标签云列表,默认标签是有自带颜色的,网上也有很多教程改变每个自带标签的颜色。 那如何来给标签加上不同背景色?而不只是改变标签本身的颜色,效果如下图(或看我网站的标...
  • WordPress升级/安装主题插件提示权限不足 输入FTP解决办法
    某些主机或VPS上WordPress更新,或者升级插件或者主题时会提示一个输入FTP信息的页面,然而有时候你明明输入是正确的信息,它还是提示不正确或者再再次的提示输入FTP信息。 解决方案: 方法1:在你的wp-config.php中插入:...
  • 如何彻底移除并关闭WordPress的RSS feed
    WordPress默认开启了feed功能,好处不言而喻,可以方便RSS阅读器进行订阅,让读者及时收到博客的更新信息。但有些博客基本没有人订阅,却有一堆机器人来采集博客的feed,方便了别人复制你的文章不说,还造成了不必要的资源消耗。 阻止采...

评论 抢沙发



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

支付宝扫一扫打赏

微信扫一扫打赏