1

我正在一个 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——把这个放在这里是因为我在评论中超过了字符限制——我可能没有做对，但现在在萤​​火虫中查看代码时，没有分配 .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; ?>

非常感谢你的帮助。

4

1 回答 1

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 */
}
于 2012-09-21T16:56:27.650 回答