Php цикл для отображения контента

Question

Я начал создавать свой собственный шаблон WordPress, на первом этапе я сделал набросок в HTML.Это похоже на это.

Я думал об этом, черный прямоугольник - это "Post Image", и я хочу 4 в одной строке.То, что я должен решить для цикла for, в то время как цикл (я думаю).На мой взгляд, это должно выглядеть так (это цикл из темы двадцать одиннадцать)

<?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

Как сказал мистер ТАМЕР, было бы лучше найти ответ в 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