1

私は、カテゴリ内の他のすべての投稿を異なるレイアウトにする必要があるワードプレス サイトに取り組んでいます。

つまり、最初の投稿の左側に画像、右側にテキストが表示されます。次の投稿では、左側にテキスト、右側に画像が表示されます。次の投稿（3回目の投稿）は左の画像、右のテキスト…に戻ります。

コーディングは簡単なものだったので無視しますが、ここでは、必要な効果を視覚的に示す jfiddle を示します。http://jsfiddle.net/U4amd/

「偶数」の投稿を 1 つの方法でレイアウトし、「奇数」の投稿を別の方法でレイアウトする方法を見つけましたが、2 つのループを使用してそれを達成しました。ただし、すべての偶数の投稿が表示され、その後にすべての奇数が表示されるため、これは機能しません。ここに私が現在持っているコードがあります:

`

        <?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; ?>

助けてくれてどうもありがとう。

4

1 に答える 1

1

even2 つのループで同じインクリメントと検出を使用できますが、対応するoroddクラスをポスト ラッパーに割り当てる 1 つのループに統合します。

<?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 に答える