Question

这是我需要使用的网格标记（用于显示5个突出显示的帖子）：

<div id="top-stories" class="row">

  <div class="col-md-5">
    <article><!-- first article content --></article>
  </div>

  <div class="col-md-7">
    <div class="row">

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) article content --></article>
      </div>

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) content --></article>
      </div>

      <div class="clearfix visible-sm visible-md visible-lg"></div>

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) content --></article>
      </div>

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) content --></article>
      </div>

    </div>
  </div>

</div>

如您所见，每个帖子周围的标记是不同的;这意味着我需要使用if / elseif / else逻辑来动态显示此标记中的帖子。

这就是我现在正在做的事情（请注意帖子在循环中）：

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); $current_post_count = post_count(); ?>
    <div id="top-stories" class="row">
      <?php if( 0 == $current_post_count ) { ?>

        <div class="col-md-5">
          <article><?php echo $first_article_content; ?></article>
        </div>

      <?php } elseif( 1 == $current_post_count ) { ?>
        <div class="col-md-7">
          <div class="row">

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

      <?php } elseif( 2 == $current_post_count ) { ?>

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

            <div class="clearfix visible-sm visible-md visible-lg"></div>
      <?php } elseif( 3 == $current_post_count ) { ?>

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

      <?php } elseif( 4 == $current_post_count ) { ?>

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

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

问题是，代码不是很精确。到目前为止，我无法弄清楚一个更好的逻辑。如何重写动态代码以使其更加优化和精确？

Answer 1

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); $current_post_count = post_count(); ?>
    <div id="top-stories" class="row">
      <?php switch($current_post_count ): 
      case 0: ?>
        <div class="col-md-5">
          <article><?php echo $first_article_content; ?></article>
        </div>
      <?php break;?>
      <?php case 1: ?>
        <div class="col-md-7">
          <div class="row">
            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>
      <?php break;?>
      <?php case 2: ?>
            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>
            <div class="clearfix visible-sm visible-md visible-lg"></div>
      <?php break;?>
      <?php case 3: ?>
      <?php case 4: ?>
            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>
      <?php break;?>
      <?php endswitch;?>
          </div>
        </div>
    </div>
  <?php endwhile; ?>
<?php endif; ?>

Answer 2

我认为这结合了2,3,4最佳的常见部分：

<?php switch ($current_post_count) {
case 0: ?>
<div class="col-md-5">
    <article><?php echo $first_article_content; ?></article>
</div>

<?php break;
case 1: ?>
<div class="col-md-7">
    <div class="row">

    <div class="col-sm-6 col-md-6">
    <article><?php echo $article_content; ?></article>
</div>

<?php break;
default: ?>
<div class="col-sm-6 col-md-6">
    <article><?php echo $article_content; ?></article>
</div>
<?php switch ($current_post_count) {
    case 2: ?>
    <div class="clearfix visible-sm visible-md visible-lg"></div>
        <?php break;
    case 4: ?>
        </div>
        </div>
        <?php
        }
} ?>

一个更简单的if / elseif / else逻辑？

2 个答案: