Question

现在如何运作：

它显示最新的6个项目为默认
按下特定列表时，它会显示该类别中最新的6个项目的最新帖子。例如：它显示 Foto 中的最新4个，因为6个中的4个是 Foto 的类别。这意味着如果6个最新项目属于 Foto 类别，则其他类别中的任何帖子都不会显示。 如果您不明白，请参阅下面的屏幕截图。

Does not show all posts within each category

它应该如何运作：

将最新的6个项目显示为默认值（此作品）
当按下一个类别时，它应显示该类别中的最新6个帖子

注意：如果您在Windows 10中使用Chrome，则悬停效果因某种原因停止工作。该错误已报告给Chrome和Windows

<ul id="filters" class="whitetext whitelink myeluft">
    <li class="smoothtrans"><a href="#" data-filter="*" class="selected smoothtrans">Alle</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.foto' class="smoothtrans">Foto</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.video' class="smoothtrans">Video</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.web' class="smoothtrans">Web</a></li>
</ul>

PHP

<?php

$args = array(
    'post_type' => (array( 'foto', 'video', 'web' )),
    'posts_per_page' => '6',
    'post_taxonomy' => 'any',
);

$the_query = new WP_Query($args); 


// Loop post_type
?>

<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 

        $termsArray = get_the_terms( $post->ID, "category");  //Get the terms for this particular item
        $termsString = ""; //initialize the string that will contain the terms
            foreach ( $termsArray as $term ) { // for each term 
                $termsString .= $term->slug.' '; //create a string that has all the slugs 
            }
        ?> 
        <div class="<?php echo $termsString; ?> item col-md-4"> 
            <ul class="grid cs-style-3">
                <li>
                    <figure>
                        <?php if ( has_post_thumbnail() ) { 
                              the_post_thumbnail('frontpage_thumb');
                        } ?>
                        <figcaption class="lefttext">
                            <h3><?php the_title(); ?></h3>
                            <span class="offgrey"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span>
                            <a href="<?php the_permalink() ?>" title="Se prosjekt" rel="bookmark" class="smoothtrans">Se prosjekt</a>
                        </figcaption>
                    </figure>
                </li>
            </ul>             
        </div> <!-- end item -->
        <?php endwhile;  ?>
    </div> <!-- end isotope-list -->
    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/toucheffects.js"></script>
<?php endif; ?>

JS

jQuery(function ($) {

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.item', 
        layoutMode : 'masonry'
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

我虽然（2015年7月13日更新）

我已经对它进行了更多研究，并且在禁用'posts_per_page'并且仅使用自定义wp设置时，问题是相同的。所以我想问题是，当按下每个类别时，它不会刷新或获得除首次显示之外的任何其他帖子。

因此，我认为args必须设置在另一个地方，或者必须修改js才能获得最新的帖子。但这不是我的专业知识，因此我问你是否有任何解决方案。我在搜索引擎和搜索引擎上搜索了这个问题，但我找不到它。但是，我看到类似的页面有同样的问题。有了这个，我相信解决这个问题也会有助于其他用户。

Answer 1

您当前的代码仅向数据库询问最近的6个帖子。 Isotope插件然后在前端过滤它们。

这意味着它不能显示除此之外的更多帖子6.当您点击标签（foto，video，web）同位素过滤此6个帖子时，仅显示具有所选类别的帖子。它不会要求更多帖子，只会过滤您已有的帖子。

当您点击过滤器标签时，您可以让您的代码要求更多帖子，但您需要使用AJAX。

Answer 2

我不理解的两件事

为什么他们是两个导航/选择

2.第一个工作正确，但第二个没有任何链接或功能，它只链回到使用#hyper reference。

3.如果不检查分配的类别

Answer 3

您可以做的一件事就是一次性获取所有帖子，并使用类似

的内容仅显示6个帖子

jQuery('#isotope-list').isotope({
    filter: ':nth-child(-n+3)'
});

Answer 4

过滤器仅适用于页面上的可用商品。

当按下一个类别时，它应显示该类别中的最新6个帖子如果可用，在您的情况下（http://www.vekvemedia.no/）总项目为6并且5项目属于“foto”类别因此，当按“foto”类别时，它将显示5个项目。

解决方案-1 ：如果您有“全部”选项，那么您必须在该过滤器工作后加载所有可用项目，并显示所有匹配类别的项目。

解决方案-2 ：通过使用ajax，获取匹配类别的6条记录（如“foto”）

同位素 - 显示每个类别中的最新帖子

4 个答案: