Question

我有一个动态输出的HTML结构。

我在循环中使用了一个计数器来检查第一篇文章，并在第一篇文章中应用了课程headline-big和m-grid-item。然后我将第二课headline-scroll用于后续帖子。

问题是，第2，第3和第4个帖子没有嵌套在headline-scroll内，他们每个人都有自己的div.headline-scroll这会弄乱网站。

我需要将第2，第3和第4个帖子嵌套在单个div.headline-scroll中，而不是将每个帖子嵌套在单独的帖子中。

这是结构的HTML

<!-- / 1ST POST -->
<div class="headline-big">
  <div class="m-grid-item">
    ...
  </div>
</div>
<!-- / END OF FIRST POST -->

<!-- / 2ND, 3RD AND 4TH POST - ALL NESTED INSIDE div.headline-scroll -->
<div class="headline-scroll">
  <!-- / 2ND POST -->
  <div class="m-grid-item -medium">
    ...
  </div>
  <!-- / END OF 2ND POST -->

  <!-- / 3RD POST -->
  <div class="m-grid-item -small">
    ...
  </div>
  <!-- / END OF 3RD POST -->

  <!-- / 4TH POST -->
  <div class="m-grid-item -small">
    ...
  </div>
  <!-- / END OF 4TH POST -->

</div>

这是PHP

if ( $featured->have_posts() ) {
$i = 0;
    while ( $featured->have_posts() ) {
        $featured->the_post();
        if ( $i == 0 ) :
?>
<div class="headline-big">
  <div class="m-grid-item">
    <?php endif; ?>
    <?php if ( $i != 0 ) : ?>
    <div class="headline-scroll">
      <div class="m-grid-item -medium">
        <?php endif; ?>
        <?php the_title(); ?>
      </div>
    </div>
    <?php $i++;
    }
} else {
    echo 'Add some posts';
}

Answer 1

我不确定我是否能够很好地回答你的问题。但这就是我的理解。如果有问题，请告诉我，我会修改。

if ( $featured->have_posts() ) {
  $i = 1;
  while ( $featured->have_posts() ) 
  {
      $featured->the_post();
      if( $i == 1) 
      {
        ?>
        <div class="headline-big">
          <div class="m-grid-item">
             <?php the_title(); ?>
          </div>
        </div>
        <div class="headline-scroll">
        <?php
      }
      else
      {
        $small = array(3,4); //list of small classes
        $class = ( in_array($i, $small)) ? '-small' : '-medium'; 
        <div class="m-grid-item <?php echo $class; ?>">
             <?php the_title(); ?>
        </div>
        <?php
      } 
      $i++;
   }
   echo '</div><!-- end of headline-scroll -->';
} else {
   echo 'Add some posts';
}

Answer 2

我已经用if条件将其简化了。

如果它是第一篇文章，请创建标题 - 大div。

如果是第二篇文章，请创建标题滚动div和中级div。

对于所有后续帖子，只需使用小div。最后，在while循环之外，如果我们有超过1个帖子，我们需要添加一个结束div来关闭标题滚动。

if ( $featured->have_posts() ) {
  $i = 0;
  while ( $featured->have_posts() ) 
  {
      $featured->the_post();
      if( $i == 0) 
      {
        ?>
        <div class="headline-big">
          <div class="m-grid-item">
             <?php the_title(); ?>
          </div>
        </div>            
        <?php
      }
      else if($i == 1)
      {
        ?>
        <div class="headline-scroll">
        <div class="m-grid-item -medium">
             <?php the_title(); ?>
        </div>          
        <?php
      } 
      else
      {
        <div class="m-grid-item -small">
             <?php the_title(); ?>
        </div>     
      }
      $i++;
   }
   if($i > 1){
   ?>
   </div><!-- end of headline-scroll -->
   <?php
   }
} else {
   echo 'Add some posts';
}

Answer 3

你永远不会关闭你的许多DIV标签，并且你在循环中打开了div.headline-scroll，所以你必须获得不止一个。试试这个可能吗？ HTML中一致的缩进和最小的PHP将使调试变得更容易，尽管你已经被Wordpress＆＃39;可怕的功能。

<?php if (!$featured->have_posts()):?>

<p>Add some posts!</p>

<?php else: $i = 0; while ($featured->have_posts()): $featured->the_post();?>
<?php if (!$i):?>

<div class="headline-big">
    <div class="m-grid-item">
        <?php the_title(); ?>
    </div>
</div>
<div class="headline-scroll">

<?php else:?>
    <div class="m-grid-item -medium">

<?php endif; ?>
        <?php the_title(); ?>
    </div>
<?php $i++; endwhile;?>
</div>
<?php endif?>

根据计数器

3 个答案: