欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

wordpress教程

wordpress实现文章的ajax无限加载

wordpress教程 我的站长站 2019-06-18 共220人阅读

刚学习wordpress 写一个网站的文章的无限加载,本来想的好难啊,但是真的自己写了之后感觉真的挺简单的,所以啊一定要做一下小小的总结:

首先你要确定你的wordpress的jQuery功能能用你可以在header.php里wp_head();前面加上wp_enqueue_script('jquery'); 一定要在他的前面,这加载的是wordpress自带的jQuery,也可以加载自己的,方法就不用我说了。然后就是要写AJAX异步调用了。不过我还真的对ajax不太熟悉。不过别人写的方法借用了一下。

首先:在你要实现无限加载的也面加入ajax代码:

<script type="text/javascript">
/*
* jquery scroll ajax load more post
*/
var count=-10;
initOne = true;
jQuery(document).ready(function(){
if(initOne){
ajaxLoadMose(10);
}
});
stop=true;
jQuery(document).scroll(function(){
totalHeight = parseFloat(jQuery(window).height()) + parseFloat(jQuery(window).scrollTop());
if( jQuery(document).height() <= totalHeight+560){
if(stop && !(initOne)){
stop=false;
jQuery('#main-list').append('<div class="bottom-loading loading" align="center"> loading.......</div>');
setTimeout(function(){
ajaxLoadMose(10);
},100);
}
}
});
function ajaxLoadMose(num){
count+=num;
jQuery.ajax({
type: 'post',
url: '/wp-admin/admin-ajax.php',
dataType: "json",
data: { action:'ajaxLoadMore' , amount:num,count_:count},
success: function(data){
if(data.length){
var total = parseInt(jQuery('#main-list').attr('data-count'))+data.length;
jQuery('#main-list').attr('data-count',total);
for(i=0; i<data.length;i++){
p = data[i];
// alert(p['count']+"本来就有的数据数目");
var outHtml = '<article id="post-'+p['ID']+'" >';
outHtml += '<header class="entry-header">';
outHtml += '<h2 class="entry-title"><a href="' +p['url']+ '" rel="bookmark" title="'+p['title']+'">'+p['title']+'</a></h2>' ;
outHtml += '<input type="hidden" id="post_url_hidden_'+p['ID']+'" name="post_url_hidden" value="'+p['url']+'">';
outHtml += '</header>';
outHtml += p['img'];
outHtml += '</article>';
jQuery('#main-list').append(outHtml);
var article = jQuery(outHtml).hide();
//jQuery('#main-list').append(article);
article.fadeIn('fast');
}
initOne=false;
stop=true;
jQuery('#main-list').removeClass('bottom-loading loading');
if(jQuery('.bottom-loading').length>0){
jQuery('.bottom-loading').remove();
}
if(data.length<num){
if(jQuery('.bottom-loading').length>0){
jQuery('.bottom-loading').remove();
}
jQuery('#main-list').append('<div class="the-end"  align="center">End</div>');
stop=false;
}
}
else{
}
},
error:function(){
console.log("error");
}
});
}
</script>

然后在function.php 中加入function 

add_action('wp_ajax_ajaxLoadMore','ajaxLoadMore');
add_action('wp_ajax_nopriv_ajaxLoadMore','ajaxLoadMore');
function ajaxLoadMore(){
$amount = @$_POST['amount'];
$count = @$_POST['count_'];
global $wpdb;
$sql = "SELECT ID,post_title,post_name from lasv_posts WHERE post_status='publish' AND post_type='post'  ORDER BY post_date DESC LIMIT $count,$amount";
$rs=$wpdb->get_results($sql);
query_posts(array('paged' => $amount)); 
if ( have_posts() ) :
while ( have_posts() ) : the_post();
get_template_part( 'content', 'index' );
endwhile;
else :
//get_template_part( 'content', 'none' );
endif;
$arrList = array();
foreach($rs as $k){
$p_id = $k->ID;
$title = get_post($p_id)->post_title;
$url =get_post($p_id)->post_name;
$img = '';
$attr = array(
'class' => "attachment-twentyfourteen-full-width wp-post-image img-buy-s-".$p_id ,
'title' => $title,
);
// Post thumbnail.
// video img type: default , hqdefault , mqdefault , sddefault , maxresdefault
//get_the_post_thumbnail($p_id,'medium' , $attr );
$img_path = get_video_img_path($p_id,'mqdefault');
$img= '<a href="'.$url.'.html" class="img-a"><span class="'.show_post_style($p_id).'"></span></span><img src="'.$img_path.'"></a>';
$arrList[] = array(
'ID' => $p_id ,
'title' => $title ,
'img' => $img ,
'url' => $url ,
//'end' => $end,
'count'=>$count,
);
}
echo json_encode($arrList );
exit;
}

前面的add_action();必不可少这个方法主要写要返回前台数据。

这就可以了还有网页上要有div id 为main-list就可以了

标签 AJAX
相关推荐
  • AJAX
  • 帝国CMS表单如何使用ajax提交?

    自己做了个表单提交,但是form的转跳页面提示,想做成ajax根据返回信息提示。ajax提交思路代码var data = $(&#39;#form&#39;).serialize(), url = $(&#39;#form&#39;).attr(&#39;action&#39;); $.ajax({ method:"POST...

    帝国cms教程 275 4年前
  • wordpress Ajax无限加载插件-Quick Ajax2.3.1[英文版]
    wordpress Ajax无限加载插件-Quick Ajax2.3.1[英文版]

    Quick Ajax插件说明使用此插件,你可以在你的主题里实现无限加载文章来代替传统的分页模式。提供多种列表模式:瀑布流、传统文章模式、时间轴等。wordpress加载主要功能外观设置选择布局:经典(列表)或...

    wordpress插件 491 4年前
  • wordpress实现文章的ajax无限加载

    刚学习wordpress 写一个网站的文章的无限加载,本来想的好难啊,但是真的自己写了之后感觉真的挺简单的,所以啊一定要做一下小小的总结:首先你要确定你的wordpress的jQuery功能能用你可以在header.php里wp_head();前面加上wp_enqueue_script(&#39;jquery&#...

    wordpress教程 220 4年前
  • dedecms ajax下拉搜索插件
    dedecms ajax下拉搜索插件

    织梦CMS下拉搜索插件效果图织梦CMS下拉搜索插件安装步骤1、打开你的网站首页模板,在</head>之前加入<script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin...

    织梦cms插件 573 4年前
  • 帝国CMS二级联动插件(ajax下拉列表)
    帝国CMS二级联动插件(ajax下拉列表)

    帝国CMS二级联动插件(ajax下拉列表)效果: 使用方法: 将下拉外表关联字段的输入表单替换html代码和投稿表单替换为 <script src="/j...

    帝国cms插件 2216 9年前