Home >  > wordpress评论模板

wordpress评论模板

| |

在开发wordpress模板的时候，系统畎认的模板比较简单，在样式方面无法满足模板开发的需要，这时我们就需要对wordpress模板进行美化。

步骤也非常简单，三步就可以了。

一、comments.php
新建一个comments.php文件，代码

查看源代码
打印帮助
1<?php
2// Edit By laobuluo.com
3if ( post_password_required() )
4return;
5?>
6<div id="comments" class="responsesWrapper">
7<meta content="UserComments:<?php echo number_format_i18n( get_comments_number() );?>" itemprop="interactionCount">
8<h3 class="comments-title">共有 <span class="commentCount"><?php echo number_format_i18n( get_comments_number() );?></span> 条评论</h3>
9<ol class="commentlist">
10<?php
11wp_list_comments( array(
12'style' => 'ol',
13'short_ping' => true,
14'avatar_size' => 48,
15'type' =>'comment',
16'callback' =>'simple_comment',
17) );
18?>
19</ol>
20<nav class="navigation comment-navigation u-textAlignCenter" data-fuck="<?php the_ID();?>">
21<?php paginate_comments_links(array('prev_next'=>true)); ?>
22</nav>
23<?php if(comments_open()) : ?>
24<div id="respond" class="respond" role="form">
25<h2 id="reply-title" class="comments-title"><?php comment_form_title( '', '回复给 %s' ); ?> <small>
26<?php cancel_comment_reply_link(); ?>
27</small></h2>
28<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
29<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
30<?php else : ?>
31<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" class="commentform" id="commentform">
32<?php if ( $user_ID ) : ?>
33<p class="warning-text" style="margin-bottom:10px">以<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>身份登录 | <a class="link-logout" href="<?php echo wp_logout_url(get_permalink()); ?>">注销 »</a></p>
34<textarea class="form-control" rows="3" id="comment" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};" placeholder="评论内容..." class="form-control" tabindex="1" name="comment"></textarea>
35<?php else : ?>
36<textarea class="form-control" rows="3" id="comment" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};" placeholder="评论内容..." tabindex="1" name="comment"></textarea>
37<div class="commentform-info">
38<label id="author_name" for="author">
39<input class="form-control" id="author" type="text" tabindex="2" value="<?php echo $comment_author; ?>" name="author" placeholder="昵称[必填]" required>
40</label>
41<label id="author_email" for="email">
42<input class="form-control" id="email" type="text" tabindex="3" value="<?php echo $comment_author_email; ?>" name="email" placeholder="邮箱[必填]" required>
43</label>
44<label id="author_website" for="url">
45<input class="form-control" id="url" type="text" tabindex="4" value="<?php echo $comment_author_url; ?>" name="url" placeholder="网址(可不填)">
46</label>
47</div>
48<?php endif; ?>
49<div class="btn-group commentBtn" role="group">
50<input name="submit" type="submit" id="submit" class="btn btn-sm btn-danger btn-block" tabindex="5" value="发表评论" /></div>
51<?php comment_id_fields(); ?>
52</form>
53<?php endif; ?>
54</div>
55<?php endif; ?>
56</div>

二、自定义评论函数
在当前主题的Functions.php页面中加入自定义评论函数

