Question

我有一个关于推荐的自定义帖子类型，并且帖子很少。我正在尝试创建一个按年份显示帖子的手风琴。因此，当您单击年份时，它将显示该年份的所有帖子（请参见下面的屏幕截图）。

我已经有点用了，问题是当我单击年份时，它仅显示该年份的一篇文章。这是代码-> 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();?>

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

我的处理方法可能完全错误。

我们非常感谢您的帮助。

Answer 1

您的面板div位于while循环内，因此每篇帖子都会重复进行。您应该在循环之外使用它，因此每年仅生成一次。

更改此：

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>

手风琴按年份排序的帖子

1 个答案: