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评论框添加表情弹窗、加粗、引用、图片等功能
分享到: 生成海报
qux主题真好用,功能强大,界面美观,还一直在更新.....

热门推荐

评论 38

评论前必须登录!

立即登录   注册

  1. #27

    多谢,学习了 :wink:

    沉稳ing4年前 (2020-02-07)国内网友QQ浏览器  Android 9 ARE-AL10 Build/HONORARE-AL10 登录以回复 举报评论
  2. #26

    签到成功!签到时间:2019/8/27 下午8:08:02,每日打卡,生活更精彩哦~

    yuge5年前 (2019-08-27)国内网友谷歌浏览器 Windows 7 登录以回复 举报评论
  3. #25

    :?: 后台不错,感觉很厉害 :oops:

    蚊子哥哥5年前 (2019-08-22)国内网友火狐浏览器 Windows 7 登录以回复 举报评论
  4. #24

    博主,首页小工具评论表情怎么不显示? :?: :?:

    影子与梦ꦿ℘5年前 (2019-05-26)国内网友火狐浏览器 Windows 10 登录以回复 举报评论
  5. #23

    :?: :razz: :sad: 哈哈

    章鱼小丸子丶5年前 (2019-05-06)国内网友谷歌浏览器 Windows 7 登录以回复 举报评论
  6. #22

    图片并不能用

    inkeds5年前 (2019-02-23)国内网友谷歌浏览器 Windows 10 登录以回复 举报评论
  7. #21

    重复评论存在BUG

    inkeds5年前 (2019-02-22)国内网友谷歌浏览器 Windows 10 登录以回复 举报评论

本站承接WordPress主题开发,主题定制,功能开发

QQ咨询轻语云
切换注册

登录

忘记密码 ?

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

切换登录

注册

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

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码