Question

我在Wordpress的新闻页面上运行了同位素实例。我已经做到了，所以可以使用链表对类别进行排序。我的问题出现在分类/过滤类别上。

我的第一个问题是为Isotope添加分页。我找到了一篇文章here，我试图将其复制供我使用。

我的HTML / PHP

<?php
    function custom_taxonomies_terms_links(){
    // get post by post id
    $post = get_post( $post->ID );
    // get post type by post
    $post_type = $post->post_type;
    // get post type taxonomies
    $taxonomies = get_object_taxonomies( $post_type, 'objects' );
    $out = array();
    foreach ( $taxonomies as $taxonomy_slug => $taxonomy ){
      // get the terms related to post
    $terms = get_the_terms( $post->ID, $taxonomy_slug );
    if ( !empty( $terms ) ) {
        foreach ( $terms as $term ) {
        $out[] = $term->slug.' ';
        }     
    }
    }
    return implode('', $out );
    }
    function excerpt($limit) {
    return wp_trim_words(get_the_excerpt(), $limit);
    } 

    $num = 0; // post number
    $page_num = 1; // starting page number
    $items_per_page = 4; // how many posts per page?
    $i = 0; // our counter
?>

<?php 
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <div class="col-sm-3 news-item <?php echo custom_taxonomies_terms_links();?>" page="<?php echo $page_num;?>">
        <a href="<?php the_permalink();?>">
        <?php 
        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
            the_post_thumbnail('large', array( 'class' => 'img-responsive' ));
        } 
        ?>                               
        </a>
        <span class="meta"><?php the_category(' '); ?> : <?php the_date('M d, Y'); ?></span>
        <h3><a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
        <?php echo excerpt(30);?>
    </div>

    <?php $num++ ?>
<?php endwhile; ?>
<?php 
   if (!($num % $items_per_page)){ // if the page is full, add page button and move to next page
    if ($page_num > 1) {
        //next page
        echo '<div class="goto-page next post news-item" page="'.($page_num-1).'">'. //show on previous page
        '<a href="#" class="page" page=".news-item[page~='.($page_num).']">'. //point to this page
        '<span>More Styles</span></a></div>';

        //previous page
        echo '<div class="goto-page previous post news-item" page="'.$page_num.'">'. //show on previous page
        '<a href="#" class="page" page=".news-item[page~='.($page_num-1).']">'. //point to this page
        '<span>Previous Styles</span></a></div>';
    } 
    $page_num++;
}?>
<?php endif; ?>

<?php if ( $page_num > 1 && ($num % $items_per_page) != 0 ){
//next page
echo '<div class="goto-page next post news-item" page="'.($page_num-1).'">'. //show on previous page
'<a href="#" class="page" page=".news-item[page~='.($page_num).']">'. //point to this page
'<span>More Styles</span></a></div>';

//previous page
echo '<div class="goto-page previous post news-item" page="'.$page_num.'">'. //show on previous page
'<a href="#" class="page" page=".news-item[page~='.($page_num-1).']">'. //point to this page
'<span>Previous Styles</span></a></div>';
} ?>

我的jQuery

var containerNews = $('.latest-container');

containerNews.isotope( { filter : ".news-item[page~='1']" } ); // starting filter
containerNews.isotope({
    itemSelector: '.news-item',
    layoutMode: 'fitRows',       
    percentPosition: true
});

$('.latestNav li').click(function(){ 

    (".latestNav li").removeClass("active");
    $(this).addClass("active");        

    var selector = $(this).attr('data-filter'); 
    containerNews.isotope({ 
        filter: selector, 
        animationOptions: { 
        duration: 750, 
        easing: 'linear', 
        queue: false, 
        } 
    }); 
    return false; 
}); 

$('div.goto-page a').click(function(){
    var selector = $(this).attr('page'); // make selector equal to the value we put in 'page'
    containerNews.isotope( { filter : selector });
    return false;
});

这实际上打破了同位素但是如果我删除containerNews.isotope( { filter : ".news-item[page~='1']" } );那么它会再次起作用（但没有分页）

我的第二个问题是按类别过滤。例如，如果我在页面上显示了8个帖子，但总共有16个帖子。其中12个帖子属于“活动”类别。目前，如果我点击“活动”（仅显示这些帖子），它只会从8个可用的（不是12个）中排序 - 有什么方法可以解决这个问题吗？

有没有人成功设法在Wordpress中同时使用Isotope进行分页和过滤？

Wordpress帖子有同位素 - 如何添加分页/过滤排序

0 个答案: