设置 BuddyPress Activity Stream 像 Facebook 一样自动加载教程

(3 票, 评分: 4.67 总分 5)

有玩过facebook的一定会facebook的内容自动加载印象深刻，而默认 BuddyPress Activity Stream 则没有自动加载内容的功能，每次需要点击 Load more 才能载入更多的内容，用户体验并不好，那么是否可以像facebook一样实现滚动到底部的时候自动加载内容呢？答案是100%肯定的，而且非常简单，实现方法如下：

新建一个文件取名为 activity-loader.js 并且放置在模版目录的 _inc 文件夹里边，并且插入如下代码：

jQuery(document).ready( function() {
 var jq=jQuery;
 var is_activity_loading=false;//we use it to make sure that we don not try to send the request again and again
 
//let us check on window scroll event
 jq(window).scroll(function() {
 //find the visible load more button
 //since bp does not move load more, we need to find the last one which is visible
 var load_more_btn=jq(".load-more:visible");
 //if there is no visible button, there are no mor activities, let us retrn
 if(!load_more_btn.get(0))
 return;
 
 //find the offset of the button
 var pos=load_more_btn.offset();
 
 //if the window height+scrollTop is greater than the offset top, we have reached the button, let us load more activity
 
 if(jq(window).scrollTop() + jq(window).height() > pos.top ) {
 
 load_more_activity();
 }
 
 });
 
 /**
 * The routine loads more activity
 * We call it whenever we reach at the bottom of the activity listing
 *
 */
 function load_more_activity(){
 //check if activity is loading, means is there already a request doing this
 //if yes, just return and let the other request handle it
 if(is_activity_loading)
 return false;
 
//so, it is a new request, let us set the var to true
 is_activity_loading=true;
 //add loading class to load more
 //theme authors may need to change the selector if there theme has a different id
 //I am doing it for bp-default/derivative themes
 //change #content to whatever you have named it in your theme
 jq("#content li.load-more").addClass('loading');
 
 if ( null == jq.cookie('bp-activity-oldestpage') )
 jq.cookie('bp-activity-oldestpage', 1, {
 path: '/'
 } );
 
var oldest_page = ( jq.cookie('bp-activity-oldestpage') * 1 ) + 1;
 
//send the ajax request
 jq.post( ajaxurl, {
 action: 'activity_get_older_updates',
 'cookie': encodeURIComponent(document.cookie),
 'page': oldest_page
 },
 function(response)
 {
 jq(".load-more").hide();//hide any load more button
 jq("#content li.load-more").removeClass('loading');//theme authors, you may need to change it
 
 //update cookie
 jq.cookie( 'bp-activity-oldestpage', oldest_page, {
 path: '/'
 } );
 
 //and append the response
 jq("#content ul.activity-list").append(response.contents);
 
//since we are done, let us set the state that activity has loaded
 
 is_activity_loading=false;
 }, 'json' );
 
return false;
 }
 
});//end of dom ready

jQuery(document).ready( function() {

var jq=jQuery;

var is_activity_loading=false;//we use it to make sure that we don not try to send the request again and again

//let us check on window scroll event

jq(window).scroll(function() {

//find the visible load more button

//since bp does not move load more, we need to find the last one which is visible

var load_more_btn=jq(".load-more:visible");

//if there is no visible button, there are no mor activities, let us retrn

if(!load_more_btn.get(0))

return;

//find the offset of the button

var pos=load_more_btn.offset();

//if the window height+scrollTop is greater than the offset top, we have reached the button, let us load more activity

if(jq(window).scrollTop() + jq(window).height() > pos.top ) {

load_more_activity();

}

});

/**

* The routine loads more activity

* We call it whenever we reach at the bottom of the activity listing

function load_more_activity(){

//check if activity is loading, means is there already a request doing this

//if yes, just return and let the other request handle it

if(is_activity_loading)

return false;

//so, it is a new request, let us set the var to true

is_activity_loading=true;

//add loading class to load more

//theme authors may need to change the selector if there theme has a different id

//I am doing it for bp-default/derivative themes

//change #content to whatever you have named it in your theme

jq("#content li.load-more").addClass('loading');

if ( null == jq.cookie('bp-activity-oldestpage') )

jq.cookie('bp-activity-oldestpage', 1, {

path: '/'

} );

var oldest_page = ( jq.cookie('bp-activity-oldestpage') * 1 ) + 1;

//send the ajax request

jq.post( ajaxurl, {

action: 'activity_get_older_updates',

'cookie': encodeURIComponent(document.cookie),

'page': oldest_page

function(response)

{

jq(".load-more").hide();//hide any load more button

jq("#content li.load-more").removeClass('loading');//theme authors, you may need to change it

//update cookie

jq.cookie( 'bp-activity-oldestpage', oldest_page, {

path: '/'

} );

//and append the response

jq("#content ul.activity-list").append(response.contents);

//since we are done, let us set the state that activity has loaded

is_activity_loading=false;

}, 'json' );

return false;

}

});//end of dom ready

然后在模版目录里边的functions.php里边插入如下代码：

function bp_activity_autoloader_inc_js(){
//you can change get_stylesheet_directory_uri() to get_tmplate_directory_uri() if you are author of a parent theme and want to include it in parent theme and not in the child theme.
 wp_enqueue_script('activity-auto-loader', get_stylesheet_directory_uri().'/_inc/activity-loader.js',array('jquery'));//should we make it dependent on 'dtheme-ajax-js'?
}
add_action('bp_enqueue_scripts','bp_activity_autoloader_inc_js',30);

function bp_activity_autoloader_inc_js(){

//you can change get_stylesheet_directory_uri() to get_tmplate_directory_uri() if you are author of a parent theme and want to include it in parent theme and not in the child theme.

wp_enqueue_script('activity-auto-loader', get_stylesheet_directory_uri().'/_inc/activity-loader.js',array('jquery'));//should we make it dependent on 'dtheme-ajax-js'?

}

add_action('bp_enqueue_scripts','bp_activity_autoloader_inc_js',30);

保存上传覆盖即可，前台测试一下你会发现效果很不错，搞定收工。