2

我有这个代码,我需要每 4 个帖子关闭一行。每个帖子都在一个div中。我尝试了一些东西,但我无法实现我的代码。

    <?php
    echo "<div class='row'>";
    global $post;
    $all_events = tribe_get_events(
        array(
            'eventDisplay'=>'upcoming',
            //'posts_per_page'=>10,
    )
    );

    foreach($all_events as $post) {
    setup_postdata($post);
    ?>

    <div class="col-sm-3">
        <span class="event-date"><?php echo tribe_get_start_date($post->ID, true, 'j M'); ?></span>
        <h3><?php the_title(); ?></h3>
        <?php if ( has_post_thumbnail() ) { ?>
            <div class="event-thumb">
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
            </div>
            <div class="event-excerpt">
                <?php the_excerpt(); ?>
            </div>
        <?php } else { ?>
            <div class="event-content">
                <?php the_content(); ?>
            </div>
        <?php } ?>

    </div>

<?php } //endforeach ?>
<?php wp_reset_query(); ?>
4

3 回答 3

3
 <?php
    echo "<div class='row'>";
    global $post;
    $all_events = tribe_get_events(
        array(
            'eventDisplay'=>'upcoming',
            //'posts_per_page'=>10,
    )
    );
      $count = 1;
    foreach($all_events as $post) {
    setup_postdata($post);
    ?>

    <div class="col-sm-3">
        <span class="event-date"><?php echo tribe_get_start_date($post->ID, true, 'j M'); ?></span>
        <h3><?php the_title(); ?></h3>
        <?php if ( has_post_thumbnail() ) { ?>
            <div class="event-thumb">
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
            </div>
            <div class="event-excerpt">
                <?php the_excerpt(); ?>
            </div>
        <?php } else { ?>
            <div class="event-content">
                <?php the_content(); ?>
            </div>
        <?php } ?>

    </div>
<?php
 if($count == 4){
  echo "<div class='seperator'></div>";
  $count =1;
  }
 ?>
<?php $count++; } //endforeach ?>
<?php wp_reset_query(); ?>
于 2013-09-29T11:41:17.757 回答
3

我实际上会在 CSS 中 100% 解决这个问题,因此您不需要在 PHP 代码中进行任何计数或处理。

看看这个 JSFiddle

float: left将导致单个元素彼此跟随(左对齐)。 clear: left在每个4 * n + 1-th 元素 ( nth-child(4n+1)) 上都会清除它,本质上是强制换行。

对此有一个警告:如果一行中的所有 4 个条目都没有空间,您最终会得到额外的包装,这可以通过width为容器定义一个固定来避免。


PHP 的简化代码内版本将仅计算写入的字段并根据需要添加换行符:

$i = 1;                        // counter
foreach ($events as $event) {  // iterate over all events
    if ($i++ % 4 == 0)         // a % b will be 0 for 4, 8, etc.
        echo '<br />';         // print the line break using whatever HTML you see fit.
    print_event($event);       // print the actual event
}

您可能会问我是否在实际打印事件之前检查换行符:这是为了在条目数是 4 的倍数时防止额外的换行符,即我避免有一个空的尾随行。

于 2013-09-29T11:57:10.790 回答
0

您需要模运算符。它是这样工作的:

$i == 0;
foreach($some_array as $some_value){
    if ($i % $number_to_divide_by == 0) {
        // do something here every nth time
    }
    $i++;
}
于 2013-09-29T11:38:06.177 回答