WordPress的主题添加AJAX无刷新提交评论功能

有时主题在提交评论后会刷新整个网页才可获取资源，别人家的都不是这样的，以下可以改善评论后无刷新即可获取资源。

在function.php文件加入以下代码

<?php
define('AC_VERSION','2.0.0');
 
if ( version_compare( $GLOBALS['wp_version'], '4.4-alpha', '<' ) ) {
wp_die('请升级到4.4以上版本');
}
 
if(!function_exists('fa_ajax_comment_scripts')) :
 
    function fa_ajax_comment_scripts(){
        if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
            wp_enqueue_script( 'comment-reply' );
        }
        wp_enqueue_style( 'ajax-comment', get_template_directory_uri() . '/ajax-comment/app.css', array(), AC_VERSION );
        wp_enqueue_script( 'ajax-comment', get_template_directory_uri() . '/ajax-comment/app.js', array( 'jquery' ), AC_VERSION , true );
        wp_localize_script( 'ajax-comment', 'ajaxcomment', array(
            'ajax_url'   => admin_url('admin-ajax.php'),
            'order' => get_option('comment_order'),
            'formpostion' => 'bottom', 
//默认为bottom，如果你的表单在顶部则设置为top。
        ) );
    }
 
endif;
 
if(!function_exists('fa_ajax_comment_err')) :
 
    function fa_ajax_comment_err($a) {
        header('HTTP/1.0 500 Internal Server Error');
        header('Content-Type: text/plain;charset=UTF-8');
        echo $a;
        exit;
    }
 
endif;
 
if(!function_exists('fa_ajax_comment_callback')) :
 
    function fa_ajax_comment_callback(){
        $comment = wp_handle_comment_submission( wp_unslash( $_POST ) );
        if ( is_wp_error( $comment ) ) {
            $data = $comment->get_error_data();
            if ( ! empty( $data ) ) {
            fa_ajax_comment_err($comment->get_error_message());
            } else {
                exit;
            }
        }
        $user = wp_get_current_user();
        do_action('set_comment_cookies', $comment, $user);
        $GLOBALS['comment'] = $comment; 
//根据你的评论结构自行修改，如使用默认主题则无需修改
        ?>
        <li <?php comment_class(); ?>>
            <article class="comment-body">
                <footer class="comment-meta">
                    <div class="comment-author vcard">
                        <?php echo get_avatar( $comment, $size = '56')?>
                        <b class="fn">
                            <?php echo get_comment_author_link();?>
                        </b>
                    </div>
                    <div class="comment-metadata">
                        <?php echo get_comment_date(); ?>
                    </div>
                </footer>
                <div class="comment-content">
                    <?php comment_text(); ?>
                </div>
            </article>
        </li>
        <?php die();
    }
 
endif;
 
add_action( 'wp_enqueue_scripts', 'fa_ajax_comment_scripts' );
add_action('wp_ajax_noprjiv_ajax_comment', 'fa_ajax_comment_callback');
add_action('wp_ajax_ajax_comment

 新建app.js，加入以下代码

jQuery(document).ready(function(jQuery) {
    var __cancel = jQuery('#cancel-comment-reply-link'),
        __cancel_text = __cancel.text(),
        __list = 'comment-list';
//your comment wrapprer
    jQuery(document).on("submit", "#commentform", function() {
        jQuery.ajax({
            url: ajaxcomment.ajax_url,
            data: jQuery(this).serialize() + "&action=ajax_comment",
            type: jQuery(this).attr('method'),
            beforeSend: faAjax.createButterbar("提交中...."),
            error: function(request) {
                var t = faAjax;
                t.createButterbar(request.responseText);
            },
            success: function(data) {
                jQuery('textarea').each(function() {
                    this.value = ''
                });
                var t = faAjax,
                    cancel = t.I('cancel-comment-reply-link'),
                    temp = t.I('wp-temp-form-div'),
                    respond = t.I(t.respondId),
                    post = t.I('comment_post_ID').value,
                    parent = t.I('comment_parent').value;
                if (parent != '0') {
                    jQuery('#respond').before('<ol class="children">' + data + '</ol>');
                } else if (!jQuery('.' + __list ).length) {
                    if (ajaxcomment.formpostion == 'bottom') {
                        jQuery('#respond').before('<ol class="' + __list + '">' + data + '</ol>');
                    } else {
                        jQuery('#respond').after('<ol class="' + __list + '">' + data + '</ol>');
                    }
 
                } else {
                    if (ajaxcomment.order == 'asc') {
                        jQuery('.' + __list ).append(data); 
// your comments wrapper
                    } else {
                        jQuery('.' + __list ).prepend(data); 
// your comments wrapper
                    }
                }
                t.createButterbar("提交成功");
                cancel.style.display = 'none';
                cancel.onclick = null;
                t.I('comment_parent').value = '0';
                if (temp && respond) {
                    temp.parentNode.insertBefore(respond, temp);
                    temp.parentNode.removeChild(temp)
                }
            }
        });
        return false;
    });
    faAjax = {
        I: function(e) {
            return document.getElementById(e);
        },
        clearButterbar: function(e) {
            if (jQuery(".butterBar").length > 0) {
                jQuery(".butterBar").remove();
            }
        },
        createButterbar: function(message) {
            var t = this;
            t.clearButterbar();
            jQuery("body").append('<div class="butterBar butterBar--center"><p class="butterBar-message">' + message + '</p></div>');
            setTimeout("jQuery('.butterBar').remove()", 3000);
        }
    };
});

新建app.css，加入以下代码

.butterBar{
    margin-left:36%;
    max-width:640px;
    position:fixed;
    text-align:center;
    top:0;
    width:58%;
    z-index:800
}
.butterBar--center{
    left:50%;
    margin-left:-320px
}
.butterBar-message{
    background:rgba(255,255,255,0.97);
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    box-shadow:0 1px 1px rgba(0,0,0,0.25),0 0 1px rgba(0,0,0,0.35);
    display:inline-block;
    font-size:14px;
    margin-bottom:0;
    padding:12px 25px

新建文件夹Ajax的评论，将app.js和app.css放入其中。将文件夹Ajax的评论放在主题根目录。 其中布局需要根据自身主题进行微调。