在wordpress中显示带有砌体缩略图的最近帖子

时间:2013-12-29 12:07:01

标签: php wordpress jquery-masonry

我正在研究wordpress cms。在页面模板上,我需要显示最近的10个帖子。所以我尝试使用wp_get_recent_postsfound here in the codex,我认为它是适合此目的的钩子。其余的代码来自我的archive.php(它显示了{的缩略图后缩写{3}}网格在archive.php中就好了。我只想用最近的帖子 - 缩略图在这个页面模板上实现同样的事情。目前,我在模板上有这个代码。

<div id="masonry">

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="item normal" data-order='1'><!--BEGIN .item -->
                <div <?php post_class(); ?> id="featured-<?php the_ID(); ?>">

                    <?php
                    $args = array('numberposts' => '10', 'meta_key' => '_thumbnail_id');
                    $recent_posts = wp_get_recent_posts($args);
                    foreach ($recent_posts as $recent) {
                        if (has_post_thumbnail($recent["ID"])) {
                            echo '<a href="' . get_permalink($recent["ID"]) . '">';
                            echo get_the_post_thumbnail($recent["ID"], 'archive_grid');
                            echo '</a>';
                        }
                    }
                    ?>

                </div>
            </div>

        <?php endwhile;
    endif; ?>
<?php get_template_part('includes/index-loadmore'); ?>

</div><!--END #masonry -->

<div id="masonry-new"></div>

<div class="post-navigation clearfix"><!--BEGIN .post-navigation -->
<?php dt_pagination(); ?>
</div><!--END .post-navigation -->

ISSUE :此代码只返回最近发布的帖子中的一个缩略图。我不知道循环有什么问题。另一个奇怪的事情是当我var_dump $recent_posts它返回帖子的其他文本内容时就好了。如果你需要知道这一点,我的设置为setting->reading->Blog pages show at most->20 posts

2 个答案:

答案 0 :(得分:0)

首先,如果我理解你想做什么,你不需要有两个循环。另外'meta_key' => '_thumbnail_id'也没有必要。我想只是缩略图ID,而不是你创建的元键。

你可以实现你想要的那样:

<div id="masonry">
<?php
$args = array(
    'posts_per_page'   => 10,
    'orderby'          => 'post_date',
    'order'            => 'DESC',
    'post_type'        => 'post',
    'post_status'      => 'publish',
    'suppress_filters' => false );

    $recent_posts = get_posts( $args );
    foreach ($recent_posts as $key=>$post): setup_postdata( $post ); {
    ?>
                <div class="item normal" data-order='1'><!--BEGIN .item -->
                    <div <?php post_class(); ?> id="featured-<?php the_ID(); ?>">

                        <?php


                            if (has_post_thumbnail(get_the_ID())) {
                                echo '<a href="' . get_permalink(get_the_ID()) . '">';
                                echo get_the_post_thumbnail(get_the_ID(), 'archive_grid');
                                echo '</a>';
                            }
                        ?>

                    </div>
                </div>
    <?php } ?> //end of foreach loop
    <?php get_template_part('includes/index-loadmore'); ?>

    </div><!--END #masonry -->

    <div id="masonry-new"></div>

    <div class="post-navigation clearfix"><!--BEGIN .post-navigation -->
    <?php dt_pagination(); ?>
    </div><!--END .post-navigation -->

但是这样你必须自己修复分页。

<强>更新

似乎get_posts不适用于分页。

<div id="masonry">
<?php

    $paged = 1;
    if ( get_query_var('paged') ) $paged = get_query_var('paged');
    if ( get_query_var('page') ) $paged = get_query_var('page');

$args = array(
    'posts_per_page'   => 10,
    'paged'        =>  $paged,
    'orderby'          => 'post_date',
    'order'            => 'DESC',
    'post_type'        => 'post',
    'post_status'      => 'publish',
    'suppress_filters' => false );

    $wp_query = new WP_Query( $args );  

    while ( $wp_query->have_posts() ) : $wp_query->the_post();
    ?>
                <div class="item normal" data-order='1'><!--BEGIN .item -->
                    <div <?php post_class(); ?> id="featured-<?php the_ID(); ?>">

                        <?php


                            if (has_post_thumbnail(get_the_ID())) {
                                echo '<a href="' . get_permalink(get_the_ID()) . '">';
                                echo get_the_post_thumbnail(get_the_ID(), 'archive_grid');
                                echo '</a>';
                            }
                        ?>

                    </div>
                </div>
    <?php  endwhile; ?> //end while loop
    <?php get_template_part('includes/index-loadmore'); ?>

    </div><!--END #masonry -->

    <div id="masonry-new"></div>

    <div class="post-navigation clearfix"><!--BEGIN .post-navigation -->
    <?php dt_pagination(); ?>
    </div><!--END .post-navigation -->
    <?php wp_reset_postdata(); ?>

如果第二个解决方案不起作用,你必须提供dt_pagination()函数来查看它是如何工作的。

希望它有所帮助。

答案 1 :(得分:0)

首先,你不需要两个循环。尝试新的wp查询而不是wp_get_recent_posts。这是一个例子。

  <div id="masonry">
      <?php $args = array('post_type' => 'post','posts_per_page' => '10' ); 
      $loop = new WP_Query($args); if( $loop->have_posts() ):
      while( $loop->have_posts() ): $loop->the_post(); global $post;  ?>

      <div class="item normal" data-order='1'><!--BEGIN .item -->
                <div <?php post_class(); ?> id="featured-<?php the_ID(); ?>">

                    <?php


                        if (has_post_thumbnail(get_the_ID())) {
                            echo '<a href="' . get_permalink(get_the_ID()) . '">';
                            echo get_the_post_thumbnail(get_the_ID(), 'archive_grid');
                            echo '</a>';
                        }
                    ?>

                </div>
            </div>

        <?php endwhile; endif; wp_reset_Query(); ?>

    <?php get_template_part('includes/index-loadmore'); ?>


  </div><!--END #masonry -->