当前位置: 首页 >wordpress

WordPress 模板制作笔记评论添加ajax分页(非插件)

wordpress 2015-8-11 阅读量: 418 TAG:

首先你需要下载comments-ajax.js和comments-ajax.php[点此下载]放到您的主题根目录下面,然后打开您的主题根目录下面的comments.php(评论模板),删除或注释掉原有代码,粘入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="comments" class="comments_box">
 <?php ?>
 <?php if(have_comments()): ?>
 <h2 class="comments_title">
 <?php printf( _n( '共 1 条评论', '共 %1$s 条评论', get_comments_number(), 'zihan-blog' ),number_format_i18n(get_comments_number()));?>
 </h2>
 <ol class="comment_list">
 <?php wp_list_comments(array('callback'=>'get_allcomment','style'=>'ol')); ?>
 </ol>
 <nav id="comment-nav-below" class="content_page" role="navigation">
 <?php paginate_comments_links('prev_text=«新一点的评论&next_text=旧一点的评论»');?>
 </nav>
 <?php if (!comments_open()&&get_comments_number()): ?>
 <p class="nocomments"><?php _e('评论功能已关闭','zihan-blog'); ?></p>
 <?php endif; ?>
 <?php endif;?>
 <?php comment_myform(); ?>
</div>

然后在主函数中加入以下代码:

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
remove_filter('comment_text', 'make_clickable', 9);
//评论
if (!function_exists('get_allcomment')) :
 function get_allcomment( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment;
 switch ( $comment->comment_type ) :
 case 'pingback' :
 case 'trackback' :
 // Display trackbacks differently than normal comments.
 ?>
 <li class="comments" id="comment-<?php comment_ID(); ?>">
 <p><?php _e( 'Pingback:', 'zihan-blog' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link('(Edit)', '<span class="edit-link">', '</span>' ); ?></p>
 <?php
 break;
 default :
 // Proceed with normal comments.
 global $post;
 ?>
 <li class="comments" id="li-comment-<?php comment_ID(); ?>">
 <div id="comment-<?php comment_ID(); ?>" class="comment_author">
 <?php
echo get_avatar($comment, 40);
printf( '<cite>%1$s %2$s</cite>',
get_comment_author_link(),
 ($comment->user_id === $post->post_author) ? '<span>(文章作者)</span>':'');
printf( '<time pubdate="%3$s" class="date">%3$s</time>',
esc_url(get_comment_link($comment->comment_ID)),
get_comment_time('c'),
sprintf('%1$s %2$s',get_comment_date(),get_comment_time()));
 ?>
 <?php if ( '0' == $comment->comment_approved ) : ?>
 <span class="comment_con_sh"><?php _e('[ 等待审核 ]','zihan-blog'); ?></span>
 <?php endif; ?>
 <span class="comment_reply">
 <?php edit_comment_link('编辑','',''); ?>
 <?php comment_reply_link( array_merge($args,array('reply_text' => '回复', 'depth' => $depth,'max_depth' => $args['max_depth'] ))); ?>
 </span>
<section class="comment_con">
<?php comment_text(); ?>
</section>
 </div>
<?php
break;
endswitch;
}
endif;
//评论表单
function comment_myform($args = array(),$post_id = null){
 global $id;
 if (null===$post_id)
$post_id = $id;
 else
$id = $post_id;
$commenter = wp_get_current_commenter();
$user = wp_get_current_user();
$user_identity = $user->exists() ? $user->display_name : '';
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields = array(
 'author' => '<p><input class="placeholder" id="author" name="author" type="text" value="昵称 *" size="30"' . $aria_req . ' /></p>',
 'email' => '<p><input class="placeholder" id="email" name="email" type="email" value="邮箱 *" size="30"' . $aria_req . ' /></p>',
 'url' => '<p><input class="placeholder" id="url" name="url" type="url" value="个人网站" size="30" /></p>',
 );
$required_text = sprintf(' ' .'必填字段 %s', '<span class="required">*</span>' );
$defaults = array(
 'fields' => apply_filters( 'comment_form_default_fields', $fields ),
 'comment_field' => '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
 'must_log_in' => '<p class="must_login">' . sprintf('您必须 <a href="%s">登录</a> 以后才能发表评论', wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
 'logged_in_as' => '<p class="logged_in_as">' . sprintf('您好,<a href="%1$s">%2$s</a>。 <a href="%3$s" >[ 退出 ]</a>' , get_edit_user_link(), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
 'comment_notes_before' => '<p class="comment_notes">您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。' . ( $req ? $required_text : '' ) . '</p>',
 'id_form' => 'commentform',
 'id_submit' => 'submit',
 'title_reply' => '发表评论',
 'title_reply_to' => '发表评论 %s',
 'cancel_reply_link'=> '取消评论',
 'label_submit' => '发表评论',
 );
$args = wp_parse_args( $args, apply_filters( 'comment_form_defaults', $defaults ) );
 ?>
 <?php if ( comments_open( $post_id ) ) : ?>
 <?php do_action( 'comment_form_before' ); ?>
 <div id="respond" class="respond">
 <h2 id="reply-title" class="comments_title"><?php comment_form_title( $args['title_reply'], $args['title_reply_to'] ); ?> <small><?php cancel_comment_reply_link( $args['cancel_reply_link'] ); ?></small></h2>
 <?php if ( get_option( 'comment_registration' ) && !is_user_logged_in() ) : ?>
 <?php echo $args['must_log_in']; ?>
 <?php do_action( 'comment_form_must_log_in_after' ); ?>
 <?php else : ?>
 <form action="<?php echo site_url( '../../../wp-includes/wp-comments-post.php' ); ?>" method="post" id="<?php echo esc_attr( $args['id_form'] ); ?>">
 <?php do_action( 'comment_form_top' ); ?>
 <?php if ( is_user_logged_in() ) : ?>
 <?php echo apply_filters( 'comment_form_logged_in', $args['logged_in_as'], $commenter, $user_identity ); ?>
 <?php do_action( 'comment_form_logged_in_after', $commenter, $user_identity ); ?>
 <?php else : ?>
 <?php echo $args['comment_notes_before']; ?>
 <?php
do_action( 'comment_form_before_fields' );
 foreach ( (array) $args['fields'] as $name => $field ) {
echo apply_filters( "comment_form_field_{$name}", $field ) . "\n";
 }
do_action( 'comment_form_after_fields' );
 ?>
 <?php endif; ?>
 <?php echo apply_filters( 'comment_form_field_comment', $args['comment_field'] ); ?>
 <?php echo $args['comment_notes_after']; ?>
 <input name="submit" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" class="commentsubmit" />
 <label class="comment_mail_notify"><input type="checkbox" checked="checked" name="comment_mail_notify" tabindex="7">有人回复时邮件通知我</label>
 <?php comment_id_fields( $post_id ); ?>
 <?php do_action( 'comment_form', $post_id ); ?>
 </form>
<?php endif; ?>
</div>
 <?php do_action( 'comment_form_after' ); ?>
 <?php else : ?>
 <?php do_action( 'comment_form_comments_closed' ); ?>
 <?php endif; ?>
 <?php
 }

然后在style.css添加以下代码:

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
.comments_box{width:100%;float: left;font-size: 12px;margin-top: 15px;}
.comments_title{margin: 15px 0;width:100%;font-size: 18px;line-height: 30px;font-family:"Microsoft YaHei";font-weight: 700;}
.comments_title small{font-size: 12px;font-weight: 400;margin-left:5px;color:#c00;}
.comments_box ol{list-style: none;}
.comments{margin:12px 0 0 0;width:100%; padding:12px 0 2px 0; border-top:1px dotted #e5e5e5;line-height:24px; overflow:hidden;}
.comment_author img{float:left;margin:4px 10px 0 0; height: 40px; width: 40px;}
.comment_author cite{font-style:normal; margin-right:5px; color:#000;font-weight: 700;}
.comment_author cite span{font-weight: 400;color:#666;}
.comment_author cite.user{padding-left:18px; }
.comment_author time.date{color:#ccc;}
.comment_author span.floor{float:right;color: #ccc;}
.comment_content{margin-left:60px;}
.comment_con_sh{margin-left:10px;color:#da4f49;}
.comment_con{display: block;margin-left:50px;word-break: break-all;text-align: justify;text-justify: inter-ideograph;}
.comment_content em{font-style:normal; font-weight:bold; margin-right:5px;}
.comment_reply{margin-left:5px;}
.comment_reply a{margin-left:5px; line-height:1;color:#999;}
.comment_reply a:hover{color:#da4f49;text-decoration:underline;}
.comment_con p{font-size: 14px;color:#333;}
.respond{width:100%;float: left;border-top:solid 1px #ddd;margin-top:20px;}
.respond p{position: relative;width:100%;}
.respond p input{height:18px;width: 200px;padding:7px 10px;margin:5px 0;line-height:18px;}
.respond p input, .respond textarea{border: 1px solid #ddd;background-color: #fafafa;}
.respond textarea{width:97%;;margin:5px 0 10px 0;padding:1%;}
ol.children{margin-left:50px;}
.comment_mail_notify{float: right;font-size: 12px;color: #999;margin-top:14px;line-height: 14px!important;+margin-top:-38px;}
.comment_mail_notify input{float: left;margin:0 5px 0 0;+margin-top:-5px;}

下载css中用到的素材图片 comments-img.zip
至此,所有工作完成,快试试吧!
下面我们将说明如何通过非插件的方式为wordpress主题加入ajax评论分页功能。
上面我们提到了非插件如何为wordpress主题添加ajax评论功能,现在我们来实现非插件为wordpress主题评论添加ajax分页功能,分两部分,分别说明传统ajax分页和瀑布流分页两种方式的实现,请查看下方评论分页功能。
1. 传统ajax分页。
假设您已经完成了上一节的操作(当然如果没有也没有关系),在您的主题中找到comments.php中的分页部分,一般为paginate_comments_links()函数。

1
2
3
<nav>
    <?php paginate_comments_links('……');?>
</nav>

替换为:

1
2
3
<nav id="comment-nav-below" class="content_page" role="navigation">
 <?php paginate_comments_links('prev_text=«新一点的评论&next_text=旧一点的评论»');?>
</nav>

在footer.php的jQuery库(如果主题中没有引用jQuery库,需要单独引入)后面加入以下代码:

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
<script>
$(function(){
commentAjaxNav("default");
});
 
/**
** 评论ajax分页函数,加入了对瀑布流的支持,如果不需要瀑布流,可删除对应的代码
**/

function commentAjaxNav(type){
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
 var $loading='<div id="loading-comments"></div>';
 if(type=="default"){
$(".comments_title").after($loading);
$('#comment-nav-below,.comment_list').remove();
$("body,html").scrollTop($(".comments_title").offset().top-10);
 }else{
$("#comment-nav-below").before($loading);
 }
$(document).on('click', '#comment-nav-below a', function(e) {
e.preventDefault();
$.ajax({
type: "GET",
url: $(this).attr('href'),
beforeSend: function() {
$('#loading-comments').show();
 },
dataType: "html",
success: function(out) {
result = $(out).find('.comment_list');
nextlink = $(out).find('#comment-nav-below');
$('#loading-comments').hide();
 if(type=="default"){
$('#loading-comments').after(result.fadeIn(800));
 }else{
$('.comment_list').append(result.html());
 }
$('#comment-nav-below').remove();
$('.comment_list').after(nextlink);
 
 }
 });
 });
}
</script>

下面我们为分页添加css代码,在style.css中加入如下代码:

1
2
3
4
#loading-comments{display:none;height:80px;background:url(img/comments-loading.gif) no-repeat center center;}
.content_page{margin: 5px 20px;font-size: 13px;background-color: #F4FCFF;background-color: white;height: 36px;line-height: 36px;text-align: center;overflow: hidden;padding: 1em 4px 4px;}
.content_page a{padding: 3px 8px;margin: 2px;text-decoration: none;}
.content_page a.current, .content_page a:hover{font-weight: 400;color: white;background-color: #D14836;}

到这里,传统的ajax评论分页就做好了。

2. 瀑布流分页。
同样的,替换

1
2
3
<nav>
    <?php paginate_comments_links('……');?>
</nav>

为:

1
2
3
<nav id="comment-nav-below" class="content_page_ajax" role="navigation">
 <?php next_comments_link('下一页 »'); ?>
</nav>

在footer.php中后面加入以下代码(参考上面的代码):

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
<script>
$(function(){
commentAjaxNav();
});
 
/**
** 评论ajax分页函数,加入了对传统ajax分页的支持,如果不需要瀑布流,可删除对应的代码
** 如果上面以添加该部分代码,下面的代码不用重复添加
**/

function commentAjaxNav(type){
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
 var $loading='<div id="loading-comments"></div>';
 if(type=="default"){
$(".comments_title").after($loading);
$('#comment-nav-below,.comment_list').remove();
$("body,html").scrollTop($(".comments_title").offset().top-10);
 }else{
$("#comment-nav-below").before($loading);
 }
$(document).on('click', '#comment-nav-below a', function(e) {
e.preventDefault();
$.ajax({
type: "GET",
url: $(this).attr('href'),
beforeSend: function() {
$('#loading-comments').show();
 },
dataType: "html",
success: function(out) {
result = $(out).find('.comment_list');
nextlink = $(out).find('#comment-nav-below');
$('#loading-comments').hide();
 if(type=="default"){
$('#loading-comments').after(result.fadeIn(800));
 }else{
$('.comment_list').append(result.html());
 }
$('#comment-nav-below').remove();
$('.comment_list').after(nextlink);
 
 }
 });
 });
}
</script>

在style.css中加入以下代码:

1
2
.content_page_ajax a{display: block;line-height: 36px;background: #f2f2f2;text-align: center;color:#777;margin-top:20px;}
.content_page_ajax a:hover{background: #eee;color: #D14836;}

到此,瀑布流分页就完成了,觉得不错就给个赞呗!

需要特别说明的是:需要在后台“设置→讨论”中启用评论分页并设置好评论的显示方式,否则以上代码不能起作用。

来源:(微信/QQ号:909912499),欢迎分享本文,转载请保留出处!部分内容来自网络,如有侵权请联系删除处理!

相关信息

本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。

如有需要请加QQ: 909912499