
本文参考了Xiaorsz的使用 jQuery 实现 wordpress 的 Ajax 留言。
前几天,为了提高评论体验,为了减轻服务器负担,我为主题添加了AJAX提交评论功能,现在分享一下方法。
首先需要在主题的function.php文件里添加一段函数:
< ?phpfunction fail($s) { header('HTTP/1.0 500 Internal Server Error'); echo $s; exit;}function ajax_comment(){if($_POST['action'] == 'ajax_comment') { global $wpdb, $db_check; // Check DB if(!$wpdb->dbh) { echo('Our database has issues. Try again later.'); die(); }nocache_headers();$comment_post_ID = (int) $_POST['comment_post_ID'];$status = $wpdb->get_row("SELECT post_status, comment_status FROM $wpdb->posts WHERE ID = '$comment_post_ID'");if ( empty($status->comment_status) ) { do_action('comment_id_not_found', $comment_post_ID); fail('The post you are trying to comment on does not currently exist in the database.');} elseif ( 'closed' == $status->comment_status ) { do_action('comment_closed', $comment_post_ID); fail('Sorry, comments are closed for this item.');} elseif ( in_array($status->post_status, array('draft', 'pending') ) ) { do_action('comment_on_draft', $comment_post_ID); fail('The post you are trying to comment on has not been published.');}$comment_author = trim(strip_tags($_POST['author']));$comment_author_email = trim($_POST['email']);$comment_author_url = trim($_POST['url']);$comment_content = trim($_POST['comment']);// If the user is logged in$user = wp_get_current_user();if ( $user->ID ) { $comment_author = $wpdb->escape($user->display_name); $comment_author_email = $wpdb->escape($user->user_email); $comment_author_url = $wpdb->escape($user->user_url); if ( current_user_can('unfiltered_html') ) { if ( wp_create_nonce('unfiltered-html-comment_' . $comment_post_ID) != $_POST['_wp_unfiltered_html_comment'] ) { kses_remove_filters(); // start with a clean slate kses_init_filters(); // set up the filters } }} else { if ( get_option('comment_registration') ) fail('Sorry, you must be logged in to post a comment.');}$comment_type = '';if ( get_option('require_name_email') && !$user->ID ) { if ( 6> strlen($comment_author_email) || '' == $comment_author ) fail('Sorry: please fill the required fields (name, email).'); elseif ( !is_email($comment_author_email)) fail('Sorry: please enter a valid email address.');}if ( '' == $comment_content ) fail('Sorry: please type a comment.');// Simple duplicate check$dupe = "SELECT comment_ID FROM $wpdb->comments WHERE comment_post_ID = '$comment_post_ID' AND ( comment_author = '$comment_author' ";if ( $comment_author_email ) $dupe .= "OR comment_author_email = '$comment_author_email' ";$dupe .= ") AND comment_content = '$comment_content' LIMIT 1";if ( $wpdb->get_var($dupe) ) { fail('Duplicate comment detected; it looks as though you/'ve already said that!');}$commentdata = compact('comment_post_ID', 'comment_author', 'comment_author_email', 'comment_author_url', 'comment_content', 'comment_type', 'user_ID');if( !$user->ID ){ $result_set = $wpdb->get_results("SELECT display_name, user_email FROM $wpdb->users WHERE display_name = '" . $comment_author . "' OR user_email = '" . $comment_author_email . "'"); if ($result_set) { if ($result_set[0]->display_name == $comment_author){ fail( __('Error: you are not allowed to use the nickname that you entered.if you are the administrator you hava to login to comment.','philna2') ); } else { fail( __('Error: you are not allowed to use the email that you entered.if you are the administrator you hava to login to comment.','philna2') ); } }}$comment_id = wp_new_comment( $commentdata );$comment = get_comment($comment_id);if( !$user->ID ){ setcookie('comment_author_' . COOKIEHASH, $comment->comment_author, time() + 30000000, COOKIEPATH, COOKIE_DOMAIN); setcookie('comment_author_email_' . COOKIEHASH, $comment->comment_author_email, time() + 30000000, COOKIEPATH, COOKIE_DOMAIN); setcookie('comment_author_url_' . COOKIEHASH, clean_url($comment->comment_author_url), time() + 30000000, COOKIEPATH, COOKIE_DOMAIN);}@header('Content-type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));?> //这里需要粘贴你的评论框架代码,不过相关的调用代码有所变化: //评论ID:$comment->comment_ID //评论者名字:$comment->comment_author //判断评论者是否填写了网站地址:$comment->get_comment_author_url //评论者URL:$comment->comment_author_url //评论时间:mysql2date(__('F jS, Y'),$comment->comment_date) //评论者e-mail:$comment->comment_author_email //评论内容$comment->comment_content< ?php die();}}add_action('init', 'ajax_comment');//添加AJAX评论钩子?>
如果处理评论内容里的换行符的话,$comment->comment_content需做以下处理:
< ?php$aj_order = array("/r/n", "/n", "/r");$aj_comment_content = str_replace($aj_order,'<br>',$comment->comment_content);echo $aj_comment_content;?>
用jQuery写提交评论时的脚本,这也是关键的部分:
jQuery(document).ready(function() { if (jQuery('#commentform').length) { jQuery('#commentform').submit(function(){ //ID为 commentform 的表单提交时发生的函数,也就是整个留言输入框 form 的ID。 var ajaxCommentsURL = window.location.href; jQuery.ajax({ url: ajaxCommentsURL, data: jQuery('#commentform').serialize()+'&action=ajax_comment', type: 'POST', beforeSend: function() { jQuery('#commenterror').hide(); var submit='<div id="commentload" style="display: none;background: url("img/spinner.gif") no-repeat scroll 0 50%;margin: 0 auto;">Submitting Comment...</div>'; //创建名为 submit 的字符串,稍后插入,这里的样式大家自己根据需要定义,那个背景图片自己去下哈。 var error='<div id="commenterror" style="display: none;margin: 0 auto;">Posted comment fail.</div>'; //创建名为 error 的字符串 jQuery('#comments').after(submit); // 在ID为 comments 的元素后插入刚定义的 submit jQuery('#comments').after(error); // 同样插入刚定义的 error jQuery('#commentload').slideDown(); // 让submit 向下滑出 }, error: function(request) { //发生错误时 jQuery('#commentload').hide(); //隐藏 submit jQuery('#commenterror').show("slow").html(request.responseText); //显示 error }, success: function(data) { jQuery('textarea').each(function(){ this.value=''; }); jQuery('#commenterror').hide().html(); if (!jQuery('#thecomments').length) { jQuery('#pinglist').before('<ol id="thecomments"></ol>');} jQuery('#thecomments').append(data); //向ID为 thecomments 的元素添加数据,也就是整个 ol 或 ul var new_comment = jQuery('#thecomments li:last').hide(); //让最新添加的数据隐藏 new_comment.slideDown(1000); //再显示,这里是为了实现滑出的效果,不想要也可以直接显示 jQuery('#commentform:input').attr('disabled', true); jQuery('#commentload').slideUp("slow"); jQuery('#messagebox').slideUp("slow"); //这是针对我模版而加的,因为我模版在没有留言时会有个 nocomment 的元素,我要让添加一条留言后他自动隐藏,要不然会矛盾,呵呵,这个可以自行选择要或不要 setTimeout(function() { jQuery('#commentform:input').removeAttr('disabled'); }, 10000); //这里是设置10秒之后才可以再次留言,自行设置,单位毫秒。 } }); return false; } );}})
注意:
脚本里的对象ID要对应主题里的评论相关框架的ID。
后续步骤:
为commentload,commenterror写CSS。
有待完善的地方:
AJAX提交后的评论序号显示为1
人吐槽 | 人点赞 |
发表评论