コンテンツを表示するためのPHPループ

Question

私は自分のwordpressテンプレートを作成し始めました。最初のステップでは、HTMLでスケッチを作成しました。それはこのように見えます。私はそれについて考えていた

、黒い長方形は「ポストイメージ」である、と私は1行に4をしたいです。私はforループ、whileループ（私は推測する）で解決する必要があります。私の意見では、それは（20 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(); ?> 

しかし、私はポジショニングの問題を解決する必要がありますどのように問題を持っています。私はそれが1つのクラスの投稿になるはずだと思います。私はあなたに私のコードを与えます。助けてください。

私の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