wordpress评论框添加表情弹窗、加粗、引用、图片等功能-晚风深巷酒

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

CSS样式

把下面的CSS样式放到自己主题的style.css中。

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

/* 表情字体颜色弹窗样式 */
#smiley {
 background-color: #EEEEEE;
 padding: 3px 5px;
 position: relative;
 line-height: 0;
 z-index:999;
}
#smiley img {
 display: inline-block;
 padding: 5px;
 cursor: pointer;
 z-index:999;
}
#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: 999;
}
#fontcolor a {
 display: inline-block;
 height: 20px;
 width: 21px;
 z-index:999;
}
#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;
}

/*菜单栏样式*/

.position .fa {

line-height: 40px;

padding: 1px 8px;

}

/* 表情字体颜色弹窗样式 */

#smiley {

background-color: #EEEEEE;

padding: 3px 5px;

position: relative;

line-height: 0;

z-index:999;

}

#smiley img {

display: inline-block;

padding: 5px;

cursor: pointer;

z-index:999;

}

#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: 999;

}

#fontcolor a {

display: inline-block;

height: 20px;

width: 21px;

z-index:999;

}

#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');?>

</div>

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

这里要用的两个文件，因为弹窗需要js样式，和一个smiley.php文件，smiley.php要放到主题跟目录 js文件放到主题JS文件夹里。如果你之前按照本站《WordPress中添加自定义评论表情包的方法（附三套表情包下载）》文章进行过评论表情添加的话，则需要替换原来的smiley.php为本文中的。

js文件和smiley文件.rar	文件大小：未知
更新时间：2017年6月2日	累计下载：60 次

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

调用代码如下：

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

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

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

赏

支付宝打赏

微信打赏

如果文章对您有帮助，欢迎打赏本站

未经允许不得转载：晚风深巷酒 » wordpress评论框添加表情弹窗、加粗、引用、图片等功能

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

CSS样式

评论调用代码

相关推荐

评论 0