Question

我正在使用wordpress网站，我需要一个类别中的每个其他帖子都有不同的布局。

意思是，第一篇文章左边是图片，右边是文字。下一篇文章左侧有文字，右侧是图片。下一篇文章（第3篇文章）将返回左侧的图像，右侧的文本，依此类推。

忽略编码，因为它只是一个快速编码，但这里有一个视觉上显示我想要的效果的jfiddle。 http://jsfiddle.net/U4amd/

我已经想出了如何以一种方式布置“偶数”帖子和以不同方式布置“奇怪”帖子，但是使用两个循环来完成它。这不会起作用，因为然后显示所有偶数帖子，然后显示所有奇数。这是我目前的代码：

`

        <?php while(have_posts()) : ?>
        <?php
            $postcount++;
            if( ($postcount % 2) == 0 ) : // skip 'even' posts
                $wp_query->next_post();
            else :
        ?>
        <?php the_post(); ?>

    <div class="product clearfix color-box">

        <div class="vendor pRight fleft">
            <?php $color = get_post_meta($post->ID, 'color', true) ?>
            <div class="color-box-expand pad-inside" style="background-color:<?php echo $color; ?>">
                <?php the_post_thumbnail('bones-thumb-vb'); ?>
            </div>
        </div>
        <div class="vendor-images fleft">
            <?php $slide01 = get_post_meta($post->ID, 'slide01', true) ?>
            <img src="<?php echo $slide01 ?>">  
            <?php the_content() ?>
        </div>

    </div>

    <?php endif; ?>
    <?php endwhile; ?>

    <?php $postcount = 0; rewind_posts(); ?>

        <?php while(have_posts()) : ?>
        <?php
            $postcount++;
            if( ($postcount % 2) != 0 ) : // skip 'odd' posts
                $wp_query->next_post();
            else :
            ?>
        <?php the_post(); ?>

    <div class="product clearfix color-box">

        <div class="vendor-images fleft">
            <?php $slide01 = get_post_meta($post->ID, 'slide01', true) ?>
            <img src="<?php echo $slide01 ?>">  
            <?php the_content() ?>
        </div>

        <div class="vendor pLeft fleft">
            <?php $color = get_post_meta($post->ID, 'color', true) ?>
            <div class="color-box-expand pad-inside" style="background-color:<?php echo $color; ?>">
                <?php the_post_thumbnail('bones-thumb-vb'); ?>
            </div>
        </div>

        <?php endif; ?>
        <?php endwhile; ?>
    </div>
</div>`

任何帮助都会非常感激。我是php / Wordpress的新手，所以仍然把所有东西搞清楚。如果我需要澄清任何事情，请告诉我。谢谢！

@Crowjonah - 把它放在这里因为我在评论中超过了角色限制 - 我可能没有做正确的事情，但现在在查看firebug中的代码时，没有分配.even类。以下是我的代码。

<?php $postcount=0;
            while(have_posts()) :        
                $postcount++;
                if( ($postcount % 2) == 0 ) $post_class = ' even';
                else $post_class = ' odd'; ?>
                <div class="product clearfix color-box">                    
                    <div class="vendor pRight <?php echo $post_class; ?>">
                        <?php the_post(); ?>
                        <?php $color = get_post_meta($post->ID, 'color', true) ?>
                        <div class="color-box-expand pad-inside" style="background-color:<?php echo $color; ?>">
                            <?php the_post_thumbnail('bones-thumb-vb'); ?>
                        </div>
                    </div>
                    <div class="vendor-images post <?php echo $post_class; ?>">
                        <?php $slide01 = get_post_meta($post->ID, 'slide01', true) ?>
                        <img src="<?php echo $slide01 ?>">  
                        <?php the_content() ?>
                    </div>
                </div>

        <?php $postcount++;
            endwhile; ?>

非常感谢你的帮助。

Answer 1

您可以在两个循环中使用相同的递增和检测，但将其合并到一个循环中，为您的帖子包装器分配相应的even或odd类：

<?php 
    $postcount=1;
    while(have_posts()) :        
        if( ($postcount % 2) == 0 ) $post_class = ' even';
        else $post_class = ' odd'; ?>
        <div class="post <?php echo $post_class; ?>">            
            <?php the_post(); ?>
        </div>
<?php 
        $postcount++;
    endwhile; 
?>

使用CSS，您可以分配

div.post.even img {
   float: left; /* etc etc */
}
div.post.odd img {
   float: right; /* etc etc */
}

在wordpress中的类别中的每个其他帖子的不同布局

1 个答案: