问题描述
我使用 this tutorial 将 Jetpack 插件的无限滚动支持添加到我自己的主题中:
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'footer' => false,
'render' => 'vividflow_infscroll_render',
'wrapper' => 'post_summaries',
'posts_per_page' => 12,
'type' => 'scroll'
) );
现在我需要像计数器这样的东西,每次加载额外的帖子都会增加。
我知道新的帖子被放置在 infinite-view-
n
类中,我有一个 JavaScript 函数,我想要调用这个新加载的类:
function setupPostSummaries(counter) {
jQuery('.infinite-view-'+counter).doSomething();
}
所以我想我需要一个 PHP 变量在无限滚动渲染功能或循环中增加每次额外的帖子被加载。然后我可以在循环结束时做:
<script type="text/javascript">setupPostSummaries(<?php the_counter(); ?>);</script>
这样的变量已经有了吗?还是有其他方式来实现我的目标?
最佳解决方案
抓住价值观
通常,您只需访问 $wp_query
对象,或者如果您做了像 $my_query = new WP_Query();
的自定义查询,则 $my_query
对象。从那里你可以得到 $wp_query->numberposts
(或更好的,作为 non-deprecated:$wp_query->found_posts
) 的全部数量的帖子和 $wp_query->posts_per_page
每页的帖子数量。
在插件里面
只要写一个小插件为你做这个工作:
<?php
/* Plugin Name: Infinite Scroll Counter Script */
add_action( 'wp_enqueue_scripts', 'wpse88834_add_script' );
function wpse88834_add_script()
{
wp_enqueue_script(
'wpse_counter',
plugin_dir_url( __FILE__ ).'js/counter.js',
array( 'jquery' ), // the infinte scroll script should also be added as dependency
filemtime( plugin_dir_path( __FILE__ ).'js/counter.js' ),
true
);
wp_localize_script(
'wpse_counter',
'wpse_counter_obj',
array(
'numberposts' => $GLOBALS['wp_query']->numberposts,
'found_posts' => $GLOBALS['wp_query']->found_posts,
'posts_per_page' => $GLOBALS['wp_query']->posts_per_page,
)
);
}
当您在脚本中时,您可以轻松访问您的数据
/* Inside ~/js/counter.js */
jQuery( document ).ready( function($) {
/* wpse_counter_obj.numberposts */
wpse_counter_obj.found_posts
wpse_counter_obj.posts_per_page
// Current
var post_count_curr = 0;
post_count_curr += wpse_counter_obj.found_posts;
console.log( post_count_curr );
} );
现在你只需要添加一个事件监听器到无限滚动并递增计数器。
次佳解决方案
我遇到同样的问题,并使用以下内容获取页码:
$curPage = (get_query_var('paged') ? get_query_var('paged') : 1) + 1;
我不能说为什么它做一个定制的 WP_Query,但如果我不这样做 – 它可能是一个特定于我自定义的主题的东西。但是,这个值对于每个调用都是递增的。
参考文献
注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。