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

我买了这个javascript jquery插件：Infinite AJAX Scroll, 我想在我创建的wordpress主题, 首页和档案上使用它。

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

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

这是一个大循环：

$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部分之后使用它时, 它仅显示”你到达末尾”。

有人可以帮我吗？我对Javascript很不好, 无法自己理解。

编辑：ias config应该看起来像这样：

<!-- 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();
?>

#1

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

更好的方法是在元素中添加一个更具体且唯一的类并使用它。

#1

相关推荐

评论抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

#1

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发