小雨科技 _武汉网站建设_武汉小程序搭建

开发一款WordPress主题，评论样式难免要自定义，如何最快速度的自定义适合自己主题的评论样式，已经有人给出了解决方案

效果图：

这是simple主题的评论样式，下面说下实现思路：

首先是新建comments.php，将下面的代码全部复制到里面去：



    
    共有  条评论
    
         'ol',
            'short_ping'  => true,
            'avatar_size' => 48,
            'type'        =>'comment',
            'callback'    =>'simple_comment',
        ) );
        ?>
    
    
    true)); ?>
    
    
        
             
                    
                
            
                You must be logged in to post a comment.
            
                
                    
                        以身份登录 | 注销 »

然后在主题的functions.php中加入自定义的评论列表展示样式：

//自定义评论列表模板
function simple_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   
   		
   			
        		
   			
   			
   				%s'), get_comment_author_link()); ?>
		        comment_approved == '0') : ?>
		            评论等待审核...

				
				
   			
   		
   		
   			
   				
   			
   			
 				  '回复','depth' => $depth, 'max_depth' => $args['max_depth']))) ?>

最后添加下css

/*
comments
*/
#comments{
	padding-bottom:30px;
	line-height:1;
}
.comments-title{
	position:relative;
	padding-bottom:10px;
	font-size:18px;
	color:#666;
	border-bottom:1px solid #f1f1f1;
}
h3.comments-title:after{
	position:absolute;
	content:'';
	top:29px;
	left:0;
	width:135px;
	height:1px;
	background:#fa2a2a;/*main-color*/
}	
.commentCount{
	color:#fa2a2a;/*main-color*/
}
.commentlist{
	list-style: none;
	margin:10px 0 0;
	padding:0;
}
.commentlist ol{
	list-style: none;
}
.comment{
	padding:10px 0 5px;
}
.comment .media-left{
	display: table-cell;
    vertical-align: top;
    padding-right: 10px;
}
.comment .media-left img{
	border-radius:50%;
}
.comment .media-body{
	display: table-cell;
    vertical-align: top;
}
.comment .media-body .author_name{
	margin-bottom:5px;
	font-size:14px;
	color:#777;
}
.comment .media-body p{
	font-size:14px;
	line-height:1.5em;
	color:#777;
}
.comment .media-body p a{
	color:#000;
}
.comment .comment-metadata{
	margin-left:58px;
	padding:5px 0;
}
.comment .comment-metadata span{
	margin-right:15px;
	font-size:13px;
}
.comment .comment-metadata span{
	font-size:12px;
	color:#999;
}
.comment .comment-metadata span.comment-btn-reply a:hover{
	color:#666;
}
.comment .comment-metadata span.comment-btn-reply i{
	color:#d1d1d1;
}
.comment .comment-metadata span.comment-btn-reply a{
	color:#999;
}
.commentlist > .comment{
	border-bottom:1px dotted #d9d9d9;
}
.commentlist .children{
	padding-left:58px;
}
.commentlist .children > .comment{
	border-top:1px dotted #d9d9d9;
}
#reply-title{
	font-size:14px;
	color:#666;
	border-bottom:0;
	color:#999;
}
#reply-title a:first-child,.warning-text a:first-child{
	display:inline-block;
	margin:0 2px;
	padding:2px 5px;
	background:#fa2a2a;/*main-color*/
	color:#fff;
	font-size:14px;
}
#reply-title #cancel-comment-reply-link{
	background:#fff;
	color:#999;
}
#reply-title #cancel-comment-reply-link:hover{
	text-decoration:underline;
}
.warning-text{
	color:#999;
}
.link-logout{
	color:#999;
}
.comment-navigation{
	width:100%;
	margin:0 auto;
	padding:15px 0;
	text-align: center;
}
.comment-navigation .page-numbers{
	display:inline-block;
	padding:9px 16px;
	color:#999;
	background:#f1f1f1;
}
.comment-navigation .page-numbers:hover{
	background:#e8e8e8;
	color:#666;
}
.comment-navigation .current,
.comment-navigation .current:hover{
	background:#fa2a2a;/*main-color*/
	color:#fff;
}
textarea#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;
}
textarea#comment:focus{
	background:#e9e9e9;
}
.commentform-info{
	float:left;
}
.commentform-info input{
	margin-right:10px;
	width:230px;
	border:0;
	border-radius:0;
	box-shadow:none;
	background:#f5f5f5;
	font-weight:normal;
	transition:background .5s;
}
.commentform-info input:focus{
	box-shadow:none;
	color:#fff!important;
	background:#fa2a2a/*main-color*/
}
.commentform-info input:focus:-moz-input-placeholder {
    color: #fff;
}
.commentform-info input:focus::-moz-input-placeholder {
    color: #fff;
}
.commentform-info input:focus::-webkit-input-placeholder {
    color: #fff;
}
.commentform-info input:focus:-ms-input-placeholder {
    color: #fff;
}
.commentBtn .btn{
	padding:8px 0;
	width:140px!important;
	text-align: center;
	background:#fa2a2a;/*main-color*/
	border:0;
}
.commentBtn .btn:hover{
	opacity:0.8;
}
input#submit{color: #fff;}

文中代码取至simple主题，请悉知。因主题停止更新，小雨修正了主题的一些bug,如有需要，可下载：