【问题标题】:Add div to each row in loop将div添加到循环中的每一行
【发布时间】:2013-09-27 06:54:13
【问题描述】:

我正在尝试查询要在 WordPress 网站主页上显示的帖子图像。

我希望最终结果看起来像这样 -

我可以让跨度正确显示,但我不知道如何将 Bootstrap 的“行”类添加到每一行。

这是我目前所拥有的 -

感谢任何帮助。

谢谢!

$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);

$the_query = new WP_Query( $args );

echo '<section id="our-work">';

if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();

     $counter += 1;

     if($counter == 4 || $counter == 5 || $counter == 9 || $counter == 10) : 

     echo '<div class="span6">';
     the_post_thumbnail();;
     echo '</div>';

     else:

     echo '<div class="span4">';
     the_post_thumbnail();
     echo '</div>';

     endif;


 endwhile; endif;

echo '</section>';

【问题讨论】:

  • 不是没有,但我真的希望 php 没有保持那种 VB 式的语法。可读性--;

标签: php css wordpress twitter-bootstrap


【解决方案1】:

肯定有一种更优雅的方法可以做到这一点......但这应该可行。

$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);

$the_query = new WP_Query( $args );

echo '<section id="our-work">';

if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
    $counter += 1;

    if ($counter == 1 || $counter == 4 || $counter == 6 || $counter == 9) {
      echo '<div class="row">';
    }

    if($counter == 4 || $counter == 5 || $counter == 9 || $counter == 10) : 

    echo '<div class="span6">';
    the_post_thumbnail();
    echo '</div>';

    else:

    echo '<div class="span4">';
    the_post_thumbnail();
    echo '</div>';

    endif;

    if ($counter == 3 || $counter == 5 || $counter == 8 || $counter == 10) {
      echo '</div>';
    }

 endwhile; endif;

echo '</section>';

【讨论】:

    【解决方案2】:

    毫无疑问,它可以写得不同——或者更好,但这应该可以解决问题:)

    if($counter % 3 == 0) {
        $current_class = "span6";
    } else {
        $current_class = "span4";
    }
    
    // your stuff here
    echo '<div class="'.$current_class.'">';
    

    【讨论】:

      猜你喜欢
      • 2022-09-25
      • 1970-01-01
      • 1970-01-01
      • 2012-02-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多