评论系统是越来越少,在前几篇文章,我们提到了使用来必力来作为第三方评论,但是,数据终归在别人哪里,万一有个三长两短,还是…
所以,本文教大家自己写一个评论框,当然,你也可以改下Css,使之达到你想要的样子。
我们在文章页面(一般是single.php
)加上一段代码,代码请放在你评论所要展示的区域:
<section class="mod-comment">
<?php comments_template(); ?>
</section>
然后我们在加上Css:
.commentlist {
padding:0
}
.commentlist li {
list-style:none;
margin-bottom:20px
}
.comment-body {
background:#f9f9f9;
padding:20px 20px 10px 20px;
-webkit-box-shadow:0 1px 1px 0 rgba(0, 0, 0, .1);
box-shadow:0 1px 1px 0 rgba(0, 0, 0, .1);
position:relative;
border-left:3px solid #eff1f5
}
.comment-author {
color:#696969;
font-size:12px
}
.comment-author .avatar {
width:24px;
height:24px;
border-radius:50%;
float:left
}
.comment-author .fn {
display:block;
float:left;
margin-left:10px;
margin-right:10px;
line-height:24px;
font-style:normal
}
.comment-author .says {
line-height:24px;
display:block;
float:left
}
.commentmetadata {
line-height:24px
}
.commentmetadata a {
color:#9a9a9a;
font-size:12px
}
.reply {
position:absolute;
top:16px;
right:20px
}
.reply a {
color:#ccc;
font-size:12px
}
.comment-body p {
font-size:12px
}
textarea#comment {
width:100%
}
.children {
padding-top:20px;
}
h3#comments {
margin:60px 0;
border-left:3px solid #000;
text-indent:20px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
#commentform #submit {
width:100%;
border:0;
background: #F9F9F9;
padding:10px 0;
color:#636363;
}
#commentform p {
margin: 8px 0px;
}
#commentform p small {
font-size:12px;
margin-left:10px;
color:#DCDBDB;
}
保存刷新,一个简单的评论框就有啦!