Question

我正在尝试显示我的帖子。

A B

C D

E F

ħ

我

到目前为止，我有以下内容：

<div id="left-column">
    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
    <div class="post-row">
        <?php 
        if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
        the_post_thumbnail(array(170, 80));
        }
        ?>
        <div class="post-title"><a href="<?php the_permalink();?>"><?php the_title();?></a></div><!--post-title-->
        <div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
    </div><!--post-row-->   


<?php endif; endwhile; else: ?>
<?php endif; ?>
</div><!--left-column-->

<div id="right-column">
    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
    <div class="post-row">
        <?php 
        if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
        the_post_thumbnail(array(170, 80));
        }
        ?>
        <div class="post-title"><a href="<?php the_permalink();?>"><?php the_title();?></a></div><!--post-title-->
        <div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
    </div><!--post-row-->   
<?php endif; endwhile; else: ?>
<?php endif; ?>
</div><!--right-column-->
<div id="restofpage">
 NEED THE REST OF THE CODE.
 </div>

我知道如何将我的逻辑限制在6个帖子以及如何继续浏览页面的其余部分？

Answer 1

不要做两个while s - 保持只有一个。为每个帖子创建<article>或<div>，只需更改课程：例如前6个small，其余为wide ...

<div id="page">
    <?php 
        if (have_posts()) :

            $index = 0;

            while(have_posts()) : the_post(); 
    ?>

    <article class="post<?= $index < 5 ? ' small' : ' wide' ?>">
        <?php 
        if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
            the_post_thumbnail(array(170, 80));
        }
        ?>
        <div class="post-title"><a href="<?php the_permalink();?>"><?php the_title();?></a></div><!--post-title-->
        <div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
    </article><!-- post -->   

<?php 
           ++$index;
            endwhile; 

        endif; 
?>
</div><!--left-column-->

<div id="restofpage">
 NEED THE REST OF THE CODE.
</div>

然后你可以通过CSS完成剩下的工作：

#page {
    width: 420px;
    margin-right: -20px;
    font-size: 0;
}

.post {
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;

    font-size: 16px;
    margin-right: 20px;
    margin-bottom: 40px;
}

.post.small {
    width: 200px;
}

.post.wide {
    width: 420px;
}

Answer 2

对于第一个循环，您可以使用两个循环

query_posts(array(
    'showposts' => 6
));
while (have_posts()) : the_post();
    // your code here for 2 columns
endwhile;

上面的代码默认只加载前6个帖子，现在是第二个循环

wp_reset_query();
query_posts(array('paged'=>$paged, 'offset'=>7));
while (have_posts()) : the_post();
    // your code here for single column/rest of the post
endwhile;

此代码将加载从偏移量7开始的所有帖子。

如何在两列中显示前6个帖子，在单个列中显示其余帖子？ WordPress的

2 个答案: