使用 ajax 关闭 Magnific 弹出内容后，所有 owl 轮播中断

Question

我正在创建单页 WP 主题，实际上主题是由其他人创建的，我正在将其转换为 WP。一切正常，但是当查看并关闭来自博客部分的 post 时，网站上的所有轮播都会中断。 post 在华丽的弹出窗口中打开。

// 链接
<a href="<?php the_permalink(); ?>" class="ajax-popup-link"></a>

// 壮观
$('.ajax-popup-link').magnificPopup({ type: 'ajax', closeOnBgClick: false });

// 我使用弹出窗口的完整代码

    <?php
    $bl_args = array(
        'post_type' => 'post',
        'orderby' => 'date',
        'order' => 'DEC',
    );
          $counter = 0;
    $bl_query = new WP_Query( $bl_args );
    // The Loop
    if ( $bl_query->have_posts() ) {
        while ( $bl_query->have_posts() ) {
            $bl_query->the_post();


                            if( $counter%4 == 0 ) {

                                echo '<div class="blog">';
                                echo '<div class="row">';
                            } //open before every fourth item

                            echo '<div class="col-md-6">';
                     ?>
    <a href="<?php the_permalink(); ?>" class="ajax-popup-link">
                     <?php
                            the_post_thumbnail('blog-thumb');
                     ?>
                            </a>
                     <?php
                            echo '<div class="row">';
                            echo '<div class="col-sm-2"><span><span>';
                            the_time('j');
                            echo '</span>';
                            the_time('F Y');
                            echo '</span>';
                            echo '</div><!-- .col-sm-2 -->';
                            echo '<div class="col-sm-10">';
                            echo '<h4>';
                    ?>
    <a href="<?php the_permalink(); ?>" class="ajax-popup-link">
                    <?php
                            echo get_the_title();
                    ?>
    </a>
                    <?php
                            echo '</h4>';
                            the_excerpt();
                            echo '</div><!-- .col-sm-10 -->';
                            echo '</div><!-- .row -->';
                            echo '</div><!-- .col-md-6 -->';

                            if( $counter%4 == 3 ) { 
                                echo '</div><!-- .row -->'; 
                                echo '</div><!-- .blog -->';
                            } //close after each block of four or after last item
                            $counter++;
        }
    }

    /* Restore original Post Data */
    wp_reset_postdata();
          ?>

谢谢！

Answer 1

问题是因为弹出窗口，样式和脚本被再次加载。我删除了 wp_head() 和 wp_footer()，现在一切正常。

使用 ajax 关闭 Magnific 弹出内容后，所有 owl 轮播中断

All owl Carousel breaks after closing the Magnific popup content using ajax

ajax

wordpress

magnific-popup

owl-carousel