在 bootstrap 4 wordpress 主题的最后一行添加一个独特的类答案

【问题标题】：Add a unique class to last row of a bootstrap 4 wordpress theme在 bootstrap 4 wordpress 主题的最后一行添加一个独特的类
【发布时间】：2018-09-24 18:06:06
【问题描述】：

我一直在研究如何将一个独特的类添加到 bootstrap 4 网格布局的最后一行。我发现了很多关于如何在 wordpress 查询中识别最后一篇文章的示例，但是识别最后一行的开头以便我可以添加一个唯一的类更难找到。

最后，我做了一些（回想起来）基本数学来计算 while 语句中的哪个循环包含最后一行的第一个帖子，并在该点插入所需的“最后一个”类。

此代码正在运行（$project_columns 是 1 到 12 之间的整数），但我想知道我的解决方案是否存在任何性能问题或本可以做得“更好”。

    <!-- Project Thumbnails -->
    <?php if ( $show_project_thumbnails === true ) : ?>

        <?php
            $args = array(
                'post_type' => 'projects',
                'orderby' => $project_orderby,
                'order' => $project_order,
            );

            $the_query = new WP_Query($args);
            if ( $the_query->have_posts ()) :
                $counter = 0;
                $post_count = $the_query->post_count; 
                $total_rows = (ceil) ( $post_count / $project_columns );
                $first_post_last_row = ( $total_rows - 1 ) * $project_columns;
        ?>
        <div id="projects">

            <div class="row content-area bg-light projects">

                <div class="col projects-title">

                    <h1 class="text-center display-3">Recent Projects.</h1>
                    <hr class="separator"></span>

                </div><!-- .col end -->

            </div><!-- .row end -->

                <?php
                    while ( $the_query->have_posts ()) : $the_query->the_post();
                        if ($counter % $project_columns == 0) :
                            echo $counter > 0 ? "</div>" : ""; // close div if it's not the first   
                            echo $counter == $first_post_last_row ? "<div class=\"row content-area bg-light last\">" : "<div class=\"row content-area bg-light\">";
                        endif;

                ?>

                            <div class="col-md projects-thumbnails">

                                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"">

                                    <?php

                                        the_post_thumbnail();
                                        echo $items;

                                    ?>
                                </a>

                            </div><!-- .col-md end -->

                <?php $counter++;
                        endwhile;
                    endif;
                    wp_reset_postdata();
                ?>

            </div><!-- .row end -->

        </div><!-- #projects end -->

    <?php endif; ?>
    <!-- /Project Thumbnails -->

【问题讨论】：

标签： php wordpress bootstrap-4

【解决方案1】：

我认为选择最后一行最简单的方法是使用 CSS :last-child 选择器。

【讨论】：

【解决方案2】：

你可以通过类似的方式访问最后一行

<?php 
    $last_key = count($array) - 1;
    if(key($array) == $last_key){
       // do something
    }
?>

或者如果他们的关键不是数字

 <?php 
        $last_key = count($array) - 1;
        $last_row = $array[$last_key];
        if(key($array) == $last_row){
           // do something
        }
    ?>

【讨论】：