准备:需要的jQuery插件
- Isotope: 神奇的布局精致的jQuery插件。演示
- Infinite Scroll:无限滚动被称为autopagerize的,unpaginate,无尽的网页。但实质上,它是预取从随后出现的页面上的内容,并直接将其添加到用户的当前页面。http://www.infinite-scroll.com/ 演示
新建文章类型 portfolio 和 Portfolio 分类
function my_post_types() { register_post_type('portfolio', array( 'label' => __('Portfolio','itc'), 'singular_label' => __('Portfolio', 'itc'), '_builtin' => false, //'exclude_from_search' => false, // Exclude from Search Results 'capability_type' => 'post', 'public' => true, 'show_ui' => true, 'show_in_nav_menus' => FALSE, 'menu_position' => 100, 'rewrite' => array( 'slug' => 'portfolio-show', 'with_front' => FALSE, ), 'query_var' => true, 'supports' => array( 'title', 'thumbnail', 'editor', 'page-attributes') ) ); register_taxonomy('portfolio_category', array('portfolio', 'solution', 'service'), array( 'hierarchical' => true, 'labels' => array( 'name' => __('Portfolio Category', 'itc'), 'singular_name' => __('Portfolio Category', 'itc'), 'search_items' => __('Search Portfolio Category', 'itc'), 'all_items' => __('All Portfolio Category', 'itc'), 'parent_item' => __('Parent Portfolio Category', 'itc'), 'parent_item_colon' => __('Parent Portfolio Category:', 'itc'), 'edit_item' => __('Edit Portfolio Category', 'itc'), 'update_item' => __('Update Portfolio Category', 'itc'), 'add_new_item' => __('Add New Portfolio Category', 'itc'), 'new_item_name' => __('New Portfolio Category Name', 'itc'), 'menu_name' => __('Portfolio Category', 'itc'), ), 'show_ui' => true, 'query_var' => true, 'rewrite' => array('slug' => 'service-view'), )); } add_action('init', 'my_post_types');
好了,可以尽情的往里面塞内容了!
伟大的步骤开始了,前段实现:
创建页面模板 page-portfolio.php
文件顶头写入下面内容:
/** * Template Name: Portfolio * Description: A full-width Portfolio template with no sidebar */
保存,放到当前主题目录里。
新建 portfolio 页面
页面-》新建页面; 注意在右边页面属性-> 模板 里选择 portfolio. ok, portfolio 页面建成了,打开预览。神马?空白!别急,还没完成。
引入jQuery 插件 Isotope and Infinite Scroll
编辑 page-portfolio.php
/** * Template Name: Portfolio * Description: A full-width Portfolio template with no sidebar * */ get_header(); $taxonomy = 'portfolio_category'; ?> <script type='text/javascript' src='<?php bloginfo('template_url') ?>/js/jquery.isotope.min.js'></script> <script type='text/javascript' src='<?php bloginfo('template_url') ?>/js/jquery.infinitescroll.min.js'></script>
前提:在 get_header() 已经调用了 jQuery ;jquery.isotope.min.js 和 jquery.infinitescroll.min.js 已经保存到主题文件夹里的 js 文件夹里。
建立 Portfolio 的 Filters
<div id="options" class="page-title clearfix"> <h1><?php the_title() ?></h1> <?php $all_portfolio_category = get_terms($taxonomy); $count_portfolio_category = count($all_portfolio_category); if ($count_portfolio_category > 0) { echo '<ul class="tags option-set" id="filters" data-option-key="filter">'; echo '<li><a href="#filter" data-option-value="*" class="selected" title="All"><span><img src="<?php bloginfo('template_url') ?>/images/all.png" alt="Hosting"></span></li>'; foreach ($all_portfolio_category as $term) { echo '<li><a href="#filter" data-option-value=".' . $term->slug . '" title="' . $term->name . '"><span><img src=' . z_taxonomy_image_url($term->term_id) . ' alt="' . $term->name . '" ></span></a></li>'; } echo '</ul>'; } ?> </div>
分页形式列出 portfolioes
<div id="project_show" class="clearfix"> <?php query_posts(array( 'post_type' => 'portfolio', 'posts_per_page' => 9, 'is_paged' => TRUE, 'paged' => max(1, get_query_var('paged')))); while ( have_posts()) : the_post(); ?> <?php $portfolio_terms = get_the_terms(get_the_ID(), $taxonomy ); if ( $portfolio_terms && ! is_wp_error( $portfolio_terms ) ) : $data_category = array(); foreach ( $portfolio_terms as $portfolio_term ) { $data_category[] = $portfolio_term->slug; } $data_categories = join( " ", $data_category ); endif; //获取每个portfolio相关的分类,并在下面的element层里输出。 ?> <div class="element one_third <?php echo $data_categories;?>" data-symbol="<?php the_title()?>" data-category="<?php echo $data_categories;?>"> <div class="third_wrap"> <div class="project clearfix"> ========================= </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php toolbox_content_nav('nav-below'); ?>
Js 实例
<script> $(function(){ var $container = $('#project_show'); $container.isotope({ itemSelector : '.element' }); $container.infinitescroll({ navSelector : '.nav-previous', // selector for the paged navigation nextSelector : '.nav-previous a', // selector for the NEXT link (to page 2) itemSelector : '.element', // selector for all items you'll retrieve loading: { finishedMsg: 'No more projects to load.', img: 'http://i.imgur.com/qkKy8.gif' } }, // call Isotope as a callback function( newElements ) { $container.isotope( 'appended', $( newElements ) ); } ); var $optionSets = $('#options .option-set'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); $('#portfolio_category_name').text($this.attr('title')); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('.option-set'); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); // make option object dynamically, i.e. { filter: '.my-filter-class' } var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-value'); // parse 'false' as false boolean value = value === 'false' ? false : value; options[ key ] = value; if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) { // changes in layout modes need extra logic changeLayoutMode( $this, options ) } else { // otherwise, apply new options $container.isotope( options ); } return false; }); }); </script>
到这儿工作就基本上完成了,去试试,已经有效果的,但是并没有人家那么梦幻,是因为支持动画的 CSS 还没有引入。
将下面的CSS加入到 style.css 里,或者独立调用也行。
/* Start: Recommended Isotope styles */ /**** Isotope Filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* End: Recommended Isotope styles */ /* disable CSS transitions for containers with infinite scrolling*/ .isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /**** Isotope styles ****/ /* required for containers to inherit vertical size from window */ html, body { height: 100%; } .element { width: 320px; height: 220px; float: left; overflow: hidden; position: relative; } /**** Example Options ****/ #options li a:hover { background-color: #0081cc; } #options li a:active { background-color: #0085d6; } #options li a.selected { background-color: #0085d6; } /* Combination filter options*/ #options .option-combo { display: inline-block; float: left; margin-right: 10px; } #options .option-combo ul { margin-right: 20px; display: inline-block; } #options .option-combo h2, #options .option-combo h4 { line-height: 34px; margin-bottom: 0; margin-right: 5px; display: inline-block; vertical-align: top; } /**** Infinite Scroll ****/ #infscr-loading { position: fixed; text-align: center; bottom: 30px; left: 42%; z-index: 100; background: white; background: hsla( 0, 0%, 100%, 0.9 ); padding: 20px; color: #222; font-size: 15px; font-weight: bold; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }