一淘新用户输入一淘官方邀请码领取8元立减福利

1. 一淘是阿里巴巴旗下的返利平台,和淘宝天猫通用的,您可以放心参与

2. 不需要绑卡乱七八糟的绑定和认证,只需两步就可以领淘宝8块钱

3. 安装一淘登陆 输入一淘邀请码: 领取新人8元立减福利 查看图文教程

4. 一淘APP购物每笔都有额外的返利,而且还有一淘专享优惠券

5. 点击看详细教程

由 一淘福利网 推送

WordPress主题给自定义文章Portfolio添加筛选功能Filter

本文简介 我们在做WordPress主题时,都喜欢使用自定义文章类型来丰富主题的功能。这个时候免不了需要给自定义文章做个类别或者标签筛选功能,今天WP零伍利用 Isotope 来给自定义文章添加筛选……

我们在做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;
}
这篇文章如果帮到了你
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
WordPress在文章列表插入一篇广告跳转文章或在任意位置插入广告代码2019-03-11
这个Wordpress技巧可以让你在文章列表中的任意位置插入一篇或多篇广告跳转文章,完美的与主题结构融合,与主题列表的展现形式一模一样,不用去额外的改变任何结构!而且可以一键无痕的将发布的任何文章变成广告跳转文章! 实现过程非常简单,利用了...
原创WordPress 5.0 换回原有”Classic Editor”经典编辑器的三种方法2018-12-09
WordPress 5.0 正式采用了全新的“Block Editor”编辑器,从而替换了原有“Classic Editor”编辑器,相信有很多人都不习惯或者不喜欢新编辑器,那么新版 WordPress 该如何换回原来的 WordPress...
WordPress主题添加自定义文章类型register_post_type和分类2018-07-23
WordPress功能强大之处其中之一就是支持自定义文章类型和分类,非常的好用。本文给大家简单说一下如何在我们的主题中添加自定义文章类型register_post_type和分类register_taxonomy。 首先,添加自定义文章类型...
原创WordPress大前端主题DUX6.4版本主题免费下载2020-05-30
DUX主题是一款经典的wordpress主题,现在更新又来了一波,更新到了DUX6.4版本,本次更新功能点较多,也着实耗费了一番心力,且个个备受很多用户的期待。 DUX6.4值得一提的功能:百度收录 百度收录功能基本是国内站长必备,且前几天...
原创日主题RiPro v6.6去授权破解版免费分享2020-05-28
全新发布,更加专业,资源,素材,源码站运营首选,支付宝原生/当面付、微信扫码/H5支付、码支付、虎皮椒、PAYJS。QQ/微信/微博一键登录,付费下载、付费查看、支持卡密、会员、推广佣金、作者佣金、前端发布资源等。
原创wordpress给主题调用今日(最近24小时)最新发布文章数量2020-03-08
其实标题中写着调用今日最新发布文章数量是不准确的,因为1天为24小时,调用只能按时刻调用24小时,它的计数方式是以当前时间为准,所以是调用当前时间向前推24才对,不必计较了,因为时间依然在往后推移呀。。。 获取最近24小时发布的文章数 /*...
转载qqoq3.0主题免费分享(破解版)分享2020-03-05
本主题为qqoq3.0破解版,此主题特色就是视频了,其他的在歪主题看来也就那样子,歪主题拿到qqoq3.0版本主题后,测试再三,发现很多问题,但并不影响正常使用所以之修复了一个视频不能显示和播放的问题(视频空白),其他一些小的改动也就不用再...
原创wordpress顶和踩喜欢功能的实现2020-02-20
顶踩功能大家都知道,不用多解释,本文介绍使用代码实现顶踩功能详细步骤 首先创建数据表 /*********更新重写规则***************/ function ashu_load_theme() { global $pagenow...
原创Justnews主题4.0.4破解版包含qapress2.3.1问答插件WordPress主题Justnews破解版2019-03-10
不知道有需要的小伙伴吗?这年头,网上分享的很多,各式各样的版本,不过,敢用你可以去下载使用,想要安全那就继续看下面 你如果需要这个主题 点击查看这里  歪迪资源屋不负责这个主题的发货和服务支持,谁给你发货你找谁就可以了,我们只是这篇文章的搬...
wordpress给你的网页添加一个加载动画2019-01-29
网页加载需要一个过程,现在这个过程可以极短了,不过有些朋友还是希望能用一个动画来代替这个过程,让加载不再那么枯燥。搜索了一下,很多这类文章,方法很多,利用CSS实现应该是最好的办法了。过程很简单,只需两步。 添加方法 第一步 创建一个css...
WordPress插件-Post Expirator 给文章或页面设置一个到期时间2019-01-29
有些时候,一些文章或页面没必要始终展示,比如公告,活动,广告等,但是对于像我一样的懒人们又不想拐回去关闭文章,或者忘记关闭文章。这是你就需要这样一个插件。 Post Expirator 这个插件使用起来比较简单,功能也够强大,可以为文章或者...
代码实现网站外链自动转换为内链2019-01-20
实现步骤: 首先复制以下代码,添加到主题目录下的function.php文件中 /*  *自动给文章的外部链接添加nofollow属性  */    add_filter('the_content','web589_the_content_...

歪迪资源屋所有资源均为免费分享,不会存在任何收费情况,如资源给你带来帮助,这正是我们的初衷,歪迪更懂你!如你愿意可以打赏本文支持站长维持站点运营~

支付宝扫一扫打赏

微信扫一扫打赏