查看源代码
打印帮助
1//自定义评论列表模板 Edit By laobuluo.com
2function simple_comment($comment, $args, $depth) {
3$GLOBALS['comment'] = $comment; ?>
4<li class="comment" id="li-comment-<?php comment_ID(); ?>">
5<div class="media">
6<div class="media-left">
7<?php if (function_exists('get_avatar') && get_option('show_avatars')) { echo get_avatar($comment, 48); } ?>
8</div>
9<div class="media-body">
10<?php printf(__('<p class="author_name">%s</p>'), get_comment_author_link()); ?>
11<?php if ($comment->comment_approved == '0') : ?>
12<em>评论等待审核...</em><br />
13<?php endif; ?>
14<?php comment_text(); ?>
15</div>
16</div>
17<div class="comment-metadata">
18<span class="comment-pub-time">
19<?php echo get_comment_time('Y-m-d H:i'); ?>
20</span>
21<span class="comment-btn-reply">
22<i class="fa fa-reply"></i> <?php comment_reply_link(array_merge( $args, array('reply_text' => '回复','depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
23</span>
24</div>
25 
26<?php
27}
28?>

三、评论CSS样式
在模板的CSS样式中添加以下代码

查看源代码
打印帮助
1#comments{padding-bottom:30px;line-height:1}
2.comments-title{position:relative;padding-bottom:10px;font-size:18px;color:#666;border-bottom:1px solid #f1f1f1}
3h3.comments-title:after{position:absolute;content:'';top:29px;left:0;width:135px;height:1px;background:#069}
4.commentCount{color:#069}
5.commentlist{list-style:none;margin:10px 0 0;padding:0}
6.commentlist ol{list-style:none}
7.comment{padding:10px 0 5px}
8.comment .media-left{display:table-cell;vertical-align:top;padding-right:10px}
9.comment .media-left img{border-radius:50%}
10.comment .media-body{display:table-cell;vertical-align:top}
11.comment .media-body .author_name{margin-bottom:5px;font-size:14px;color:#777}
12.comment .media-body p{font-size:14px;line-height:1.5em;color:#777}
13.comment .media-body p a{color:#000}
14.comment .comment-metadata{margin-left:58px;padding:5px 0}
15.comment .comment-metadata span{margin-right:15px;font-size:13px}
16.comment .comment-metadata span{font-size:12px;color:#999}
17.comment .comment-metadata span.comment-btn-reply a:hover{color:#666}
18.comment .comment-metadata span.comment-btn-reply i{color:#d1d1d1}
19.comment .comment-metadata span.comment-btn-reply a{color:#999}
20.commentlist>.comment{border-bottom:1px dotted #d9d9d9}
21.commentlist .children{padding-left:58px}
22.commentlist .children>.comment{border-top:1px dotted #d9d9d9}
23#reply-title{font-size:14px;color:#666;border-bottom:0;color:#999}
24#reply-title a:first-child,.warning-text a:first-child{display:inline-block;margin:0 2px;padding:2px 5px;background:#069;color:#fff;font-size:14px}
25#reply-title #cancel-comment-reply-link{background:#fff;color:#999}
26#reply-title #cancel-comment-reply-link:hover{text-decoration:underline}
27.warning-text{color:#999}
28.link-logout{color:#999}
29.comment-navigation{width:100%;margin:0 auto;padding:15px 0;text-align:center}
30.comment-navigation .page-numbers{display:inline-block;padding:9px 16px;color:#999;background:#f1f1f1}
31.comment-navigation .page-numbers:hover{background:#e8e8e8;color:#666}
32.comment-navigation .current,.comment-navigation .current:hover{background:#069;color:#fff}
33textarea#comment{display:block;width:100%;margin-bottom:10px;background:#f5f5f5;color:#777;border:0;box-shadow:none;height:90px;padding:10px;resize:none;border-radius:5px;transition:background .3s}
34textarea#comment:focus{background:#e9e9e9}
35.commentform-info{float:left}
36.commentform-info input{margin-right:10px;width:230px;border:0;border-radius:0;box-shadow:none;background:#f5f5f5;font-weight:400;transition:background .5s}
37.commentform-info input:focus{box-shadow:none;color:#fff!important;background:#069}
38.commentform-info input:focus:-moz-input-placeholder{color:#fff}
39.commentform-info input:focus::-moz-input-placeholder{color:#fff}
40.commentform-info input:focus::-webkit-input-placeholder{color:#fff}
41.commentform-info input:focus:-ms-input-placeholder{color:#fff}
42.commentBtn .btn{padding:8px 0;width:140px!important;text-align:center;background:#069;border:0}
43.commentBtn .btn:hover{opacity:.8}
44input#submit{color:#fff}

四、调用评论
在需要显示评论的地方加入以下代码

查看源代码
打印帮助
1<?php comments_template(); ?>

五、成果展示

参考：https://www.laobuluo.com/4066.html

暧昧帖

本文暂无标签