WordPress Portfolio work with Isotope and Infinite Scroll

Posted on by

准备：需要的jQuery插件

  1. Isotope: 神奇的布局精致的jQuery插件。演示
  2. 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 &#038;& ! 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' &#038;& 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;
}

OK，大功告成！