了解如何在WordPress评论中添加Ajax

滑动继续阅读⇓

在博客上添加评论功能是允许读者对你的文章发表评论的最好方法。此外，你还可以通过在评论部分添加Ajaxify功能来提高读者体验。

所以，你需要添加Ajaxify功能到你的WordPress网站！

阅读本文后，你将获得一个绝对的解决方案，在你的WordPress网站上添加Ajax评论会话。

WordPress评论中的Ajaxify功能

当你在WordPress中提交评论表单时，默认情况下会重新加载整个页面。但是当你在WordPress主题的评论表单中添加Ajax功能后，无需重新加载页面即可提交或更新评论内容。

为什么需要Ajaxify WordPress评论？

在评论形式中使用Ajax功能这在许多方面都是有利的-

通过在不重新加载页面的情况下验证和添加评论，提高评论表单的可用性。
快速响应用户。
它减少服务器资源的使用，而不在每个评论提交时加载整个页面。
使你的WordPress网站更有效率。

你可能认为WordPress已经提供了一些最好的插件，例如：WordPress Ajaxify Comments 的ajaxify WordPress评论功能，那么为什么需要做这样繁琐的编码。

那就以此教程来证明上述情况。你可以根据你的需要来定制代码，并使用jQuery添加更多功能。此外，你可以使用任何主题中的代码，而不依赖于任何插件。

另外，每个插件都会给你的网站增加一点复杂性。安装过多的插件会减慢你的网站，并影响其效果。

因此，你可以通过以下代码片段在WordPress评论部分轻松实现ajax评论功能。

创建一个名为 ajaxcomments.js 的新的JavaScript文件，并将其保存在WordPress主题的js文件夹下。此文件包含以下函数的代码-

了解如何在WordPress评论中添加Ajax

JavaScript文件：ajaxcomments.js

查找评论表单。
在表单前添加信息面板。
序列化和可变量存储的表单数据。
添加状态消息。
从评论表单中提取操作网址。
发布表单数据和url函数 ajaxify_comments_jaya 到 function.php 文件
从上面的函数返回的输出捕获并显示在前端。

/** Author InkThemes ***/
jQuery('document').ready(function($){
var commentform=$('#commentform'); // find the comment form
commentform.prepend('<div id="comment-status" ></div>'); // add info panel before the form to provide feedback or errors
var statusdiv=$('#comment-status'); // define the info panel
var list ;
$('a.comment-reply-link').click(function(){
list = $(this).parent().parent().parent().attr('id');
});

commentform.submit(function(){
//serialize and store form data in a variable
var formdata=commentform.serialize();
//Add a status message
statusdiv.html('<p>Processing...</p>');
//Extract action URL from commentform
var formurl=commentform.attr('action');
//Post Form with data

$.ajax({
type: 'post',
url: formurl,
data: formdata,
error: function(XMLHttpRequest, textStatus, errorThrown)
{
statusdiv.html('<p class="ajax-error" >You might have left one of the fields blank, or be posting too quickly</p>');
},
success: function(data, textStatus){
if(data == "success" || textStatus == "success"){
statusdiv.html('<p class="ajax-success" >Thanks for your comment. We appreciate your response.</p>');
//alert(data);

if($("#commentsbox").has("ol.commentlist").length > 0){
if(list != null){
$('div.rounded').prepend(data);
}
else{
$('ol.commentlist').append(data);
}
}
else{
$("#commentsbox").find('div.post-info').prepend('<ol class="commentlist"> </ol>');
$('ol.commentlist').html(data);
}
}else{
statusdiv.html('<p class="ajax-error" >Please wait a while before posting your next comment</p>');
commentform.find('textarea[name=comment]').val('');
}
}
});
return false;
});
});

PHP文件：function.php

function.php 是一个很实用的ajax评论功能文件，可以用来添加功能和扩展主题和WordPress安装功能。

可以在你的WordPress的选定的主题文件夹下找到此文件。因此，在 function.php 文件的末尾包含下面的代码段。

代码包括以下函数 –

ajaxcomments_load_js() :

在网页加载的主题中包含JavaScript文件。

ajaxify_comments_jaya() :

这是实现ajaxify功能的基本功能，包括检查评论状态并通知管理员有新评论的代码。

当有访客提交评论时，用户将获得成功消息。并且没有管理员批准，评论将不会在前端发布。

代码会创建一个div来显示评论与作者gravatar图像，作者名称，评论时间和回复选项，类似于下面的图像。

了解如何在WordPress评论中添加Ajax

当你将必填字段保留为空时，你会收到一条错误消息，与下图所示相同。

