在网格布局中显示特定类别的帖子的更好方式

时间:2015-03-16 作者:Paul Dixon

我使用以下代码在我的主页上以网格布局显示特定类别的帖子。它的工作方式正是我想要的,但我一直在读,我不应该使用query\\u帖子。如何在不使用query\\u帖子的情况下获得相同的结果?

此外,我最终需要在主页上显示来自十个不同类别的帖子——使用完全相同的网格布局。如果我为每个类别复制了下面的所有代码,会不会导致问题,或者有没有更有效的方法来做到这一点?

如果您有任何建议,我们将不胜感激,因为您可能会从我的代码和问题中了解到,我对WordPress开发还比较陌生:)

<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 3 posts per page and eliminate all sticky posts) */
query_posts( array(\'posts_per_page\'=>3, \'category_name\'=>\'Mobile\') );

if(have_posts()) :  while(have_posts()) :  the_post(); 
?>

<?php
//Show the left hand side column
if($counter == 1 || $counter == 2) :
?>
            <div class="col-cat3">
                <div class="entry-featured"><?php x_featured_image(); ?></div>
                <div class="col-cat-pic"><?php echo get_avatar( get_the_author_meta(\'ID\'), 40); ?></div>
                <div class="hero-info">
                <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                <p class="p-meta"><?php the_author_posts_link(); ?>  /  <?php the_time(\'m.d.y\'); ?></p>
                </div>
            </div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
             <div class="col-cat3-last">
                <div class="entry-featured"><?php x_featured_image(); ?></div>
                <div class="col-cat-pic"><?php echo get_avatar( get_the_author_meta(\'ID\'), 40); ?></div>
                <div class="hero-info">
                <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                <p class="p-meta"><?php the_author_posts_link(); ?>  /  <?php the_time(\'m.d.y\'); ?></p>
                </div>
            </div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>

1 个回复
最合适的回答,由SO网友:Sean Grant 整理而成

我认为一般的建议是WP_Query 而不是query_posts 部分原因是query\\u posts以一种简化的方式使用WP\\u query,这可能会导致问题。所以可以肯定check out the WP_Query page, specifically the Multiple Loops example: http://codex.wordpress.org/Class_Reference/WP_Query#Multiple_Loops

所以代码使用WP_Query 看起来像这样:

<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 3 posts per page and eliminate all sticky posts) */
$query1 = new WP_Query( array(\'posts_per_page\'=>3, \'category_name\'=>\'Mobile\') );

if( $query1->have_posts()) :  while( $query1->have_posts()) : $query1->the_post(); 

    if( $counter == $grids ) : 
        $counter = 0; // Reset counter ?>
        <div class="col-cat3-last">
    <?php else: ?>
        <div class="col-cat3">
    <?php endif; ?>

        <div class="entry-featured"><?php x_featured_image(); ?></div>
        <div class="col-cat-pic"><?php echo get_avatar( get_the_author_meta(\'ID\'), 40); ?></div>
            <div class="hero-info">
                <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                <p class="p-meta"><?php the_author_posts_link(); ?>  /  <?php the_time(\'m.d.y\'); ?></p>
            </div>
        </div>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
wp_reset_postdata(); // Reset post_data after each loop
?>
注意同样的$args 可用于WP\\U查询。另请注意添加了$query1-> 循环设置中。复制粘贴此代码时,只需将$query1更改为$query2,并且很可能会更改查询参数中的category\\u名称以匹配您的类别。

我还清理了一些重复代码,因为看起来唯一的区别是在包装div类中添加了“-last”。因此,您可以使用它来代替将来需要更新的额外代码。

我还补充道wp_reset_postdata(); 最后,必须安全地清除/重置post数据。

如果您有任何问题或担忧,请告诉我。

结束

相关推荐

Iterate through ID's in loop

我已经基于category创建了一个自定义循环,现在我想运行一个函数,将当前帖子的特定ID作为参数进行迭代。我有。。$secondary_loop = new WP_Query(array( \'category_name\' => get_the_title(), \'posts_per_page\' => 5 )); while ( $secondary_loop->have_posts() ) : $secondary_loop->the_post();&#x