如何使用wordpress在首頁的特殊磁貼中顯示3個最新帖子？

Question

我的首頁上方有這些磁貼元素：

        <div id="tile-holder" class="group">

        <div class="tile1">
            <div class="tile-textbox" style="color: #22284f;">Just Some Title</div>
        </div>
        <div class="tile2">
            <img class="post-image" src="images/sample-large-2.jpg"/>
            <div class="tile-datebox">
                <img src="images/video-icon.png" >
                <p>2013/2/25</p>
                <div class="tile-info"><h1><a href="index2.html">Title 1</a></h1></div>
            </div>
        </div>
        <div class="tile3">
            <img class="post-image" src="images/sample-mid-2.jpg"/>
            <div class="tile-datebox">
                <img src="images/image-icon.png" >
                <p>2013/5/15</p>
                <div class="tile-info"><h1>Title 2</h1></div>
            </div>
        </div>
        <div class="tile4">
            <img class="post-image" src="images/sample-mid-3.jpg"/>
            <div class="tile-datebox">
                <img src="images/text-icon.png" >
                <p>2013/6/17</p>
                <div class="tile-info"><h1>Title 3</h1></div>
            </div>
        </div>
        <div class="tile5">
            <div class="tile-textbox" style="color: #ffffff;">Another Title</div>
        </div>

    </div> <!-- END Tile Holder -->

我想在圖塊2、3和4中顯示3個最新帖子； 只是標題，日期和圖像，這些圖像從我定義的自定義字段中獲取網址，因此我嘗試使用：

.
.
.
<?php query_posts("post_per_page=3"); the_post(); ?>
            <div class="tile2">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
        </div>
        <div class="tile3">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
        </div>
        <div class="tile4">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
        </div>
<?php wp_reset_query(); ?> 
.
.
.

但是它只有一個帖子並在那里顯示，這是怎么回事？ 我錯過了什么？ 請幫助，我是wordpress領域的新手！

Answer 1

這是一種方法。 如果您是新手，則應閱讀以下重要主題： Loop和WP_Query 。

<?php 

$query = new WP_Query( 'posts_per_page=3' );

// The Loop
if ( $query->have_posts() ) {

    $i = 1;

    while ( $query->have_posts() ) {
        $query->the_post();

        $i++;
        ?>

        <div class="tile<?php echo $i ?>">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
        </div>
<?php


    }
} else {
    // no posts found
}

/* Restore original Post Data */
wp_reset_postdata();

Answer 2

<?php $args = array(
    'numberposts' => 3,
    'offset' => 0,
    'category' => 0,
    'orderby' => 'post_date',
    'order' => 'DESC',
    'include' => ,
    'exclude' => ,
    'meta_key' => ,
    'meta_value' =>,
    'post_type' => 'post',
    'post_status' => 'draft, publish, future, pending, private',
    'suppress_filters' => true );

    $recent_posts = wp_get_recent_posts( $args, ARRAY_A );


   //write loop here
?>