Reputation: 11
I bought this javascript jquery plugin : Infinite AJAX Scroll and I want to use it on the wordpress theme I created, on my frontpage and my archives.
I tried with the documentation on theses links : https://infiniteajaxscroll.com/docs/getting-started.html and the Wordpress one : https://infiniteajaxscroll.com/docs/cookbook-wordpress.html
But maybe because I am using 2 differents loops, one for the last three posts, the second for all the posts after, I don't understand how it should works.
Here is the big loop :
$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>
When I tried to use it following the Wordpress part, it displayed only a "You reached the end".
Can someone help me with that ? I am too bad with Javascript to understand it by myself.
Edit : ias config should have been looking like this :
<!-- 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>
And the front-page.php template
<?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();
?>
EDIT 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();
?>
Upvotes: 0
Views: 290
Reputation: 3166
“.col-lg-4 my-4“ is not a valid class selector. Try “.col-lg-4 .my-4” or just “.my-4”
Even better would be to add a more specific and unique class to the element and use that.
Upvotes: 0