用于显示内容的PHP循环

Question

我已经开始啃我自己的wordpress模板，第一步我用HTML制作了草图。这是这样的。

我在想这件事，黑色矩形是“后的图像”，我想4一行。我应该用for循环来解决，while循环（我猜）。 在我看来，这应该是这样的（它的循环，从二11主题）

<?php 
get_header(); ?> 

     <div id="primary"> 
      <div id="content" role="main"> 

       <?php while (have_posts()) : the_post(); ?> 
        <?php for(i=0;i<8;i++)?> 
        {<?php get_template_part('content', 'page'); ?>} 
        <?php comments_template('', true); ?> 

       <?php endwhile; // end of the loop. ?> 

      </div> 
     </div> 
<?php get_footer(); ?> 

但我有问题，我应该如何与定位解决问题。我想这应该是一个职位的职位。下面我给你我的代码。请帮忙。

我的html代码：

<div class="postbar"> 
    <div class="post1"> 
     <a href="index.html"> 
     <div id="postOver"></div> 
     </a> 
     <div id="postText">text</div> 
    </div> 
    <div class="post2"> 
     <a href="index.html"> 
     <div id="postOver"></div> 
     </a> 
     <div id="postText">text</div> 
    </div> 
    <div class="post3"> 
     <a href="index.html"> 
     <div id="postOver"></div> 
     </a> 
     <div id="postText">text</div> 
    </div> 
    <div class="post4"> 
     <a href="index.html"> 
     <div id="postOver"></div> 
     </a> 
     <div id="postText">text</div> 
    </div> 
</div> 
<div class="postbar"> 
    <div class="post1"> 
     <a href="index.html"> 
     <div id="postOver"></div> 
     </a> 
     <div id="postText">text</div> 
    </div> 
    <div class="post2"> 
     <a href="index.html"> 
     <div id="postOver"></div> 
     </a> 
     <div id="postText">text</div> 
    </div> 
    <div class="post3"> 
     <a href="index.html"> 
     <div id="postOver"></div> 
     </a> 
     <div id="postText">text</div> 
    </div> 
    <div class="post4"> 
     <a href="index.html"> 
     <div id="postOver"></div> 
     </a> 
     <div id="postText">text</div> 
    </div> 
</div> 

我的CSS代码：

div.postbar{ 
     position:relative; left:255px; 
     height:222px; 
     } 
    div.post1 { 
     margin-top:17px; 
     position:relative; 
     margin-left:1%; 
     padding-left:3px; 
     padding-right:3px; 
     width:222px; 
     height:222px; 
     } 
    div.post2 { 
     position:absolute; top:-1px; left:260px; 
     margin-left:1%; 
     width:222px; 
     height:222px; 
     } 
    div.post3 { 
     position:relative; top:-222px; left:520px; 
     margin-left:1%; 
     padding-left:3px; 
     padding-right:3px; 
     width:222px; 
     height:222px; 
     } 
    div.post4 { 
     position:relative; top:-444px; left:780px; 
     margin-left:1%; 
     padding-left:3px; 
     padding-right:3px; 
     width:222px; 
     height:222px; 
     } 
    div.postNext { 

     position:absolute; left:250px; top:-1px; 
     margin-left:1%; 
     padding-left:3px; 
     padding-right:3px; 
     width:222px; 
     height:222px; 

     } 

    #postOver{ 
     width:222px; 
     height:222px; 
     background-image:url(img/arch.jpg); 
     box-shadow:0px 0px 3px #000000; 
     -webkit-transition:width 1s; 
     } 
    *:hover > #postOver{ 
     width: 0; 
    } 
    #postText{ 
     position:relative; top:-222px; 
     font-size:12px; 
     width:222px; 
     height:222px; 
     box-shadow:0px 0px 3px #000000; 
     color:black; 
     text-align:center; 
     z-index:-1; 
     } 

Answer 1

像Mr.TAMER说，将是更好的搜索在WordPress Exchange答案。

这里是代码，可能是你的问题可能的解决方案：

<style type="text/css"> 
    .post { float:left; display:block; width:222px; height:222px; margin: 0 3px; } 
    .post.first { margin-left:0px; } 
    .post.last { margin-right:0px; } 

    /* Clear fix from http://css-tricks.com/snippets/css/clear-fix/ */ 
    .clearfix:after { visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0; } 
    * html .clearfix { zoom: 1; } /* IE6 */ 
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */ 
</style> 

<?php 
    $args = array(//Query variables take a look at http://codex.wordpress.org/Class_Reference/WP_Query 

    ); 
    $query = new WP_Query($args); // Doing the Query 

    if($query->have_posts()) { // Checking if there is any posts with the arguments above 

     while($query->have_posts()) { // Looping throught the selected posts 
      $query->the_post(); // Selecting the next as the actual Post 
      ?> 
      <div class="post<?php echo ($current_post == 0 ? " first" : ($current_post == $post_count ? " last" : "")); ?>"> 
       <a href="index.html"> 
        <div id="postOver"></div> 
       </a> 
       <div id="postText">text</div> 
      </div> 
      <?php 
      if($current_post == $post_count) 
       echo "<div class=\"clearfix\"></div>"; 
     } 
    } else { // If there isn't any posts with the Arguments set above 


    } 
    wp_reset_postdata(); // Reseting the Post data so you can re-use the loop