如何让我的循环将帖子拉成三列

时间：2014-10-01 作者：drewrowalnd

我让我的页面模板拉一个特定的类别&；&拖动特色图像；在我的网站上标题为3个不同的列。问题是他们都拉CSS类。proj left如何获取我的页面以获取特色图像、标题和；是否使用应分配给它的特定列CSS类？

这是我的页面模板：

<?php

/*

Template Name: Projects

*/

?>



<?php get_header(); ?>



<div id="content">
    <div id="contentwide">
        <div class="postarea_wide">


        <?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 12 posts per page and eliminate all sticky posts) */
        query_posts( array ( \'category_name\' => \'decorating-home\', \'posts_per_page\' => 9 ) );


        if(have_posts()) :  while(have_posts()) :  the_post(); 
        ?>
        <?php
        //Show the left hand side column
        if($counter == 1) :
        ?>
                <div class="proj-left">
                                <div class="postimage">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(\'project-thumb\'); ?></a>
                                </div>
                                <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
                </div>
        <?php
        //Show the middle column
        elseif($counter == $grids) :
        ?>
                <div class="proj-middle">
                                <div class="postimage">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(\'project-thumb\'); ?></a>
                                </div>
                                <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
                </div>
        <?php
        //Show the right hand side column
        elseif($counter == $grids) :
        ?>
                <div class="proj-right">
                                <div class="postimage">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(\'project-thumb\'); ?></a>
                                </div>
                                <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
                </div>          

                <div class="clear"></div>
        <?php endif; ?>

        <?php
        endwhile;
        echo paginate_links( $args );
        endif;
        ?>



        </div>
    </div>
</div>



<!-- The main column ends  -->



<?php get_footer(); ?>

2 个回复

最合适的回答,由SO网友:Pieter Goosen 整理而成

首先，不要使用query_posts

Note: 此功能不适用于插件或主题。如后文所述，有更好、性能更好的选项来更改主查询。query\\u posts（）是一种过于简单且有问题的方法，通过将页面的主查询替换为新的查询实例来修改它。它效率低下（重新运行SQL查询），并且在某些情况下会彻底失败（尤其是在处理POST分页时）。

如果你不能使用pre_get_posts 要正确修改主查询，必须使用WP_Query 或get_posts 创建自定义查询的步骤

通过使用简单的CSS和使用内置循环计数器每隔三次清除一次浮点，您可以实现所需的功能$current_post

您可以将代码修改为以下内容

<?php
/*
Template Name: Projects
*/
?>

<?php get_header(); ?>

<div id="content">
    <div id="contentwide">
        <div class="postarea_wide">


        <?php
        /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
        $paged = ( get_query_var(\'paged\') ) ? get_query_var(\'paged\') : 1;
        $query = new WP_Query( array ( \'category_name\' => \'decorating-home\', \'posts_per_page\' => 9, \'paged\' => $paged ) );


        if($query->have_posts()) :  while($query->have_posts()) :  $query->the_post(); 
        ?>
            <div class="proj">
                            <div class="postimage">
                                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(\'project-thumb\'); ?></a>
                            </div>
                            <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
            </div>
        <?php       
            if(($query->current_post+1)%3 == 0){ 
                echo \'<div class="clear" style="clear:left"></div>\';
            }
        ?>

        <?php
        endwhile;
        echo paginate_links( $args );
        endif;
        ?>



        </div>
    </div>
</div>

<!-- The main column ends  -->

<?php get_footer(); ?>

您的CSS可以如下所示

.proj {
   width: 33,3%;
   float: left:
}

EDIT

您的分页链接就快到了。

有关参考，请参见

将分页链接代码更改为以下内容

<div id="pagenav">
    <div class="prev"><p><?php previous_posts_link( \'Newer Entries\' ); ?></p></div>
    <div class="next"><p><?php next_posts_link( \'Older Entries\', $query->max_num_pages ); ?></p></div>
</div>

SO网友:Howdy_McGee

你可以用几种方法来实现这一点，下面我列出了两种方法。

Method 1: Modulus

这样做的目的是让你得到$counter 除以$grids. 在我们的例子中，左侧将始终被计算为：1、4、7、10等，因此$grid （为3）将始终为1。我们的最后一列将始终等于0。在底层，我们必须增加$counter

if(have_posts()) :  while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side column
if($counter % $grids = 1) :
?>
    <div class="proj-left">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(\'project-thumb\'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>
<?php
//Show the middle column
elseif($counter % $grids = 2) :
?>
    <div class="proj-middle">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(\'project-thumb\'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>
<?php
//Show the right hand side column
elseif($counter % $grids = 0) :
?>
    <div class="proj-right">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(\'project-thumb\'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>          

    <div class="clear"></div>
<?php endif; ?>

<?php $counter++;
endwhile;

Method 2: Counter Reset

有些人不喜欢模数，所以在第二种方法中，我们可以在每次达到3时重置计数器。在这一点上，我们可以测试$counter 变量等于1、2或3。

if(have_posts()) :  while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
    <div class="proj-left">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(\'project-thumb\'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>
<?php
//Show the middle column
elseif($counter == 2) :
?>
    <div class="proj-middle">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(\'project-thumb\'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>
<?php
//Show the right hand side column
elseif($counter == 3) :
?>
    <div class="proj-right">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(\'project-thumb\'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>          

    <div class="clear"></div>
<?php endif; ?>

<?php $counter = ($counter == 3) ? 1 : ($counter + 1);
endwhile;

在循环的底部，我们要么增加$计数器，要么将其重置为1。

结束

小码农CODE

如何让我的循环将帖子拉成三列

相关推荐

将jQuery传递到WordPress媒体上载程序