使用砖石-如何让每个第X个帖子的缩略图跨越多个列?

时间:2014-06-24 作者:melissa

具体而言:

我正在使用Masonry显示某个类别内的所有帖子,每个帖子的缩略图以3列格式显示在类别页面上,使用CSS fluid width列,我需要显示跨越所有3列宽度的第7个缩略图。过去,我为帖子添加了一个计数器,以定位第x个帖子,从而相应地应用类别和样式。但这是否可能与砌体有关,因为砌体绝对是定位元素?

EDIT

我正在使用此代码查询砌体页面上的帖子:

    if ( get_query_var( \'paged\' ) ) {
    $paged = get_query_var( \'paged\' );
} elseif ( get_query_var( \'page\' ) ) {
    $paged = get_query_var( \'page\' );
} else {
    $paged = 1;
}
$args = array(
    \'posts_per_page\' => 12, 
    \'paged\' => $paged
);

// Override the primary post loop
query_posts( $args );

2 个回复
最合适的回答,由SO网友:melissa 整理而成

因此,我不知道如何向每个帖子/文章div添加数字序列类,但我只是更改了砌体模板中第7篇帖子的模板。

我是这样做的:

<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while (have_posts()) : the_post(); ?>

<?php $count++; ?>
<?php if ($count == 7) : ?>

     <article class="masonry-entry masonry-3col masonry-post-no-7">
     </article>

<?php else: ?>  

     <article class="masonry-entry masonry-3col">
     </article>
<?php endif; ?>
<?php endwhile; ?>

SO网友:Nicolai Grossherr

这不应该是砌体的问题,至少我从来没有用过它(或类似的同位素)。实际上,正是这些库的美丽之处,才使您能够拥有这种布局。其余的都是正确的CSS样式。我不知道如何应用计数器/索引类,但我会按如下所示进行操作:

function wpse151589_indexed_post_class( $classes ) {
    global $wp_query;

    // the current_post property value starts counting at 0
    // we are doing + 1 to start from 1
    $index = $wp_query->current_post + 1;

    // if you want the number to always have 3 digits
    // like 001, uncomment the next line
    //$index = sprintf( \'%1$03d\', $index );

    // results in classes like post-nr-1/001
    $classes[] = \'post-nr-\' . $index;

    return $classes;
}
add_filter( \'post_class\', \'wpse151589_indexed_post_class\' );

<小时>Edit: 回复评论

有些事情我想说,

执行not 使用query_posts()

即使是相应的codex页面也有这样一个原因:

此功能不适用于插件或主题。如后文所述,有更好、性能更好的选项来更改主查询。

之后:

对于常规post查询,请使用WP_Queryget_posts.

以及:

是的strongly 建议您使用pre_get_posts 改为筛选,并通过检查更改主查询is_main_query

两个最具信息性和杰出的来源why 实际上位于WordPress开发中,它们绝对值得一读:

结束

相关推荐

用于初始化WordPress的JQuery Masonry的脚本

这两者有什么不同(http://pastebin.com/PX0YB0hy)及(http://pastebin.com/VBqiMHVQ)用于JQuery砌体。为什么第一个有效而第二个无效。在这两种情况下,我都使用wp\\u enqueue\\u脚本添加脚本。谢谢