wordpress评论框添加表情弹窗、加粗、引用、图片等功能

一直觉得DUX主题的评论框选项太单调了，于是自己捣鼓在网上收集了一些代码，自己整理了一下，方便大家以后修改

CSS样式

把下面的CSS样式放倒自己主题当中的main.css

/*菜单栏样式*/
.position .fa {
 line-height: 40px;
 padding: 1px 8px;
}

/* 表情字体颜色弹窗样式 */
#smiley {
 background-color: #EEEEEE;
 padding: 3px 5px;
 position: relative;
 line-height: 0;
}
#smiley img {
 display: inline-block;
 padding: 14px;
 cursor: pointer;
}
#smiley::after {
 position: absolute;
 top: -5px;
 left: 8px;
 width: 0;
 height: 0;
 vertical-align: top;
 border-bottom: 5px solid #1FA3E1;
 border-right: 5px solid rgba(0, 0, 0, 0);
 border-left: 5px solid rgba(0, 0, 0, 0);
 content: "";
}
#fontcolor {
 width: 453px;
 height: auto;
 line-height: 20px;
 padding: 3px 1px;
 border: 1px #e0e0e0 solid;
 z-index: 99999;
}
#fontcolor a {
 display: inline-block;
 height: 20px;
 width: 21px;
}
#fontcolor::after {
 border-bottom: 5px solid #1FA3E1;
 border-left: 5px solid transparent;
 content: "";
 border-right: 5px solid transparent;
 vertical-align: top;
 height: 0px;
 width: 0px;
 left: 82px;
 top: 108.2px;
 position: absolute;
}

评论调用代码

找到自己主题当中的comments.php在里面适当的位置添加下面代码：

<div class="position">
 <a href="javascript:;" id="comment-smiley" title="表情"><b><i class="fa fa-smile-o"></i></b></a>
 <a href="javascript:" id="font-color" title="颜色"><b><i class="fa fa-font"></i></b></a>
 <a href="javascript:SIMPALED.Editor.img()" title="插图片"><b><i class="fa fa-image"></i></b></a>
 <a href="javascript:SIMPALED.Editor.strong()" title="粗体"><b><i class="fa fa-bold"></i></b></a>
 <a href="javascript:SIMPALED.Editor.em()" title="斜体"><b><i class="fa fa-italic"></i></b></a>
 <a href="javascript:SIMPALED.Editor.quote()" title="引用"><b><i class="fa fa-quote-left"></i></b></a>
 <a href="javascript:SIMPALED.Editor.ahref()" title="插链接"><b><i class="fa fa-link"></i></b></a>
 <a href="javascript:SIMPALED.Editor.del()" title="删除线"><b><i class="fa fa-strikethrough"></i></b></a>
 <a href="javascript:SIMPALED.Editor.underline()" title="下划线"><b><i class="fa fa-underline"></i></b></a>
 <a href="javascript:SIMPALED.Editor.code()" title="插代码"><b><i class="fa fa-file-code-o"></i></b></a>
 </div> 

 <?php include(TEMPLATEPATH . '/smiley.php');?>

注意：DUX请将<?php include(TEMPLATEPATH . '/smiley.php');?>添加在<div class="comt-box">的外围。

这里要用的两个文件，因为弹窗需要js样式，和一个smiley.php文件，smiley.php要放到主题跟目录 js文件放到主题JS文件夹里

文件下载：js文件smiley文件

最后还需要在footer.php文件里调用该JS，代码放在</body>上面一行就行

调用代码如下：

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/comments.js"></script>

在此就大功告成了  效果如下：