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 5.0 换回原有”Classic Editor”经典编辑器的三种方法
    WordPress 5.0 正式采用了全新的“Block Editor”编辑器,从而替换了原有“Classic Editor”编辑器,相信有很多人都不习惯或者不喜欢新编辑器,那么新版 WordPress 该如何换回原来的 WordPress...
  • WordPress主题添加自定义文章类型register_post_type和分类
    WordPress功能强大之处其中之一就是支持自定义文章类型和分类,非常的好用。本文给大家简单说一下如何在我们的主题中添加自定义文章类型register_post_type和分类register_taxonomy。 首先,添加自定义文章类型...
  • WordPress获取网站根目录、主题目录、插件目录路径和url地址
    标题描述很清楚,就是获取根目录、主题目录、插件目录路径的介绍,当你写个主题或者插件的时候一定会用到,就不多啰嗦直接给出代码吧 站点路径相关函数 home_url() 返回站点路径,相当于后台设置->常规中的”站点地址(URL)” $u...
  • WordPress主题添加全站底部三栏推广模块
    给网站底部增加一个通栏模块 新建 module_footer_brand_lmr.php 文件 新建一个名为 module_footer_brand_lmr.php 的文件,并将以下代码复制到新建的文件夹中,最后将文件丢到主题的 modul...
  • wordpress如何去掉generator
    用wordpress建站经常会出现一些显而易见的标签,比如说作者<meta name=”generator” content=”WordPress 4.9″>,网站一旦被别人知道用...
  • WordPress给文章添加密码保护功能
    WordPress文章密码保护功能网上有很多相关的代码,但是没找到密码输入错误时提示的代码,所以最终还是自己对源代码做了些简单修改,便成了下面这幅样子 将以下代码添加到主题的 functions.php 文件中去即可。 // 输入密码查看文...
  • WordPress 如何实现纯代码添加禁止某些用户登录的方法
    在某些特殊情况下某些用户损害了网站的利益,你可能就需要禁止他们登录网站,WordPress博客如何实现免插件纯代码添加禁止某些用户登录的方法,也就是WordPress博客用户怎么实现封号,近日以来网站垃圾信息,垃圾回复泛滥,由于之前不怎么关...
  • WordPress性能优化 PHP环境开启Memcached缓存扩展
    什么是Memcached?免费和开源,高性能,分布式内存对象缓存系统,本质上是通用的,但旨在通过减轻数据库负载来加速动态Web应用程序。Memcached是一个内存中的键值存储,用于从数据库调用,API调用或页面呈现的结果中获取任意数据(字...
  • wordpress自定义字段实现缩略图调用
    wordpress实现缩略图调用的方法非常多,比如常用的有插件法(WP-Thumbnails),也可以使用特色图片调用法,文章第一张图片缩略调用法等,这里给我大家介绍最简单的一种实现方法:自定义字段实现法。 具体实现过程: 1、找到需要实现...
  • WordPress非插件实现文章点赞功能
    功能丰富的WordPress点赞插件不少,但对于要在主题中集成简单文章点赞功能的需求,插件就显得不合适,于是乎非插件实现文章点赞功能的方法就诞生,实现思路是:可以通过ajax实时显示点赞数量,自定义字段保存赞数量,Cookies禁止重新点赞...
  • wow.js中各种特效对应的类名
    一、(页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也能弄出来这种效果了。 虽然效果出来了,但...
  • WordPress自动采集发布插件WP-AutoPost使用教程
    WP-AutoPost是目前最好用的WordPress自动采集发布插件,最大的特点是可以采集来自于任何网站的内容并自动发布到你的WordPress站点。不像其他大部分WordPress采集插件,只能根据Feed进行采集,使用Feed采集有很...

评论 抢沙发

  • Q Q(选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址