Посты отсортированы по годам в аккордеоне - PullRequest
0 голосов
/ 11 декабря 2018

У меня есть собственный тип поста для отзывов, и в нем мало постов.Я пытаюсь создать аккордеон, который показывает посты по годам.Поэтому, когда вы нажимаете на год, он отображает все сообщения за этот год (см. Скриншот ниже).

enter image description here

У меня это работает, проблемакогда я нажимаю на год, отображается только один пост за этот год.Вот код -> 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();?>

Вы можете попробовать код со встроенным типом записи, и вы увидите, о чем я говорю.

Мой подход к этому может быть совершенно неверным.

Любая помощь высоко ценится.

1 Ответ

0 голосов
/ 11 декабря 2018

Ваша панель 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>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...