实现高性能wordpress ajax文章分页功能

wordpress实现高性能的ajax文章分页功能。首先我们需要对后端进行处理,使除了当前使用AJAX可以无刷新浏览外,还可以直接请求改变的URL后也可以正常浏览。方法是对使用pushState的AJAX的发送一个特殊的头,当后端获取到的时候通用的部分不再输出〜

大致代码如下,具体根据主题不同可以略微有差别,编辑的index.php,改成如下结构

<?php

if(isset($_GET[“action”]) && $_GET[“action”] == “ajax_postsss”){

nocache_headers();?>

…..需要ajax调出来的部分….

<?php }else{

get_header() ;

?>

…..文章内容….

<?php get_sidebar() ;?>

<?php get_footer() ;?>

<?php }?>

在引用JQ库的情况下使用此代码实现:

jQuery(document).ready(function(a) {

var n = null, H = false, i = document.title, t, h = window.opera ? document.compatMode == “CSS1Compat” ? a(“html”) :a(“body”) :a(“html,body”);

if (window.history && window.history.pushState) {

a(document).on(“click”, “.content-page a”, function(b) {

b.preventDefault();

if (n == null) {

t = {

url:document.location.href,

title:document.title,

html:a(“#content”).html(),

top:h.scrollTop()

};

} else {

n.abort();

}

t.top = h.scrollTop();

var q = a(this).attr(“href”).replace(“?action=ajax_postsss”, “”);

a(“.content-page”).text(“\u6587\u7ae0\u52a0\u8f7d\u4e2d\x2e\x2e\x2e”);

n = a.ajax({

url:q + “?action=ajax_postsss”,

success:function(v) {

H = true;

var state = {

url:q,

title:i,

html:v

};

history.pushState(state, i, q);

document.title = i;

h.animate({

scrollTop: 0

},

0);

a(“#content”).html(v);

}

});

return false;

});

window.addEventListener(“popstate”, function(i) {

if (n == null) {

return;

} else {

if (i && i.state) {

H = true;

document.title = i.state.title;

a(“#content”).html(i.state.html);

} else {

H = false;

document.title = t.title;

a(“#content”).html(t.html);

h.animate({

scrollTop: t.top

},

0)

}

}

});

}

});

#content 标签要包含文章列表和翻页导航, .content-page a 是翻页标签,内容请根据你自己的网页模板修改。

WordPress记住评论用户信息的js版本,直接操作cookie无视缓存,解决WP Super Cache不缓存留言用户

WP Super Cache默认情况下是不会对网站留过言的用户缓存的,因为在WP Super Cache看来,留过言的用户就是已知用户了,WP Super Cache的默认设置是推荐对已知用户不缓存的,当然我们也可以修改设置让WP Super Cache对已知用户缓存,但这样的结果就是无论你是网站站长还是留言用户看到的页面都是缓存过的,给网站的管理带来一些麻烦。

既要对留言用户缓存,又要不缓存网站的登陆用户(管理员),我能想到的办法就是让WP Super Cache读取不到留言用户的信息,然后自然WP Super Cache就会无视用户是否留言都缓存页面了。

由于本站采用的是ajax评论,所以我先在ajax评论代码中把默认保存用户信息的代码注释掉。然后采用JS记住评论用户信息。

找到main.php中的

     $user = wp_get_current_user();
     do_action(‘set_comment_cookies’, $comment, $user);

把这两行代码注释掉ajax评论就不会保存用户信息了,然后用户每次评论都要再输入一遍用户信息。如果只是这样显得不够友好了。

下面我们就利用JS来记住用户信息,只要用户认真提交过一次评论,那么下次再来访问任意页面,将会自动填写评论用户信息。

上JS代码(注意其中的domain=后面的域名要换成你自己的)

//设置Cookie
function SetCookie(sName, sValue,iExpireDays) {
    if (iExpireDays){
        var dExpire = new Date();
        dExpire.setTime(dExpire.getTime()+parseInt(iExpireDays*24*60*60*1000));
        document.cookie = sName + "=" + escape(sValue) + "; expires=" + dExpire.toGMTString()+ "; path=/;domain=.zhangge.net";
    }
    else{
        document.cookie = sName + "=" + escape(sValue)+ "; path=/;domain=.zhangge.net";
    }
}
// 目的:    返回Cookie
function GetCookie(sName) {
    var arr = document.cookie.match(new RegExp("(^| )"+sName+"=([^;]*)(;|$)"));
    if(arr !=null){return unescape(arr[2])};
    return null;

}
//加载用户信息
function LoadRememberInfo() {
    var strName=GetCookie("author");
    var strEmail=GetCookie("email");
    var strHomePage=GetCookie("url");
    var bolRemember=GetCookie("chkRemember");
    var a_vlaue= document.getElementById("author");
    if (a_vlaue != null){
        if(bolRemember=="true"){
                    //通过decodeURIComponent对内容解码
            if(strName){document.getElementById("author").value=decodeURIComponent(strName);};
            if(strEmail){document.getElementById("email").value=strEmail;};
                     //通过decodeURIComponent对内容解码
            if(strHomePage){document.getElementById("url").value=decodeURIComponent(strHomePage);};
            if(bolRemember){document.getElementById("saveme").checked=bolRemember;};
        }

        if(GetCookie("username")){
            document.getElementById("author").value=unescape(GetCookie("username"));
        }
    }   
}
//通过jQuery ready在页面加载时自动从cookies中载入已保存的用户信息
jQuery(document).ready(function($){
       LoadRememberInfo();
//给评论提交按钮绑定信息保存函数
    $("#respond #submit").click(function(){
       SaveRememberInfo();
    });
//给评论重置按钮绑定信息移除函数
    $("#respond #reset").click(function(){
        RemoveRememberInfo();
    });
});
//保存信息函数
function SaveRememberInfo() {
    var strName=document.getElementById("author").value;
    var strEmail=document.getElementById("email").value;
    var strHomePage=document.getElementById("url").value;
    var bolRemember=document.getElementById("saveme").checked;
        //通过encodeURIComponent对内容进行url编码
    SetCookie("author",encodeURIComponent(strName),365);
    SetCookie("email",strEmail,365);
        //通过encodeURIComponent对内容进行url编码
    SetCookie("url",encodeURIComponent(strHomePage),365);
    SetCookie("chkRemember",bolRemember,365);

}
//移除信息函数
function RemoveRememberInfo() {
    SetCookie("author",”,365);
    SetCookie("email",”,365);
    SetCookie("url",”,365);
    SetCookie("chkRemember",’false’,365);
}

把上述代码保存为 saveinfo.js ,然后引入到前台,最后编辑主题的comments.php文件,找到提交留言的按钮代码,在合适的位置添加勾选框。

<input type="checkbox" id="saveme" value="saveme" checked="checked" style="margin-left:20px;" /><label for="comment_mail_notify">记住我,下次回复时无需重新输入个人信息</label>

大概位置如下

….以上省略….

<div class="submitted">

<input class="submit" name="submit" type="submit" id="submit" tabindex="5" value="提交留言" />

<input class="reset" name="reset" type="reset" id="reset" tabindex="6" value="<?php esc_attr_e( ‘重写’ ); ?>"/>

<?php comment_id_fields(); ?>

<input type="checkbox" id="saveme" value="saveme" checked="checked" style="margin-left:20px;" /><label for="comment_mail_notify">记住我,下次回复时无需重新输入个人信息</label></p>

</div>

…以下省略…

或者你也可以直接在functions.php中挂载

//自动加勾选栏
function add_checkbox() {
  echo ‘<input type="checkbox" id="saveme" value="saveme" checked="checked" style="margin-left:20px;" /><label for="comment_mail_notify">记住我的用户信息</label>’;
}
add_action(‘comment_form’, ‘add_checkbox’);

现在,网站可以放心的开启前台整站CDN加速或者WP Super Cache了,用户只要认真提交过一次评论,那么下次再来访问任意页面,将会自动填写评论用户信息。并且也不存在WP Super Cache不缓存留言用户的烦恼。

四、注意事项

①、使用前请务必正确修改js代码中的domian值,否则无法操作cookies;

②、如果你了解js,可以将js代码与网站的其他js合并,减少页面的js请求,比如与comments-ajax.js合并;

③、已记住的网站,如需修改更新用户信息,只需输入新的信息,重新提交一次即可刷新cookie;

④、如果评论框中存在重置(id为reset)的按钮,那么只要点击重置就能清除已保存的用户信息;

⑤、该功能只在用户电脑本地生效,不会带来任何安全隐私及隐患;

⑥、以上js只对WordPress生效,其他建站程序可以通过修改代码中的ID名称即可生效。

cookie保存信息失败,要检查是否是因为标签的ID冲突原因。

资料来源:https://zhangge.net/4684.html

最新wordpress ajax评论回复实现方法

现在大多数新wordpress主题采用的都是ajax评论回复方式,并且可能多数主题使用的ajax提交评论功能都是willin的或者衍生的版本。今天分享的是自wordpress 4.4之后新的ajax评论回复代码。

wordpress 4.4新增了一个函数wp_handle_comment_submission,这个函数可以看作是wp_new_comment的升级版,用这个函数将大大减少了AJAX回调函数的代码量,简单的说就是由原来的几十行代码变成一行,而且过滤条件更加全面,非常之方便

本教程必须为4.4或以上版本,低版本直接使用会报错。

使用方法

下载压缩包里的文件,解压后将文件夹上传到主题根目录下,注意是加压后的文件夹,不是文件件中的文件

下载地址1 | 下载地址2|下载地址3(密码: 6w6j)

然后在functions.php中使用如下代码调用

require('ajax-comment/main.php');
配置适应主题

app.js第四行调整评论列表class

__list = 'comment-list';

main.phpformpostion参数为评论表单位置

回调函数中的评论样式可根据你的主题自行调整,但不要使用回复按钮,会报错。

代码已经过默认主题twentysixteen测试,没有任何问题。

资料来源:http://fatesinger.com/jquery-ajax-comments.html

WordPress文章点击统计ajax版,兼容wp super cache缓存代码及插件

一般情况下使用了wp super cache缓存插件后,文章点击统计就会变的失效了,不过采用ajax就可以解决问题。

第一步:在wordpress根目录下,新建ajax.php.内容如下

<?php
define( ‘DOING_AJAX’, true );
require_once( ‘wp-config.php’ );
do_action( ‘wp_ajax_nopriv_’ . $_REQUEST[‘action’] );
die( ‘0’ );

第二步:在主题目录下的functions.php添下以下代码

//WordPress文章点击统计ajax版,兼容wp super cache缓存代码及插件
add_action( ‘wp_ajax_nopriv_v’, ‘views’ );
function views($echo) {
    $post_id = intval( $_GET[‘views_id’] );
    if( $post_id > 0 ) {
        $post_views = get_post_custom( $post_id );
        $post_views = intval( $post_views[‘views’][0] );
        update_post_meta( $post_id, ‘views’, ( $post_views + 1 ) );
        exit();
    }
    if ($echo == 1) {
        global $post;
        $post_ID = $post->ID;
        $views = (int)get_post_meta($post_ID, ‘views’, true);
        echo number_format($views);
    }
}

第三步:引入jquery库,如果你的主题已有引入,就不用再添加了。

第四步:在footer.php文件body之前添加

<?php if( is_single() ){?>
<script type=’text/javascript’>
/* <![CDATA[ */var v = {"u":"\/ajax.php","id":"<?php the_ID(); ?>"};/* ]]> */
jQuery.ajax({type:"GET",url:v.u,data:"views_id="+v.id+"&action=v"});
</script>
<?php } ?>

第五步:完毕,接下来在需要显示的计数的主循环内添加以下代码即可阅读

<?php views(1);?>

如果小白博主觉得本篇文章太复杂,建议直接使用wp-postviews这个插件,简洁且多功能。

资料来源:http://www.dedewp.com/8153.html

wordpress ajax 翻页实现方法

由于我们可以在后台使用wp query来输出文章列表,所以我们并不需要文章分页的入口,砍掉了分页入口也避免了搜索引擎抓取这些页面。我们只需要在AJAX 执行的过程中向后台传递一个分页参数,就可以返回这个分页上的文章列表。再返回文章列表的时候,我们还需要返回下一分页的页码,当然如果不是最后一页的话。

鉴于wp query有着丰富的参数,我们可以通过转递指定的参数来控制文章列表的输出,使之可以在分类、标签等归档正常使用。

实现方法

例如你的index.php的代码是如下结构

<?php get_header();?>
    <main class="main-content">
        <section class="blockGroup">//注意这个class,需要和下面的匹配
            <?php if (have_posts()):

                while (have_posts()): the_post();

                    get_template_part(‘content’, ‘list’);

                endwhile;
            endif;?>
        </section>
        <nav class="posts-nav u-textAlignCenter">
            <?php echo fa_load_postlist_button();?>//加载更多按钮 
        </nav>
    </main>
<?php get_footer();?>

content-list.php文章结构

<article class="block block–inset block–list">
    <h2 class="block-title post-featured" itemprop="headline">
        <a href="<?php the_permalink();?>"><?php the_title();?></a>
    </h2>
    <div class="block-postMetaWrap u-textAlignCenter">
        <time><?php echo get_the_date(‘Y/m/d’);?></time>
    </div>
    <div class="block-snippet block-snippet–subtitle grap" itemprop="about">
        <?php if(has_post_thumbnail()):?>
            <p class="with-img"><?php the_post_thumbnail( ‘full’ ); ?></p>
            <p><?php echo mb_strimwidth(strip_shortcodes(strip_tags(apply_filters(‘the_content’, $post->post_content))), 0, 220,"…");?></p>
        <?php else : ?>
        <?php the_content(”);?>   
        <?php endif;?>
    </div>
    <div class="block-footer">
        By <?php the_author();?> . In <?php the_category(‘,’);?>.
    </div>
</article>

把下面的代码加入functions.php

function fa_load_postlist_button(){//这是加载更多按钮
    global $wp_query;
    if (2 > $GLOBALS["wp_query"]->max_num_pages) {
        return;
    } else {
        $button = ‘<button id="fa-loadmore" class="button button–primary"’;
        if (is_category()) $button .= ‘ data-category="’ . get_query_var(‘cat’) . ‘"’;

        if (is_author()) $button .=  ‘ data-author="’ . get_query_var(‘author’) . ‘"’;

        if (is_tag()) $button .=  ‘ data-tag="’ . get_query_var(‘tag’) . ‘"’;

        if (is_search()) $button .=  ‘ data-search="’ . get_query_var(‘s’) . ‘"’;

        if (is_date() ) $button .=  ‘ data-year="’ . get_query_var(‘year’) . ‘" data-month="’ . get_query_var(‘monthnum’) . ‘" data-day="’ . get_query_var(‘day’) . ‘"’;

        $button .= ‘ data-paged="2" data-action="fa_load_postlist" data-total="’ . $GLOBALS["wp_query"]->max_num_pages . ‘">加载更多</button>’;

        return $button;
    }
}

function puma_post_section(){//这就是点击加载更多按钮时会刷出来的文章结构,建议和content-list.php的结构保持一致。
    global $post;
    $post_section = ‘<article class="block block–inset block–list"><h2 class="block-title post-featured"><a href="’ . get_permalink() . ‘">’ . get_the_title() . ‘</a></h2>
    <div class="block-postMetaWrap u-textAlignCenter">
        <time>’ . get_the_date(‘Y/m/d’) . ‘</time>
    </div>
    <div class="block-snippet block-snippet–subtitle grap" itemprop="about">’;

    if(has_post_thumbnail()) {
        $post_section .= ‘<p class="with-img">’ . get_the_post_thumbnail() . ‘</p><p>’ . mb_strimwidth(strip_shortcodes(strip_tags(apply_filters(‘the_content’, $post->post_content))), 0, 220,"…") . ‘</p>’;
    } else {
        $post_section .= apply_filters(‘the_content’, get_the_content(”));
    }

    $post_section .= ‘</div>
    <div class="block-footer">
        By ‘ . get_the_author() .’ . In ‘ . get_the_category_list(‘,’) .’.’;
    $post_section .= ‘</div></article>’;
    return $post_section;
}

add_action(‘wp_ajax_nopriv_fa_load_postlist’, ‘fa_load_postlist_callback’);
add_action(‘wp_ajax_fa_load_postlist’, ‘fa_load_postlist_callback’);
function fa_load_postlist_callback(){
    $postlist = ”;
    $paged = $_POST["paged"];
    $total = $_POST["total"];
    $category = $_POST["category"];
    $author = $_POST["author"];
    $tag = $_POST["tag"];
    $search = $_POST["search"];
    $year = $_POST["year"];
    $month = $_POST["month"];
    $day = $_POST["day"];
    $query_args = array(
        "posts_per_page" => get_option(‘posts_per_page’),
        "cat" => $category,
        "tag" => $tag,
        "author" => $author,
        "post_status" => "publish",
        "post_type" => "post",
        "paged" => $paged,
        "s" => $search,
        "year" => $year,
        "monthnum" => $month,
        "day" => $day
    );
    $the_query = new WP_Query( $query_args );
    while ( $the_query->have_posts() ){
        $the_query->the_post();
        $postlist .= puma_post_section();
    }
    $code = $postlist ? 200 : 500;
    wp_reset_postdata();
    $next = ( $total > $paged )  ? ( $paged + 1 ) : ” ;
    echo json_encode(array(‘code’=>$code,’postlist’=>$postlist,’next’=> $next));
    die;
}

剩下的就是加载js代码了,需要加载jquery库,方法就不说了。
jQuery(document).on("click", "#fa-loadmore", function() {
	var _self = jQuery(this),
		_postlistWrap = jQuery('.blockGroup'),
		_button = jQuery('#fa-loadmore'),
		_data = _self.data();
	if (_self.hasClass('is-loading')) {
		return false
	} else {
		_button.html('加载中 o(∩_∩)o');
		_self.addClass('is-loading');
		jQuery.ajax({
			url: '/wp-admin/admin-ajax.php',//注意该文件路径
			data: _data,
			type: 'post',
			dataType: 'json',
			success: function(data) {
				if (data.code == 500) {
					_button.data("paged", data.next).html('加载更多');
					alert('服务器正在努力找回自我  o(∩_∩)o')
				} else if (data.code == 200) {
					_postlistWrap.append(data.postlist);
					if (data.next) {
						_button.data("paged", data.next).html('加载更多')
					} else {
						_button.remove()
					}
				}
				_self.removeClass('is-loading')
			}
		})
	}
});

本功能可完美用户各个文章列表,如果你添加了自定义文章类型则代码需要相应修改。

资料来源:https://fatesinger.com/76920

WordPress Ajax 文章无限加载功能

网上很大一部分实现WordPress AJAX文章翻页,下拉无限加载等等功能的方式都是采用直接请求新页面,还有一部分是对页面做了处理,只输出一部分。今天给大家分享的这个WordPress Ajax 文章无限加载功能,则是采用admin-ajax.php做输出来实现Ajax 文章无限加载的。

下面的代码加到functions.php

add_action(‘wp_ajax_nopriv_ajax_index_post’, ‘ajax_index_post’);
add_action(‘wp_ajax_ajax_index_post’, ‘ajax_index_post’);
function ajax_index_post(){
    $paged = $_POST[“paged”];
    $total = $_POST[“total”];
    $the_query = new WP_Query( array(“posts_per_page”=>get_option(‘posts_per_page’),”post_status”=>”publish”,”post_type”=>”post”,”paged”=>$paged) );
    while ( $the_query->have_posts() ){
        $the_query->the_post();
        get_template_part( ‘content’, get_post_format() );//这里是内容输出,如果你的首页是直接用的代码输出,则直接写在这里,注意PHP的开始结束符
    }
    wp_reset_postdata();
    if ( $total > $paged )    echo ‘<a href=”javascript:;” data-total=”‘.$total.'” data-paged = “‘.($paged + 1).'” class=”show-more m-feed–loader”>show more</a>’;
    die;
}

下面这个是按钮函数,也放到functions.php

function ajax_show_more_button(){
    if( 2 > $GLOBALS[“wp_query”]->max_num_pages){
        return;
    }
    echo ‘<a id=”show-more” href=”javascript:;” data-paged = “2” data-total=”‘.$GLOBALS[“wp_query”]->max_num_pages.'” class=”show-more m-feed–loader”>show more</a>’;
}

直接使用<?php ajax_show_more_button();?>调用,位置就是替换掉你的翻页函数即可。

如果是点击加载,则使用下面的js代码(可以加入你的JS文件中,然后调用)。

jQuery(document).on(“click”, “#show-more”,
function() {
    if (jQuery(this).hasClass(‘is-loading’)) {
        return false;
    }
     else {
        var paged = jQuery(this).data(“paged”),
        total = jQuery(this).data(“total”);
        var ajax_data = {
            action: “ajax_index_post”,
            paged: paged,
            total: total
        };
        jQuery(this).html(‘loading…’).addClass(‘is-loading’)
         jQuery.post(‘/wp-admin/admin-ajax.php’, ajax_data,
        function(data) {
            jQuery(‘#show-more’).remove();
            jQuery(“.layoutSingleColumn”).append(data);//这里是包裹文章的容器名
        });
        return false;
    }
});

如果是下拉无限加载,则使用这个代码

var H = false;
jQuery(window).scroll(function(i) {
    if (jQuery(“#show-more”).length > 0) {
        var q = jQuery(window).scrollTop(),
        p = jQuery(“#show-more”).offset().top,
        $this = jQuery(“#show-more”);
        if (q + jQuery(window).height() >= p && H != true) {
            var paged = $this.data(“paged”),
            total = $this.data(“total”);
            var ajax_data = {
                action: “ajax_index_post”,
                paged: paged,
                total: total
            };
            H = true;
            $this.html(‘loading…’).addClass(‘is-loading’)
             jQuery.post(‘/wp-admin/admin-ajax.php’, ajax_data,
            function(data) {
                jQuery(‘#show-more’).remove();
                H = false;
                jQuery(“.layoutSingleColumn”).append(data);//这里是包裹文章的容器名
            });
            return false;
        }
    }
})

资料来源:http://fatesinger.com/712