17713433920 info@mac163.com

WordPress主题使用jQuery插件Isotope添加作品集筛选功能

我们介绍了Isotope,功能强大,效果出众的jQuery插件,但是文章中的代码并不能使用在项目中,所以今天通过WordPress主题来演示此功能,完全可以使用在你的主题当中。

WordPress主题使用jQuery插件Isotope添加作品集筛选功能

WordPress主题使用jQuery插件Isotope添加作品集筛选功能

引入Isotope代码

首先得确保你的主题加载了jQuery插件,然后在Isotope官网下载isotope.pkgd.min.js文件,放在主题的js文件夹下,添加以下代码在footer.php文件夹中:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/isotope.pkgd.min.js"></script>
< script >
var $container = $(".portfolio ul").isotope({});
$("#filters").on("click", "button",
function() {
var filterValue = $(this).attr("data-filter");
$container.isotope({
filter: filterValue
})
});
$("#filters button").click(function() {
$("#filters button").removeClass("active");
$(this).addClass("active")
});
< /script>

.portfolio ul为包裹作品列表的元素,#filters为包裹按钮的元素,button为按钮。

作品集页面模板

新建一个名称为template-portfolio.php作品集页面模板,顶部代码为:

<?php
/*
*Template Name: 作品集
*/
get_header(); ?>

添加PHP代码

将以下代码添加到template-portfolio.php文件中,具体位置根据主题代码而定。

<section class="button-group">
    <div id="filters">
        <?php $terms=get_terms( "portfolio_field"); $count=count($terms); echo '<button class="button active" data-filter="*">'.__( '全部', 'salong' ). '</button>'; if ( $count>0 ){ foreach ( $terms as $term ) { $termname = strtolower($term->name); $termname = str_replace(' ', '-', $termname); echo '
        <button class="button" data-filter=".'.$termname.'">'.$term->name.'</button>'; } } ?>
    </div>
</section>
<section class="portfolio portfolio-list">
    <ul>
        <?php $args=array( 'post_type'=>'portfolio', 'posts_per_page' => -1 ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); $terms = get_the_terms( $post->ID, 'portfolio_field' ); if ( $terms && ! is_wp_error( $terms ) ) : $links = array(); foreach ( $terms as $term ) { $links[] = $term->name; } $tax_links = join( " ", str_replace(' ', '-', $links)); $tax = strtolower($tax_links); else : $tax = ''; endif; ?>
        <li class="<?php echo $tax; ?>">
            <article class="portfolio-item">
                <div class="portfolio-img">
                    <?php post_thumbnail(); ?>
                </div>
                <div class="portfolio-info">
                    <h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                </div>
            </article>
        </li>
        <?php endwhile; ?>
    </ul>
</section>

这里获取的文章类型为“portfolio”,获取的是全部作品。

在后台新建一个作品集页面,模板选择作品集,就可以实现与我们Wordpress网站作品集一样的筛选效果。

微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
QQ客服
  • 在线客户 点击这里给我发消息
旺旺在线
  • 淘宝旺旺 点这里给我发消息
电子邮箱
  • 联系邮箱
微信客户
  • 扫一扫,加好友
关闭搜索

购物车

回到顶部