尘风 菜单

查看所有标记的代码

固定连接:

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

分类:WordPress
发表评论 • 1,221 次围观

在博客上添加评论功能是允许读者对您的文章发表评论的最好方法。此外,您还可以通过在评论部分添加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);

?>

 

屏幕截图

1.用户需要填写评论表格的所有必填字段,如姓名,邮箱,评论,网址(可选)等,以便成功提交评论表。

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

2.一旦用户点击“发布评论”按钮,则成功消息将显示在屏幕上。

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

3.现在管理员可以通过点击右上角的“回复”选项直接留言,如下图所示。

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

4.一旦发布回复,它将出现在与下面的图像相同的前端。

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

结论

希望在这个教程中,你会得到一个简单的方法来定制ajaxify WordPress评论部分。

请分享你对这篇文章的想法,折腾万岁。

来源:Learn How to Add Ajax in WordPress Comment

  • Feeey个人博客

    博主最近没怎么更新啊,我来转转。

  • 文明上网,礼貌发言!可使用HTML代码/超链接。