使用砌体 - 如何让每个xth帖子缩略图图像跨越多列？

Question

要具体：

• 我正在使用砌体来显示某个类别中的所有帖子
使用CSS流体宽度列以3列格式显示每个帖子的
• 每个帖子的缩略图。
• 我需要展示跨越所有3列的宽度的第7缩略图图像

在过去，我添加了一个计数器，以删除xth post来相应地应用类和风格。但这可能是砌体，这是绝对定位元素吗？

编辑

我正在使用此代码在Masonry页面上查询帖子：

    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 );

.

Answer 1

所以我无法弄清楚如何向每个帖子/文章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; ?>

.

Answer 2

这不应该是砌体的问题，至少我从未有过它（或其类似的等效同位素）。实际上它只是你能够拥有这种布局的那些图书馆的美丽。其余部分归结为正确的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' );

.

---

编辑：回复评论

有一些我喜欢注意，

1. do not 使用 query_posts()

   甚至是根据Codex页面状态的原因：

   此功能不打算由插件或主题使用。如稍后说明的那样，有更好的，更加性能的选项来改变主查询。

   及以后：

   对于常规帖子查询，使用 WP_Query 或 get_posts 。

   和：

   它是强烈建议您使用 pre_get_posts 更换过滤器，并通过检查 is_main_query

   来改变主查询

   为什么为什么的两个最具信息和出色的来源实际上位于Wordpress开发中，它们绝对值得读：

   • 应该使用wp_query vs query_posts（）vs get_posts（）？
   • 何时使用wp_query（），query_posts（）和pre_get_posts
     

2. “ post_class() 不能在循环 not true

   甚至有一个部分关于该文件在文档中。授予生成的codex页面for for post_class不是最好的，但它很清楚，函数有两个参数，它们是：$classes和$post_id。

   post_class( $classes, $post_id );
   

   .

   哪种方式：

   为了在循环外或备用循环外显示帖子，Post_Class函数的第二个参数可以是帖子ID。然后将从该帖子中确定类。

   这 - 除了1.-------为您的目的使用这一点。
   
   

3. WP_Query 对象有一个名为$current_post

   的属性

   $ current_post
   （可在循环）目前显示的帖子索引。

   可用于您的目的，所以无需重新发明轮子。