在我的自定义主题中实现jquery-ias时遇到问题

Question

我买了这个javascript jquery插件:无限AJAX滚动，我想在我创建的wordpress主题上使用它，在我的首页和我的档案中。

我尝试使用这些链接上的文档：https://infiniteajaxscroll.com/docs/getting-started.html和Wordpress one：https://infiniteajaxscroll.com/docs/cookbook-wordpress.html

但也许是因为我使用了两个不同的循环，一个用于最后三个帖子，第二个用于之后的所有帖子，我不知道它应该如何工作。

下面是一个大循环：

$args = array(
        'offset' => 3
    );
    $query = new WP_query ( $args );
    if ( $query->have_posts() ) {
    ?>

    <section class="container">
            <div class="row"><h1 class="section_title ASG_dark col-lg-12">Plus de news...</h1></div>
            <div class="row">

        <?php while ( $query->have_posts() ) : $query->the_post(); ?>

          <?php $url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>

                <div class="col-lg-4 my-4">
                    <div class="highlight_sticker">
                        <div class="highlight_sticker_thumbnail" style="background-image: url('<?php echo $url[0]; ?>');"></div>
                        <div class="highlight_sticker_info p-4">
                            <div class="highlight_sticker_title"><a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a></div>
                            <div class="highlight_sticker_date"><?php echo the_date(); ?></div>
                        </div>
                        <div class="highlight_sticker_button"><span class="oi oi-plus" title="plus" aria-hidden="true"></span></div>
                    </div>
                </div>

            <?php endwhile; ?>
                        <?php wp_reset_postdata(); ?>
                <div style="clear: both;"></div>
            </div>

      </section>

当我在Wordpress部分之后尝试使用它时，它只显示了一个"You to the end“。

有人能帮我一下吗？我的Javascript太差了，我自己无法理解它。

编辑: ias配置应该如下所示：

<!-- Infinite Ajax Scroll -->
    <script src="<?php echo get_template_directory_uri(); ?>/js/jquery-ias.min.js" type="text/javascript"></script>

    <script type="text/javascript">
  var ias = $.ias({
    container: ".ias-container",
    item: ".ias-item",
    pagination: ".navigation",
    next: ".nav-previous a",
  });

  ias.extension(new IASTriggerExtension({offset: 2}));
  ias.extension(new IASSpinnerExtension());
    ias.extension(new IASNoneLeftExtension());
    ias.extension(new IASTriggerExtension({
    text: 'Load more items', // optionally
        }));
</script>

和front-page.php模板

<?php
    get_header();
?>

<?
    $args = array(
        'posts_per_page' => 3
    );
    $query = new WP_query ( $args );
    if ( $query->have_posts() ) {
    ?>

        <div id="highlight" class="container">
            <div class="row"><h1 class="section_title ASG_light col-lg-12">Dernières news</h1></div>
            <div class="row">

            <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                <?php $url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>

                <div class="col-lg-4 my-4">
                    <div class="highlight_sticker">
                        <div class="highlight_sticker_thumbnail" style="background-image: url('<?php echo $url[0]; ?>');"></div>
                        <div class="highlight_sticker_info p-4">
                            <div class="highlight_sticker_title"><a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a></div>
                            <div class="highlight_sticker_date"><?php echo the_date(); ?></div>
                        </div>
                        <div class="highlight_sticker_button"><span class="oi oi-plus" title="plus" aria-hidden="true"></span></div>
                    </div>
                </div>

                <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>

            </div>

        </div>
<?php } ?>

</header>

<?php /****************************************************************************************************************** */ ?>

    <section class="container py-5">
        <div class="row">
            <div class="col-lg-6">
                <h1 class="section_title ASG_dark">Nos dernières vidéos</h1>
                <div class="stream_home">
                    <?php
                    if( twitch_stream_live() ){ ?>
                        <iframe src="https://player.twitch.tv/?channel=asgardgg" frameborder="0" scrolling="no" height="378" width="650"></iframe>
                    <?php } else { ?>
                        <iframe src="https://www.youtube.com/embed/bwOnTJ_FB4o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    <?php }
                    ?>
                </div>

            </div>
            <div class="col-lg-6"><h1 class="section_title ASG_dark">Les dernières nouveautés</h1>
                <div class="stream_home">
                    <ul class="list-group ASG_events_list d-flex">
                        <?php echo list_sidebar('news',5); ?>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <?php /****************************************************************************************************************** */ ?>

<?
    $args = array(
        'offset' => 3
    );
    $query = new WP_query ( $args );
    if ( $query->have_posts() ) {
    ?>

    <section class="container">
            <div class="row"><h1 class="section_title ASG_dark col-lg-12">Plus de news...</h1></div>
            <div class="row">

        <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                <?php $url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>

                <div class="col-lg-4 my-4">
                    <div class="highlight_sticker">
                        <div class="highlight_sticker_thumbnail" style="background-image: url('<?php echo $url[0]; ?>');"></div>
                        <div class="highlight_sticker_info p-4">
                            <div class="highlight_sticker_title"><a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a></div>
                            <div class="highlight_sticker_date"><?php echo the_date(); ?></div>
                        </div>
                        <div class="highlight_sticker_button"><span class="oi oi-plus" title="plus" aria-hidden="true"></span></div>
                    </div>
                </div>

            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
                <div style="clear: both;"></div>
            </div>

      </section>
<?php   }
get_footer();
?>

编辑N°2：

Archive.php

<?php
get_header();
?>
</header>
<?php if ( have_posts()  ): ?>

    <?php if ( category_description() ) : // Show an optional category description ?>
        <?php echo category_description(); ?>
    <?php endif; ?>

    <?php /* The loop */ ?>

    <section class="container ias-container">
        <?php if ( function_exists('yoast_breadcrumb') )
        {yoast_breadcrumb('<nav id="breadcrumbs">','</nav>');} ?>

        <?php //get_sidebar(); 
            $category_title = single_cat_title("",false);
        ?>
        <!-- Titre de la catégorie -->
        <h1><?php echo $category_title ?></h1>
        <div class="row">

        <?php while ( have_posts() ) : the_post(); ?>

        <div class="col-lg-4 my-4 ias-item">
                    <div class="highlight_sticker">
                        <div class="highlight_sticker_thumbnail" style="background-image: url('<?php echo get_the_post_thumbnail_url( $post->ID ); ?>');"></div>
                        <div class="highlight_sticker_info p-4">
                            <div class="highlight_sticker_title"><a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a></div>
                            <div class="highlight_sticker_date"><?php echo the_date(); ?></div>
                        </div>
                        <div class="highlight_sticker_button"><span class="oi oi-plus" title="plus" aria-hidden="true"></span></div>
                    </div>
        </div>

        <?php endwhile; ?>
            <div style="clear: both;"></div>
        <?php else : ?>
            <div class="article_single_content">
                <p>Pas encore d'articles par ici, mais que font ces admins?</p>
            </div>
        <?php endif; ?>
        </div>
    </section>

    <div class="navigation">
        <div class="nav-previous alignleft"><?php previous_posts_link( 'Older posts' ); ?></div>
        <div class="nav-next alignright"><?php next_posts_link( 'Newer posts' ); ?></div>
    </div>
<?php
    get_footer();
?>

Answer 1

“.col-lg-4 my-4”不是有效的类选择器。尝试“.col-lg-4.my-4”或“.my-4”

更好的做法是向元素添加一个更具体和唯一的类并使用它。