wordpress教程

            本栏目提供wordpress教程,wordpress视频教程,wordpress模板制作教程,wordpress主题制作教程,wordpress使用教程.

            wordpress实现文章的ajax无限加载

            发表于:2019-06-18 点击: 栏目:

            wordpress教程

            刚学习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就可以了

            相关推荐

                      金宝棋牌,金宝棋牌二八杠,捕鱼赚钱手游金宝棋牌,金宝棋牌二八杠,捕鱼赚钱手游