为保证安全,本站点已取消所有百度云分享链接,如有下载需要,请在评论里留下邮箱。 |
一直觉得XIU主题的评论框选项太单调了,于是自己捣鼓在网上收集了一些代码,自己整理了一下,方便大家以后修改。
CSS样式
把下面的CSS样式放到自己主题的style.css
中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/*菜单栏样式*/ .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
在里面适当的位置添加下面代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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');?> |
这里要用的两个文件,因为弹窗需要js样式,和一个smiley.php
文件,smiley.php
要放到主题跟目录 js文件放到主题JS文件夹里。如果你之前按照本站《WordPress中添加自定义评论表情包的方法(附三套表情包下载)》文章进行过评论表情添加的话,则需要替换原来的smiley.php
为本文中的。
![]() |
文件大小:未知 |
更新时间:2017年6月2日 | 累计下载:81 次 |
最后还需要在footer.php
文件里调用该JS,代码放在</body>上面一行就行
调用代码如下:
1 |
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/comments.js"></script> |
在此就大功告成了 效果如下:
如果文章对您有帮助,欢迎打赏本站
未经允许不得转载:晚风深巷酒 » wordpress评论框添加表情弹窗、加粗、引用、图片等功能