欢迎光临
小清新博客

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文件

文件下载

  文件名称:js文件smiley文件   文件大小:2kb
  下载声明:本站文件大多收集于互联网,如有版权问题,请联系博主及时删除!
  下载地址:js文件smiley文件

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

调用代码如下:

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

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

 

 收藏 (2) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:轻语博客 » wordpress评论框添加表情弹窗、加粗、引用、图片等功能

分享到: 更多 (0)

评论 31

评论前必须登录!

立即登录   注册

  1. 23楼

    :?: :razz: :sad: 哈哈

  2. 22楼

    图片并不能用

    inkeds3个月前 (02-23)来自天朝的朋友 谷歌浏览器 Windows 10 登录以回复
  3. 21楼

    重复评论存在BUG

    inkeds3个月前 (02-22)来自天朝的朋友 谷歌浏览器 Windows 10 登录以回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活