WordPress 中不同 div 块中的每一秒帖子答案

【问题标题】：Every second post in different div block in WordPressWordPress 中不同 div 块中的每一秒帖子
【发布时间】：2017-04-10 19:02:47
【问题描述】：

假设我有 2 种样式。样式 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>

【问题讨论】：

标签： php html wordpress wordpress-theming custom-wordpress-pages

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这在 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

【讨论】：