Vicuna 主题添加AJAX评论
忙了3个多小时完成了AJAX评论的添加，效果见本博留言部分~
首先感谢已经许久没有更新的 Xiaorsz 同学，虽然很久没有更新了，但是就是翻翻就日志，还是能有很大收获的，这不，我一直想用的AJAX评论效果就被我发现了。
其实这个集成在 wp-threat-comment 里面，以前用嵌套评论的时候启用过一段时间，感觉还不错，至少不用刷新页面看留言效果。不过由于找不到嵌套评论的合适效果，所以决定放弃它了。但是对于AJAX评论还是耿耿于怀。
这个方法详细内容见 使用 jQuery 实现 wordpress 的 Ajax 留言 ，首先对他的辛勤劳动再次表示感谢，内容也基本取自这篇文章。
首先推荐使用 http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ，好处就是当别人访问过同样使用这JS的时候，再次访问你的站点不用再次载入这个文件，这个文件几十K的，载入的话很耗费时间的，这自然会影响首页载入速度。
vicuna 的主题comments是需要修改的。因为他的几个关键部分不带有ID，所以如果用AJAX效果的话找不到。添加的部分主要有以下：
1、查找<span>，添加id=”commentnum”.
2、查找<dl>，添加id=”commentlist”.
第一，编写comments-ajax.php文件。注意该部分最后的<dt id=”comment-<?php echo $comment->comment_ID; ?>”>后的部分用自己主题的 id=”comment-<……来代替。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<?php if ($_SERVER["REQUEST_METHOD"] != "POST") { header('Allow: POST'); header("HTTP/1.1 405 Method Not Allowed"); header("Content-type: text/plain"); exit; } $db_check = true; function kill_data() { return ''; } function check_db() { global $wpdb, $db_check; if($db_check) { // Check DB if(!$wpdb->dbh) { echo('Our database has issues. Try again later.'); } else { echo('We\'re currently having site problems. Try again later.'); } die(); } } ob_start('kill_data'); register_shutdown_function('check_db'); require_once('../../../wp-config.php'); $db_check = false; ob_end_clean(); nocache_headers(); function fail($s) { header('HTTP/1.0 500 Internal Server Error'); echo $s; exit; } $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('请先填写个人信息再发表评论，谢谢.'); } $comment_type = ''; if ( get_option('require_name_email') && !$user->ID ) { if ( 6> strlen($comment_author_email) || '' == $comment_author ) fail('Error: 请填写必要的信息 (name, email).'); elseif ( !is_email($comment_author_email)) fail('请输入有效的Email地址.'); } if ( '' == $comment_content ) fail('Error: 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; 你好像已经说过相同的话了!'); } $commentdata = compact('comment_post_ID', 'comment_author', 'comment_author_email', 'comment_author_url', 'comment_content', 'comment_type', 'user_ID'); $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')); $comment->comment_type = 'comment'; $comment_index = $_POST['comment_count'] + 1; ?> <dt id="comment-<?php echo $comment->comment_ID; ?>"> //添加自己主题评论部分的代码</dt> |
第二，comments.js的实现。该部分当中的commentlist就是我们添加的log部分的ID。如果需要的话可以把这部分整合到自己的JS里。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
if ($('#commentform').length) { $('#commentform').submit(function(){ jQuery.ajax({ url: 'comments-ajax.php', // !这里要改为 comments-ajax.php 文件的位置 data: $('#commentform').serialize(), // 从表单中获取数据 type: 'POST', // 设置请求类型为 ‘POST’，默认为 ‘GET’ beforeSend: function() { $('#commenterror').hide(); $('#commentload').show(); }, error: function(request) { $('#commentload').hide(); $('#commenterror').show().html(request.responseText); }, success: function(data) { $('textarea').each(function(){ this.value=''; }); $('#commenterror').hide().html(); $('#comments').html(parseInt($('#comments').html()) + 1); if (!$('#commentlist').length) { $('#pinglist').before('<ul id="commentlist"></ul>'); } $('#commentlist').append(data); // 追加留言数据 $('#commentform :input').attr('disabled', true); $('#commentformbox').fadeOut(1000); $('#commentload').hide(); setTimeout(function() { // 提交留言 15 秒后方可再次提交新留言 $('#commentform :input').removeAttr('disabled'); $('#commentformbox').fadeIn(1000); }, 15000); } }); return false; }); } |
之后是评论楼层的显示，如果不想刷新后看到的话可以在success: function(data)函数体内部添加
$(‘#commentnum’).text(parseInt(jQuery(‘#commentnum’).html()) + 1);
$(‘.ajaxcomments’).text($(‘#commentnum’).text()).removeAttr(“class”);
记住commentnum是自己定义的楼层显示部分id。
第三，在footer或者header部分加载jQuery 框架和以上的JS。完成。
PS：关于里面AJAX的等待条，其实有网站可以在线生成的，在这里~~http://www.ajaxload.info/。用起来很方便~喜欢的同学可以自己做一个~
转载请注明转自：Vicuna 主题添加AJAX评论
我来试试。
评论功能不错的说
前来学一下。
测试一下。