Wordpress帖子网格最后的帖子

Question

我如何创建像图像一样的网格？用于显示最后的帖子

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?> 
<?php endwhile; ?>  
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php $latest_post = get_posts( 'numberposts=4' );  ?>
<?php foreach( $latest_post as $post ) : setup_postdata( $post ); ?>
<?php the_title(); ?><br />
<?php the_content(); ?>
<?php endforeach; ?>
<?php wp_reset_query(); ?>

Answer 1

一种选择是使用PHP根据增量是奇数还是偶数来交换图像的位置，例如：

$i = 0;

while ( have_posts() ) : the_post();

    if ($i % 2 == 0 ) {
        // Display two columns with image on left
    }
    else {
        // Display two columns with image on right
    }

    $i++;

endwhile;

如果你是从头开始构建主题，我建议使用网格框架来处理你的列，否则看看你正在使用的主题是否已经有了一个网格框架。

编辑：

还有一些方法可以在不必更改页面标记的情况下执行此操作。例如：

Swapping columns (left / right) on alternate rows

在这种情况下，您可以在没有if语句的情况下生成帖子标记，只需使用CSS来交换图像/视频的位置。

Answer 2

您可以使用masonry技术，也可以尝试plugin

Answer 3

在上面的代码中，您启动了两个WordPress内容循环。我不知道为什么你必须发射两个循环，虽然它们都可以工作。首先将打印最近的帖子，具体取决于您从WordPress仪表板通过设置 - >阅读选项卡选择的每页帖子数，第二个将再次打印前4个帖子。我正在使用第一个循环来告诉您如何创建像网格一样的附加图像。

以下是您必须进行的PHP / HTML修改：

<?php $count = 1; if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>

    <div class="one-half <?php if( $count++ % 2 == 0 ): echo 'last-col'; endif; ?>">

        <?php 
            // the function below will print the featured image attached to the post
            the_post_thumbnail( 'your-featured-image-sizename' ); ?>

    </div>
    <!-- one-half -->
    <div class="one-half">

        <span class="post_stamp"><?php the_time( 'j m Y' ); ?></span>
        <span class="post_cat"><?php the_category(', '); // This will print News if you filled the post under News Category ?></span>
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <?php the_excerpt(); // Insteading of printing the whole content this function will print exceprt only ?>

    </div>
    <!-- one-half -->
    <div class="clearfix"><!-- --></div>

<?php endwhile; ?>  
<?php endif; ?>
<?php wp_reset_query(); ?>

您必须将以下指定的链接放到您的样式文件中：

<style>

    .one-half{width: 50%; float: left;}
    .last-col{float: right;}
    .clearfix{clear: both; overflow: hidden;}

</style>

完成上述更改后，您的帖子将显示为附加图片。祝你好运（y）