wordpress 在循环中每隔三项添加一个div？

qlckcl4x 于 2023-01-25 发布在 WordPress

关注(0)|答案(3)|浏览(116)

我正在与一个可湿性粉剂网站，并在我的模板，我运行这样的循环：

<!-- START LOOP -->
                <?php while ( have_posts() ) : the_post(); ?>

                    <div class="row" style="margin:15px 0;">
                        <div class="twelve columns">
                            <div class="four columns">
                                <a href="<?php the_permalink(); ?>">
                                    <?php 
                                        if ( has_post_thumbnail() ) {
                                            the_post_thumbnail( 'medium' );
                                        } else {
                                            echo 'No Preview Available'; 
                                        } 
                                    ?>
                                </a>
                            </div>
                            <div class="eight columns">

                                <h3><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h3>
                                <p><?php the_excerpt() ?></p>
                                <p><a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?>" target="_blank"><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></a></p>

                            </div>  

                        </div>
                    </div>
                    <hr />

                <?php endwhile; ?>

因为这是一个响应网站，我试图得到一个网格列外观。我遇到的问题是我如何才能插入一个div与类或“行容器”后，每三个项目？
我知道我可能只是把你搞糊涂了，因为我把自己搞糊涂了，但简而言之，html看起来像这样：

<div class="row container">
    <!-- item 1 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 2 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 3 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 4 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>
</div>

等等，相反，我希望它显示在一个网格中，这样HTML应该看起来更像这样：

<div class="row container">
    <!-- row 1 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 1 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 2 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 3 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>

    <!-- row 2 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 4 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 5 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 6 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>
</div>

我可以做其他的一切我只是不知道如何实现下面的，所以我得到的结果，我粘贴在上面？我发现这个在线，感觉这是一个正确的方向迈出的一步：

<?php ($i % 3) == 0 ?>

wordpress

来源：https://stackoverflow.com/questions/17871513/add-div-after-every-three-items-in-a-loop

3条答案

按热度按时间

hiz5n14c1#

你的感觉是对的。
您可以使用WP_Query class的$current_post属性来获取循环中当前显示的帖子的索引，然后使用modulus operator来确保您的目标是3的倍数。
因此，您的循环可能如下所示：

<div class="row container">
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php while ( have_posts() ) : the_post(); ?>

                <!-- item -->            
                <div class="four columns">IMAGE HERE</div>

      <?php if( $wp_query->current_post % 3 == 0 ) : ?>
           </div>
      </div>
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php endif; ?>        
      <?php endwhile; ?>
</div>

你可能需要改进这个实现，特别是，无论发生什么，确保你的HTML正确关闭。

赞(0）回复(0）举报 2023-01-25

rekjcdws2#

我需要的是一个计数器：

<!-- START LOOP -->
            <?php $counter = 1 ?>
            <div class="row" style="margin:15px 0;">
                    <div class="twelve columns">
            <?php while ( have_posts() ) : the_post(); ?>

                        <div class="four columns">
                            <a href="<?php the_permalink(); ?>">
                                <?php 
                                    if ( has_post_thumbnail() ) {
                                        the_post_thumbnail( 'medium' );
                                    } else {
                                        echo 'No Preview Available'; 
                                    } 
                                ?>
                            </a>
                        </div>  
                        <?php if ($counter % 3 == 0){echo '</div></div></hr /><div class="row" style="margin:15px 0;"><div class="twelve columns">';} ?>                            

            <?php $counter++ ; 
            endwhile; ?>
            </div>
            </div>

赞(0）回复(0）举报 2023-01-25

xdnvmnnf3#

<?php
 
$currentPage = get_query_var('paged');
 
 
// General arguments
 
$posts = new WP_Query(array(
    'post_type' => 'post', // Default or custom post type
    'posts_per_page' => 11, // Max number of posts per page
    'paged' => $currentPage
));
 

// Content display
$i = 0;            
if ($posts->have_posts()) :
    while ($posts->have_posts()) :
        $posts->the_post();
        if( $i % 3 == 0 )      
            echo '<section class="columns">';
               
        echo "<div class='column'>";
               ?>
             
                    <h2><?php the_title(); ?></h2>
                    <p><?php the_excerpt(); ?></p>
            
               <?php        
        
        echo "</div>";  
               $i++;
             
             if( $i % 3 == 0 )     
            echo '</section>';
             
    endwhile;
endif;
 
?>
               
        
            
             
            <?php
             
// Bottom pagination (pagination arguments)
 
echo "<div class='page-nav-container'>" . paginate_links(array(
    'total' => $posts->max_num_pages,
    'prev_text' => __('<'),
    'next_text' => __('>')
)) . "</div>";
             
             ?>

赞(0）回复(0）举报 2023-01-25

我来回答

wordpress 在循环中每隔三项添加一个div？

3条答案

相关问题

热门标签

最新问答