WordPress主题使用jQuery插件Isotope添加作品集筛选功能
上一篇文章我们介绍了Isotope，功能强大，效果出众的jQuery插件，但是文章中的代码并不能使用在项目中，所以今天通过Wordpress主题来演示此功能，完全可以使用在你的主题当中。
引入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-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”，获取的是全部作品。
[musicbox]在后台新建一个作品集页面，模板选择作品集，就可以实现与萨龙网络作品集一样的筛选效果。[/musicbox]本文原创，作者：萨龙龙，其版权均为萨龙网络所有。
如需转载，请注明出处：https://salongweb.com/wordpress-theme-isotope.html
一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！自动获取照片的EXIF信息，很多大型的摄影论坛都有这个功能，对于摄影爱好者来说是一个很实用的功能。萨龙龙开发的Deephoto主题和Neatim…WordPress 主题开发中，很多时间需要在文章与列表中进行判断从而输出不同的内容，比如文章分类，只想在列表中显示，文章中不显示。列表页面可直…默认情况下，WordPress会将图像元素width和height属性添加到图像元素中。这些属性会影响CSS宽度和高度属性，图片延迟加载时默认图…WordPress 4.9.8 版本就发布了古滕堡编辑器，很好用，添加文章也比经典编辑器方便很多。在 5.8 版本后又在小工具中增加了古滕堡编辑…Wordpress获取分类文章的函数有query_posts和WP_Query，两个函数的功能都很强大，推荐使用WP_Query函数来查询文章。…课程插件功能已经能满足绝大多数在线教育培训课程网站的需求，选项功能也众多，「即将推出」功能还在开发中。WordPress 主题文章类型较多，想实现不同的文章类型页面调用不同的边栏，一般的方法是将代码写在主题根目录下的 sidebar.php 文件…最近开发了一款多功能的新闻视频类Wordpress主题Yewan，客户的网站用户也比较多，要求设计一个按权限（管理员、编辑、作者、投稿者、订阅者…Redis是一个开源、支持网络、基于内存的key-value存储系统，类似memcached，性能极高，支持超过100K+ 每秒的读写频率，一些…WooCommerce 插件默认为我的帐户页面提供了：仪表盘、订单、下载、地址、帐户详情几个页面，以及一个退出登录的按钮，如果出售的是实物或者没…在很多网页上，尤其是一些科技企业的产品展示页面，当你滚动页面的时候会看到各式各样的元素动画效果，非常的炫丽，很吸引人。WOW.js就是一款帮助你…萨龙网络所有主题都集成了很多优化功能，在 WordPress 更新至5.0版本后，古腾堡(Gutenberg)编辑器发布与更新文章/页面就出现错…
