网格/行形式的 Wordpress 最新帖子

Question

我正在尝试让我的最新帖子 (index.php) 在水平/网格/行中显示。就像这里这样：http://videos.m-mcconaughey.net 带有缩略图/名称/视图/持续时间。

我的索引代码：

<?php get_header(); ?>
<div class="article">
   <h1>Last additions</h1>
   <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>      
   <table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
     <td width="130px" valign="top">
        <center><img src="<?php echo get_option('home'); ?>/media/<?php $key="file_name"; echo get_post_meta($post->ID, $key, true); ?>.jpg" class="pictures" alt="" /></center>
     </td>
     <td valign="top">
        <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(''); ?></a></p>
        <?php the_excerpt(); ?>
        <p><strong>User:</strong> <?php the_author() ?> | <strong>Added:</strong> <?php the_time('d M Y'); ?> | <strong>Views:</strong> <?php $key="pvc_views"; echo get_post_meta($post->ID, $key, true); ?> | <strong>Duration:</strong> <?php $key="duration"; echo get_post_meta($post->ID, $key, true); ?><br/><strong>Category:</strong> <?php the_category(', '); ?><br/><strong>Tags:</strong> <?php the_tags(__(' ', ' ') . ' ', ', ', ' '); ?></p>
     </td>
  </tr>
   </table>
   <hr/>
   <?php endwhile; ?>
   <br /><br />
   <center>
  <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } 
     else { ?>
  <div class="right"><?php next_posts_link('Next &raquo;') ?></div>
  <div class="left"><?php previous_posts_link('&laquo; Previous') ?></div>
  <?php } ?>
   </center>
</div>
<br /><br />
<?php else : ?>
<h1>Not found</h1>
What you're looking for doesn't exist.
<?php endif; ?>
<?php get_footer(); ?>

Answer 1

尝试使用此代码。我只是用div替换table

<?php get_header(); ?>
<div class="article">
   <h1>Last additions</h1>
   <?php if (have_posts()) : ?>
   <div class="container">
   <?php while (have_posts()) : the_post(); ?>      

  <div class="posts">
     <div class="img">
        <center><img src="<?php echo get_option('home'); ?>/media/<?php $key="file_name"; echo get_post_meta($post->ID, $key, true); ?>.jpg" class="pictures" alt="" /></center>
     </div>
     <div class="text">
        <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(''); ?></a></p>
        <?php the_excerpt(); ?>
        <p><strong>User:</strong> <?php the_author() ?> | <strong>Added:</strong> <?php the_time('d M Y'); ?> | <strong>Views:</strong> <?php $key="pvc_views"; echo get_post_meta($post->ID, $key, true); ?> | <strong>Duration:</strong> <?php $key="duration"; echo get_post_meta($post->ID, $key, true); ?><br/><strong>Category:</strong> <?php the_category(', '); ?><br/><strong>Tags:</strong> <?php the_tags(__(' ', ' ') . ' ', ', ', ' '); ?></p>
     </div>
  </div>
   <?php endwhile; ?>
    </div>

   <center>
  <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } 
     else { ?>
  <div class="right"><?php next_posts_link('Next &raquo;') ?></div>
  <div class="left"><?php previous_posts_link('&laquo; Previous') ?></div>
  <?php } ?>
   </center>
</div>
<br /><br />
<?php else : ?>
<h1>Not found</h1>
What you're looking for doesn't exist.
<?php endif; ?>
<?php get_footer(); ?>

和css

    .container
    {
    width:100%;
    height:100% 
    }
    .posts {
  width: 29%;
  float: left;
  padding: 10px;
  background: #e2e2e2;
  margin: 4px;
}