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

当前位置：首页 >wordpress

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

wordpress 2015-8-11 阅读量: 763 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

替换为：

1
2
3

在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

下面我们为分页添加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

为：

1
2
3

在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

在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;}

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

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

浅唱6（微信/QQ号：909912499），欢迎分享本文，转载请保留出处！部分内容来自网络，如有侵权请联系删除处理！

浅唱6

热门文章

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

相关信息

关于本站

联系我们

友情链接