了解如何在WordPress评论中添加Ajax

代码：

<?php

// Include Ajaxscript - Add this code at the end of the function.php file of your selected WordPress theme.

/*
Ajaxify Comments -> hooks into your comment form and adds AJAX functionality - no page reloads required.
When the comment form is submitted, the code will sends the data to the WordPress backend without reloading the entire page.
You can customize this code according to your requirement.
Author: InkThemes
*/

add_action('init', 'ajaxcomments_load_js');

function ajaxcomments_load_js() {
//wp_enqueue_script('ajaxcomments', get_stylesheet_directory_uri().'js/ajaxcomments.js');

wp_enqueue_script('ajaxcomments', get_template_directory_uri() . "/js/ajaxcomments.js", array('jquery'));
}

function ajaxify_comments_jaya($comment_ID, $comment_status) {
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//If AJAX Request Then
switch ($comment_status) {
case '0':
//notify moderator of unapproved comment
wp_notify_moderator($comment_ID);
case '1': //Approved comment
echo "success";
$commentdata = &get_comment($comment_ID, ARRAY_A);
//print_r( $commentdata);
$permaurl = get_permalink( $post->ID );
$url = str_replace('http://', '/', $permaurl);

if($commentdata['comment_parent'] == 0){
$output = '<li class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-' . $commentdata['comment_ID'] . '">
<div id="div-comment-' . $commentdata['comment_ID'] . '" class="comment-body">
<div class="comment-author vcard">'.
get_avatar($commentdata['comment_author_email'])
.'<cite class="fn">' . $commentdata['comment_author'] . '</cite> <span class="says">says:</span>
</div>

<div class="comment-meta commentmetadata"><a href="http://localhost/WordPress_Code/?p=1#comment-'. $commentdata['comment_ID'] .'">' .
get_comment_date( 'F j, Y \a\t g:i a', $commentdata['comment_ID']) .'</a>&nbsp;&nbsp;';
if ( is_user_logged_in() ){
$output .= '<a class="comment-edit-link" href="'. home_url() .'/wp-admin/comment.php?action=editcomment&amp;c='. $commentdata['comment_ID'] .'">
(Edit)</a>';
}
$output .= '</div>
<p>' . $commentdata['comment_content'] . '</p>
<div class="reply">
<a class="comment-reply-link" href="'. $url . '&amp;replytocom='. $commentdata['comment_ID'] .'#respond"
onclick="return addComment.moveForm(&quot;div-comment-'. $commentdata['comment_ID'] .'&quot;, &quot;'. $commentdata['comment_ID'] . '&quot;, &quot;respond&quot;, &quot;1&quot;)">Reply</a>
</div>
</div>
</li>' ;

echo $output;

}
else{

$output = '<ul class="children"> <li class="comment byuser comment-author-admin bypostauthor even depth-2" id="comment-' . $commentdata['comment_ID'] . '">
<div id="div-comment-' . $commentdata['comment_ID'] . '" class="comment-body">
<div class="comment-author vcard">'.
get_avatar($commentdata['comment_author_email'])
.'<cite class="fn">' . $commentdata['comment_author'] . '</cite> <span class="says">says:</span> </div>

<div class="comment-meta commentmetadata"><a href="http://localhost/WordPress_Code/?p=1#comment-'. $commentdata['comment_ID'] .'">' .
get_comment_date( 'F j, Y \a\t g:i a', $commentdata['comment_ID']) .'</a>&nbsp;&nbsp;';
if ( is_user_logged_in() ){
$output .= '<a class="comment-edit-link" href="'. home_url() .'/wp-admin/comment.php?action=editcomment&amp;c='. $commentdata['comment_ID'] .'">
(Edit)</a>';
}

$output .= '</div>
<p>' . $commentdata['comment_content'] . '</p>
<div class="reply">
<a class="comment-reply-link" href="'. $url .'&amp;replytocom='. $commentdata['comment_ID'] .'#respond"
onclick="return addComment.moveForm(&quot;div-comment-'. $commentdata['comment_ID'] .'&quot;, &quot;'. $commentdata['comment_ID'] . '&quot;, &quot;respond&quot;, &quot;1&quot;)">Reply</a>
</div>
</div>
</li></ul>' ;

echo $output;
}

$post = &get_post($commentdata['comment_post_ID']);
wp_notify_postauthor($comment_ID, $commentdata['comment_type']);
break;
default:
echo "error";
}
exit;
}
}

add_action('comment_post', 'ajaxify_comments_jaya', 25, 2);

?>