^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助,如果有代码出错,请联系站长解决
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 8年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 腾讯云3年2核2G新品轻量限时特惠只需408元

WordPress原生评论自定义样式

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

效果图:

2 核 2G 限时特惠 396 元/3 年    宝塔建站 10850 大礼包

WordPress原生评论自定义样式

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

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

<?php
if ( post_password_required() )
    return;
?>
<div id="comments" class="responsesWrapper">
    <meta content="UserComments:<?php echo number_format_i18n( get_comments_number() );?>" itemprop="interactionCount">
    <h3 class="comments-title">共有 <span class="commentCount"><?php echo number_format_i18n( get_comments_number() );?></span> 条评论</h3>
    <ol class="commentlist">
        <?php
        wp_list_comments( array(
            'style'       => 'ol',
            'short_ping'  => true,
            'avatar_size' => 48,
            'type'        =>'comment',
            'callback'    =>'simple_comment',
        ) );
        ?>
    </ol>
    <nav class="navigation comment-navigation u-textAlignCenter" data-fuck="<?php the_ID();?>">
    <?php paginate_comments_links(array('prev_next'=>true)); ?>
    </nav>
    <?php if(comments_open()) : ?>
        <div id="respond" class="respond" role="form">
            <h2 id="reply-title" class="comments-title"><?php comment_form_title( '', '回复给 %s' ); ?> <small>
                    <?php cancel_comment_reply_link(); ?>
                </small></h2>
            <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
                <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
            <?php else : ?>
                <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" class="commentform" id="commentform">
                    <?php if ( $user_ID ) : ?>
                        <p class="warning-text" style="margin-bottom:10px">以<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>身份登录 | <a class="link-logout" href="<?php echo wp_logout_url(get_permalink()); ?>">注销 »</a></p>
                        <textarea class="form-control" rows="3" id="comment" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};" placeholder="当你的才华还撑不起你的野心时,那你就应该静下心来评论下..." class="form-control" tabindex="1" name="comment"></textarea>
                    <?php else : ?>
                        <textarea class="form-control" rows="3" id="comment" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};" placeholder="当你的才华还撑不起你的野心时,那你就应该静下心来评论下..." tabindex="1" name="comment"></textarea>
                        <div class="commentform-info">
                            <label id="author_name" for="author">
                                <input class="form-control" id="author" type="text" tabindex="2" value="<?php echo $comment_author; ?>" name="author" placeholder="昵称[必填]" required>
                            </label>
                            <label id="author_email" for="email">
                                <input class="form-control" id="email" type="text" tabindex="3" value="<?php echo $comment_author_email; ?>" name="email" placeholder="邮箱[必填]" required>
                            </label>
                            <label id="author_website" for="url">
                                <input class="form-control" id="url" type="text" tabindex="4" value="<?php echo $comment_author_url; ?>" name="url" placeholder="网址(可不填)">
                            </label>
                        </div>
                    <?php endif; ?>
                    <div class="btn-group commentBtn" role="group">
                        <input name="submit" type="submit" id="submit" class="btn btn-sm btn-danger btn-block" tabindex="5" value="发表评论" /></div>
                    <?php comment_id_fields(); ?>
                </form>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</div>

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

//自定义评论列表模板
function simple_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li class="comment" id="li-comment-<?php comment_ID(); ?>">
   		<div class="media">
   			<div class="media-left">
        		<?php if (function_exists('get_avatar') && get_option('show_avatars')) { echo get_avatar($comment, 48); } ?>
   			</div>
   			<div class="media-body">
   				<?php printf(__('<p class="author_name">%s</p>'), get_comment_author_link()); ?>
		        <?php if ($comment->comment_approved == '0') : ?>
		            <em>评论等待审核...</em><br />
				<?php endif; ?>
				<?php comment_text(); ?>
   			</div>
   		</div>
   		<div class="comment-metadata">
   			<span class="comment-pub-time">
   				<?php echo get_comment_time('Y-m-d H:i'); ?>
   			</span>
   			<span class="comment-btn-reply">
 				<i class="fa fa-reply"></i> <?php comment_reply_link(array_merge( $args, array('reply_text' => '回复','depth' => $depth, 'max_depth' => $args['max_depth']))) ?> 
   			</span>
   		</div>

<?php
}
?>

最后添加下 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,如有需要,可下载:

你的二维码名字
请输入验证码查看内容
验证码:
微信扫码,回复关键字“9999”获取验证码即可查看

赠人玫瑰,手有余香。