如何给网站添加评论功能

学习如何做网站的同学们都知道，做网站时可以给自己的网站添加评论功能，用户可以在网站上直接发布评论。如下图：

如何在做网站时，给自己的网站添加评论功能呢？下面学做网站论坛介绍一下网站添加评论功能步骤：

1. 首先打开文章页模板文件single.php，
2. 然找到循环代码：<?php endwhile; ?>和<?php endif;?>
3. 在循环代码中间插入以下的代码来调用评论框：
   <?php comments_template(); ?>
4. 在模板样式文件style.css中，添加以下的CSS样式代码；

   
   /*评论*/
   
   #comments {background:#fff;width: 100%;margin: 10px 0px;padding: 8px 0px 5px;text-indent: 8px;background: #F3F3F3;border-bottom: 1px solid #d8dde0;}
   
   ol.commentlist{margin-left:0;}
   
   .commentlist p {text-indent: 0px;}
   
   .commentlist>li.comment{margin: 10px 0;}
   
   .commentlist a:link, .commentlist a:visited {background: none;color: #428BCA;}
   
   .commentlist a:hover {background: none;color: #CC0000;text-decoration: underline;}
   
   .commentlist li {list-style: none;margin: 10px 0px;padding: 15px 10px 5px 10px;background: #FFF;border: 1px solid #d8dde0;box-sizing:border-box;}
   
   .commentlist li.alt {background: #FFFAF4;border: 1px solid #d8dde0;}
   
   .commentlist li .gravatar {display:inline-block;vertical-align:top;width: 48px;margin: 0px 8px 5px 0px;padding: 1px 1px;text-align: center;border: 1px solid #C7C7C7;}
   
   .commentlist li .gravatar img,.comment-author img{margin: 0px;padding: 0px;border-radius: 50%}
   
   .comment-body,.commentlist li ul li{position:relative;padding-bottom:10px;}
   
   cite.fn{font-style: normal;color: #980606;padding-right: 5px;margin-left:10px}
   
   .commentlist .comment-author:hover img {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-webkit-transition: all ease-in-out .5s;-moz-transition: all ease-in-out .5s;}
   
   .commentuser{display:inline-block;width:570px;}
   
   .commentuser .codecolorer-container {width:560px !important;}
   
   .commentlist li .floor {float: left;width: 48px;margin-top: 1px;padding: 2px 0px 1px;text-align: center;border-top: 1px solid #A7B6BE;background: F8F8F8;color: #999999;}
   
   .commentlist li .authordata {float: right;width: 480px;}
   
   .commentlist li .commentmetadata {font-size:10px;color: #999;position:absolute;top:5px;right:10px;}
   
   .commentlist li .commentcontent {float: right;width: 480px;}
   
   #editcomment p {padding: 10px 10px 5px;}
   
   #author, #email, #url,#result{margin:5px 0 0 8px;width: 40%;border: 1px solid #CCCCCC;color: #906;background: #FCFCFC;padding: 5px 3px;}
   
   #commentform label[for='url'],#commentform input#url{display:none;}
   
   #respond {width: 100%;padding:20px;background:#fff;margin:20px 0;}
   
   #respond h3,h3#respond{font-size:16px;padding:10px 0;border-bottom:1px solid #d8dde0;}
   
   #comment {padding: 5px 3px;margin:5px 0 0 8px;width: 80%;height:166px;color: #333;font-size: 14px;border: 1px solid #CCCCCC;}
   
   #but_submit {margin-left: 72px;}
   
   #submit {width: 220px;height: 34px;line-height:34px;font-size: 18px;letter-spacing: 3px;margin:5px 0 15px 8px;}
   
   #ctrl_enter {margin: 16px 0px 0px 5px;color: #066283;font-weight: bold;}
   
   .submit_hover {border: 2px solid #FF6600;}
   
   .comment-notes,label[for='comment']{display:none;}
   
   

5. 这样网站就成功添加了评论功能。

除了使用以上的方法调用WORDPRESS程序默认评论框之外，还可以使用比较好看的WordPress评论插件wpDiscuz来制作评论功能。