Question

假设我有两种风格。风格1和风格2 我想在样式1中显示每个奇数的帖子，在样式2中显示偶数帖子

以下是我的模板文件：

<?php /* Template Name: Home v2 */ get_header(); ?>
<main role="main">
    <!-- section -->
    <section>
        <?php 
        $temp = $wp_query; $wp_query= null;
        $wp_query = new WP_Query(); $wp_query->query('showposts=' . $theme_options['blog-post-per-page'] . '&paged='.$paged);
        while ($wp_query->have_posts()) : $wp_query->the_post(); ?> 

        <div class="tiles-block w-clearfix">
            <div class="float-left">
                <div class="content-block w-clearfix">
                    <h5 class="black travel"><?php echo the_category();?></h5>
                    <h1 class="black mastheading"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
                    <div class="date-block w-container">
                        <div class="black mini-date"> <?php echo get_the_date(); ?></div>
                        <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
                        <div class="black mini-date">32</div>
                        <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
                        <div class="black mini-date">14</div>
                    </div>
                    <div class="black iltalica"><?php the_excerpt(); ?></div>
                    <a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a>
                </div>
            </div>
            <div class="float-left natural-forest">
                <div class="thumb">
                    <?php the_post_thumbnail('full'); ?>
                </div>
            </div>
            <img class="right-arrow" src="<?php echo get_template_directory_uri() . '/images/right-arrow.png' ?>" />
        </div>

        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>

上面的代码效果很好。但它只给出了风格1。我已经为样式2设置了html，但不知道如何在上面的代码中实现。

这是我的style2块

<div class="tiles-block w-clearfix">
                <div class="float-right">
                    <div class="content-block w-clearfix">
                        <h5 class="black photography">PHOTOGRAPHY</h5>
                        <h1 class="black mastheading">title test</h1>
                        <div class="date-block w-container">
                            <div class="black mini-date">October 26, 2016</div>
                            <img class="mini-icon" src="http://aa.com/aa.png">
                            <div class="black mini-date">15</div>
                            <img class="mini-icon" src="http://bb.com/bb.png">
                            <div class="black mini-date">13</div>
                        </div>
                        <div class="black iltalica">Lorem Ipsuim dolor....</div>
                        <a class="a8 cta w-button" href="#">continue reading</a></div>
                    </div>
                <div class="float-left window-light">
                    <div class="thumb">
                        <img src="<?php echo get_template_directory_uri() . '/images/post2.png' ?>" />
                    </div>
                </div>
                <img class="left-arrow" src="http://cc.com/cc.png">
            </div>

Answer 1

这会让PHP变得有点乱，因为你需要几个if语句。您可能会考虑将一些内部div命名为相同，并且只使外部div具有不同的名称，并在CSS中执行更多工作。那就是说，你可以这样做：

设置一个标志，每次循环都会更改，并在输出HTML之前检查标志的值。

$style_flag = 1;
while ($wp_query->have_posts()) : $wp_query->the_post();
   //check the value
   if ($style_flag == 1){
       // output style 1
   } else {
      // output style 2
   }
   // do everything else you need to do in the loop

   // switch the value of the flag
   $style_flag = $style_flag * -1;
end while;

回到CSS片刻。如果你已经不熟悉它，请查看第n个孩子选择器：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 2

我找到了解决问题的方法。

<?php query_posts('showposts=0'); ?>        
            <?php 

            $i = 1;
            ?>
            <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
            <?php if(($i % 2) == 0) { ?>
            <div class="tiles-block w-clearfix">
                <div class="float-right">
                    <div class="content-block w-clearfix">
                        <h5 class="black photography"><?php echo the_category();?></h5>
                        <h1 class="black mastheading"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
                        <div class="date-block w-container">
                            <div class="black mini-date"><?php echo get_the_date(); ?></div>
                            <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
                            <div class="black mini-date">32</div>
                            <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
                            <div class="black mini-date">14</div>
                        </div>
                        <div class="black iltalica"><?php the_excerpt(); ?></div>
                        <a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a></div>
                    </div>
                <div class="float-left window-light">
                    <div class="thumb">
                        <?php the_post_thumbnail('full'); ?>
                    </div>
                </div>
                <img class="left-arrow" src="<?php echo get_template_directory_uri() . '/images/left-arrow.png' ?>">
            </div>
            <?php } elseif (($i % 2) !== 0) { ?>

            <div class="tiles-block w-clearfix">
                <div class="float-left">
                    <div class="content-block w-clearfix">
                        <h5 class="black travel"><?php echo the_category();?></h5>
                        <h1 class="black mastheading"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
                        <div class="date-block w-container">
                            <div class="black mini-date"><?php echo get_the_date(); ?></div>
                            <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
                            <div class="black mini-date">32</div>
                            <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
                            <div class="black mini-date">14</div>
                        </div>
                        <div class="black iltalica"><?php the_excerpt(); ?></div>
                        <a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a>
                    </div>
                </div>
                <div class="float-left natural-forest">
                    <div class="thumb">
                        <?php the_post_thumbnail('full'); ?>
                    </div>
                </div>
                <img class="right-arrow" src="<?php echo get_template_directory_uri() . '/images/right-arrow.png' ?>" />
            </div>


            <?php } ?>
                <?php $i++; ?>
                <?php endwhile; ?>
            <?php endif; ?>

WordPress中不同div块中的每隔一个帖子

2 个答案: