评论系统是越来越少,在前几篇文章,我们提到了使用来必力来作为第三方评论,但是,数据终归在别人哪里,万一有个三长两短,还是…

所以,本文教大家自己写一个评论框,当然,你也可以改下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;
}

保存刷新,一个简单的评论框就有啦!

参与评论