WordPress Solome主题 评论美化

1个月前 (12-17) kgdin wordpress 0评论 未收录 53℃

WordPress Solome主题 评论美化

关于这个Solome主题 评论美化的修改过程,其实 Solome主题还是真心不错的,只是我不喜欢

这个评论位置,也用过畅言评论系统,但是觉得还是自己修改一下,折腾一下,做网站的没一个

不喜欢折腾的,就是看能不能折腾出来。由于这个PHP学习能力不怎么好,今天差不多花了6个

小时左右才折腾出来了。

折腾笔记

首先我们打开主题目录下的文件comments.php, notepad++打开此文件,然后找到75行

<?php if ( ! $user_ID ): ?>

在这行代码下面添加下面这些代码:

<div id="comment-author-info">
<p class="comment-form-input-info" style="width:30%">
<label for="author"><?php _e('昵称','tinection'); ?><?php if ($req) _e(' *','tinection'); ?></label>
<input type="text" name="author" id="author" class="commenttext" value="<?php echo $comment_author; ?>" size="22" tabindex="1" required />
</p>
<p class="comment-form-input-info" style="width:35%">
<label for="email"><?php _e('邮箱','tinection'); ?><?php if ($req) _e (' *','tinection'); ?></label>
<input type="email" name="email" id="email" class="commenttext" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" required />
</p>
<p class="comment-form-input-info" style="width:35%;padding-right:0">
<label for="url"><?php _e('网址','tinection'); ?></label>
<input type="text" name="url" id="url" class="commenttext" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
</p></div>

把这些代码跟自己的代码替换掉,替换玩了之后,保存,刷新看一下是不是改变了,当然现在我们还没有给DIV里面的添加CSS效果,所以看不出来

不着急,我们接下来在修改comments.php文件的92处用下面的代码进行替换,93行可以直接删除掉。

<button class="submit btn btn-submit" name="submit" type="submit" id="submit" tabindex="6" style="float:right" title="(Ctrl+Enter)也可以发布的哟!!!"style="float:rghit"><i class="fa fa-send-o"></i> 提交评论</button>

只需要把下面代码放在92行上面即可。

<?php wp_smilies();?>

下面的CSS代码直接放在主题下面的style.CSS里面就好了,最好放在最上面或者是最先面,做好符号注明这代码修改哪里的

下次出现问题了,就不会盲目的去删除了。

/*评论插件CSS代码开始*/
div {display:block;}
img {max-width:100%;height:auto;}
img.avatar{display:inline-block!important;}
*,*:before,*:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.btn {text-indent: 0;margin-top: 5px; margin-bottom: 5px;display: inline-block; padding: 6px 12px; font-size: 14px;font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 3px;}
.btn:hover {opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"}
.btn-submit{color: #fff; background-color: #FD6639; border-color: #FD6639;}
#comment-author-info{clear:both;}
#commentform{position: relative;}
#commentform p{margin-top:5px;}
#commentform label{color:#777}
#commentform input{margin:3px 0 3px;padding:3px;}
#commentform input:focus{}
#commentform #author,#commentform #email,#commentform #url,#commentform #captcha{padding:5px 5px 5px 60px;border: 1px solid #ddd;}
#captcha-field label{padding-left:8px;}
#commentform textarea{margin-top:4px;padding:5px 15px;width:100%;height:120px;border:1px solid #e6e6e6;font-size:13px;overflow: visible;}
#commentform textarea::selection {background: #ccc;}
#commentform textarea:focus{outline: none;border-color: #ddd;border-color: rgba(82,168,236,.8);-webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);box-shadow: 0 0 8px rgba(82,168,236,.6);}
#commentform .comment-notify-login {position:absolute; left:50%; top:50%; margin-left:-54px; margin-top:10px;}
.comment-notify-login {margin-bottom:10px;}
.comment-login-pop-click {float:none;margin:0; padding:0; cursor:pointer;}
#commentform .comment-notify-login .comment-login-pop-click:hover {color:#00a67c;}
#commentform button#submit,#commentform button#reset{float:right}
.mail-notify-check{float: right;height: 30px;position: absolute;bottom: 0;right: 5px;margin-top: 8px;display:none}
#commentform #comment_mail_notify{width: 12px; height:12px; margin: 2px 2px 0 0; padding: 0;}
#real-avatar{display: inline-block;float: left;width: 40px;height: 40px;}
#real-avatar .avatar{padding:2px;border:1px solid #e6e6e6;background:#fff}
#welcome{display: inline-block;line-height: 40px;margin-left: 10px;}
#commentform a:link,#commentform a:visited{text-decoration:none}
#commentform a:hover{color:#777;text-decoration:none}
.ajaxcomm{height:30px;color:#777;line-height:30px}
#error {color:#f00;}
#comment-author-info{clear:both;}
.comment-form-input-info{float:left;position:relative;padding-right:4px;}
.comment-form-input-info input{width:100% !important}
.comment-form-input-info input:focus{}
.comment-form-input-info label{position:absolute;line-height: 27px;margin: 4px 0 0 1px;padding: 0 8px;border-right: 1px solid #ddd;background: #f5f5f5;}
.comt-smilie,.comt-format{cursor: pointer;float: left;line-height: 30px;width: 50px;}
#comt-smilie,#comt-format{background-color: #eee;padding: 3px 5px;position: relative;line-height: 0;float: left;overflow: visible !important;margin-top: -5px;}
#comt-smilie:before,#comt-format:before{display:inline-block;position: absolute;top: -5px;width: 0;height: 0;vertical-align: top;border-bottom: 6px solid #eee;border-right: 8px solid rgba(0,0,0,0);border-left: 8px solid rgba(0,0,0,0);content: "";opacity: 1;filter:alpha(opacity=100)}
#comt-smilie:before{left: 20px;}
#comt-format:before{left: 75px;}
#comt-smilie a{display:inline-block;width:20px;height:20px;text-align: center;}
.editor_tools a {border:1px solid #e8e8e8; margin: 2px 5px 2px 0; padding:6px; line-height:12px; width:auto; height:24px; float:left; overflow:hidden; display:inline-block; background: #f8f8f8; font-size: 12px;color:#08d;}
.editor_tools a:hover {color: #08d !important; border-color: #bbb;}
/*评论插件CSS代码结束*/

好了,基本上就完工了,如果尝试过后,有问题的可以在下方留言,谢谢。。

 

图片截图

下面这张图片是没折腾好之前的图片截图。


 

下面这张图片是折腾OK的。


博主

这货来去如风,什么鬼都没留下!!!

相关推荐

博主大大,还木有人评论哦。 0条评论