2016-11-17 228 views
0

我怎样才能创建一个网格像图片?对于节目的最后一个职位WordPress的帖子最后的帖子

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

enter image description here

回答

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来交换图像/视频的位置。

0

在你上面的代码,你开了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)