按手风琴年份排序的帖子

Question

我有一个自定义的 post 类型的推荐信，它几乎没有 post。我正在尝试创建一个按年显示 posts 的手风琴。因此，当您单击年份时，它会显示该年份的所有 post（请参见下面的屏幕截图）。

我已经有点用了，问题是当我点击年份时，它只显示那一年的 post。这是代码 -> https://pastebin.com/3F98dcEU

            <?php get_header();?>
            <style>
            .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
            margin-bottom:20px;
            }

            .active, .accordion:hover {
            background-color: #ccc; 
            }

            .panel {
            padding: 0 18px;
            display: none;
            background-color: white;
            overflow: hidden;
            }
            </style>
            <div class="container-fluid testimonial-header">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h1>Testimonials</h1>
                    </div>
                </div>
            </div>
            <div class="container testimonial-content">
                <div class="block-1">
                    <h2 class="heading">Delivering Exceptional Customer Service</h2>
                    <p class="sub-heading">Being locally owned and operated, our objective is to provide exceptional client service delivered by our professional team. We take great pride in building homes that are beyond expectation, on time and on budget.</p>
                </div>
            </div>
            <div class="container-fluid py-5 archive-testimonial">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                        <?php 
            global $wpdb;

            $posts = $wpdb->posts;

            //Get all unique years as "years" from posts where post type is equal to testimonials

            $sql = "SELECT DISTINCT(YEAR(`post_date`)) as years FROM $posts WHERE post_type = 'testimonials' ORDER BY years DESC"; //Get all post year list by DESC


            //Loop through all results and use date_query param https://codex.wordpress.org/Class_Reference/WP_Query#Date_Parameters


            $result = $wpdb->get_results($sql);

            foreach($result as $rs) { ?>
                <button class="accordion"><?php echo $rs->years ;?></button>
                <?php $args = array(
                    'post_type' => 'testimonials',
                    'post_per_page'=> -1,
                    'post_status' => 'publish',
                    'orderby'   => 'date',
                    'order' => 'DESC',
                    'date_query' => array(array(
                        'year'=> $rs->years,
                    ),),

                );

                $loop = new WP_Query($args);

                if($loop->have_posts()) {

                    while($loop->have_posts()) : $loop->the_post(); ?>
                        <div class="panel testimonial-grid-archive testimonial-loop-ah">
                            <div>
                                <?php 
                                    if(has_post_thumbnail()) { ?>
                                        <div style="text-center">
                                                    <div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
                                                </div>
                                            <?php } else { ?>
                                                <div class="testimonial-image-aden placeholder-testimonial-image"> </div>
                                            <?php } 
                                            ?>
                                        </div>
                            <div class="testimonial-content">
                                <p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
                                <p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
                                <div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>           
                                <p class="person-title-archive">- <?php the_title() ;?></p>
                            </div>
                        </div>


                    <?php endwhile;

                }
            }
                        ?>
                        </div>
                    </div>
                </div>
            </div>
            <script>
            var acc = document.getElementsByClassName("accordion");
            var i;

            for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                panel.style.display = "none";
                } else {
                panel.style.display = "block";
                }
            });
            }
            </script>
            <?php get_footer();?>

您可以尝试使用内置 post 类型的代码，您就会明白我在说什么。

我的做法可能完全错误。

非常感谢任何帮助。

Answer 1

您的面板 div 在您的 while 循环中，因此每个 post 都会重复它。你应该把它放在你的循环之外，所以它每年只生成一次。

改变这个：

while($loop->have_posts()) : $loop->the_post(); ?>
    <div class="panel testimonial-grid-archive testimonial-loop-ah">
        <div>
            <?php 
                if(has_post_thumbnail()) { ?>
                    <div style="text-center">
                                <div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
                            </div>
                        <?php } else { ?>
                            <div class="testimonial-image-aden placeholder-testimonial-image"> </div>
                        <?php } 
                        ?>
                    </div>
        <div class="testimonial-content">
            <p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
            <p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
            <div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>           
            <p class="person-title-archive">- <?php the_title() ;?></p>
        </div>
    </div>
<?php endwhile;

对此：

<div class="panel testimonial-grid-archive testimonial-loop-ah">
    <?php while($loop->have_posts()) : $loop->the_post(); ?>
    <div>
        <?php 
        if(has_post_thumbnail()) { ?>
            <div style="text-center">
                <div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
            </div>
        <?php } else { ?>
            <div class="testimonial-image-aden placeholder-testimonial-image"> </div>
        <?php } ?>
        </div>
        <div class="testimonial-content">
            <p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
            <p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
            <div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>           
            <p class="person-title-archive">- <?php the_title() ;?></p>
        </div>
    <?php endwhile; ?>
</div>

按手风琴年份排序的帖子

Posts sorted by year in accordion

javascript

php

wordpress

accordion

custom-post-type