我要投稿 | 网站地图 WordPress新手入门教程和WordPress开发
WordPress教程网
热门标签: wordpress教程 wordpress wordpress函数 WordPress建站 wordpress插件

教程

当前位置:首页> 教程

wordpress评论功能模板(comment.php)制作

来源(作者):互联网   发布时间: 2019-12-06  游览次数:251次

在制作文章页面模板【single.php】时,在文章的下面我们通过一段代码调用了一个评论功能,这个评论功能是WP程序自带的评论框,样式比较单一。我们可以自己制作一个评论功能模板(comment.php)来替换默认的评论功能模板。

评论功能模板(comment.php)制作步骤:

第一步:下载独立的评论模板。【comment.php】,将它放到我们制作的主题文件夹下;

第二步:打开style.css文件,在CSS文件的最下方,插入下面的CSS样式代码:

/* 评论 */
#comments{ width:100%; margin:10px 0px; padding:8px 0px 5px; text-indent:8px; background:#F3F3F3; border-bottom:1px solid #BBC5CC; }
.commentlist{ }
.commentlist p{ text-indent:0px;}
.commentlist a:link, .commentlist a:visited{ background:none; color:#454545;}
.commentlist a:hover{ background:none; color:#CC0000; text-decoration:underline;}
.commentlist li{ float:left; margin:5px 0px; width:96%; padding:15px 10px 5px 10px; background:#FFF; border:1px solid #BBC5CC;}
.commentlist li.alt{ background:#FFFAF4; border:1px solid #BBC5CC;}
.commentlist li .gravatar{ float:left; width:48px; margin:0px 8px 5px 0px; padding:1px 1px; text-align:center; border:1px solid #C7C7C7;}
.commentlist li .gravatar img{ margin:0px !important; padding:0px !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{ float:right; color:#999999;}
.commentlist li .commentcontent{ float:right; width:480px;}
#editcomment{ float:left; font-size:14px;}
#editcomment p{ padding:10px 10px 5px;}
#author, #email, #url{ margin-left:8px; width:40%; border:1px solid #CCCCCC; color:#906; font-weight:bold; font-size:14px; background:#FCFCFC; padding:5px 3px;}

第三步:在需要显示评论功能的位置,如文章的下方,使用下面的标签调用评论功能。

<?php comments_template(); ?>

第四步:有的页面需要显示文章被评论的数量,可以使用下面调用评论数的标签调用。

<?php comments_number('暂无评论', '1条评论', '% 评论' );?>

本文版权归原作者所有,转载请注明原文来源出处, WordPress教程网 感谢您的支持!

本文链接: https://www.wpabc.net:443/1181.html

WordPress教程网
WordPress教程网
相关内容