我买了这个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="http://www.srcmini.com/<
?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>
【在自定义主题中实现jquery-ias时遇到问题】当我尝试在Wordpress部分之后使用它时, 它仅显示” 你到达末尾” 。
有人可以帮我吗?我对Javascript很不好, 无法自己理解。
编辑:ias config应该看起来像这样:
<
!-- Infinite Ajax Scroll -->
<
script src="http://www.srcmini.com/<
?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="http://www.srcmini.com/<
?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="http://www.srcmini.com/<
?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="http://www.srcmini.com/<
?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″
更好的方法是在元素中添加一个更具体且唯一的类并使用它。
推荐阅读
- 尝试编辑Hemingway wordpress主题以添加”评论回复”链接
- 大数据开发Linux系统入门之netstat 命令学习
- 做软件测试需要一直培养成长的技能
- 小知识系列:查询数据库数据的元信息
- prometheus target获取
- Failed to start LSB: Bring up/down networking
- Linux 网络常见问题排错经验总结
- linux之sudo使用技巧汇总
- shell脚本基本处理