马春杰杰改CSS
修改main.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 |
/*菜单栏样式*/ .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：
|
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');?> |
这里代码放的位置可以放在<div class=”comt-box”>的外面~
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php include(TEMPLATEPATH . '/smiley.php');?> <div class="comt-box"> <textarea placeholder="<?php echo _hui('comment_text') ?>" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"></textarea> <div class="comt-ctrl"> <div class="comt-tips"><?php comment_id_fields(); do_action('comment_form', $post->ID); ?></div> <button type="submit" name="submit" id="submit" tabindex="5"><?php echo _hui('comment_submit_text') ? _hui('comment_submit_text') : '提交评论' ?></button> <!-- <span data-type="comment-insert-smilie" class="muted comt-smilie"><i class="icon-thumbs-up icon12"></i> 表情</span> --> </div> </div> <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> |
最后把JS文件放到模版js目录下，smiley.php放模版根目录。在footer.php中引用该js，放到</body>前就可以。
|
1 |
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/comments.js"></script> |
js文件和smiley.php下载地址：
效果：
现在还有个问题，现在的表情在评论框选择的时候跟最后呈现的不一致，这是因为emoji导致的，所以需要解决一下~~
把下面这段代码加入到functions.php中。
|
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
/** * 替换emjo表情修复WordPress升级4.2自定义表情的各种问题 */ function disable_emoji($plugins) { if (is_array($plugins)) { return array_diff($plugins, array( 'wpemoji' )); } else { return array(); } } //取当前主题下images\smilies\下表情图片路径 function custom_smilie_src($old, $img) { return get_stylesheet_directory_uri() . '/img/smilies/' . $img; } function init_fixsmilie() { global $wpsmiliestrans; //默认表情文本与表情图片的对应关系(可自定义修改) $wpsmiliestrans = array( ':mrgreen:' => 'icon_mrgreen.gif', ':neutral:' => 'icon_neutral.gif', ':twisted:' => 'icon_twisted.gif', ':arrow:' => 'icon_arrow.gif', ':shock:' => 'icon_eek.gif', ':smile:' => 'icon_smile.gif', ':???:' => 'icon_confused.gif', ':cool:' => 'icon_cool.gif', ':evil:' => 'icon_evil.gif', ':grin:' => 'icon_biggrin.gif', ':idea:' => 'icon_idea.gif', ':oops:' => 'icon_redface.gif', ':razz:' => 'icon_razz.gif', ':roll:' => 'icon_rolleyes.gif', ':wink:' => 'icon_wink.gif', ':cry:' => 'icon_cry.gif', ':eek:' => 'icon_surprised.gif', ':lol:' => 'icon_lol.gif', ':mad:' => 'icon_mad.gif', ':sad:' => 'icon_sad.gif', '8-)' => 'icon_cool.gif', '8-O' => 'icon_eek.gif', ':-(' => 'icon_sad.gif', ':-)' => 'icon_smile.gif', ':-?' => 'icon_confused.gif', ':-D' => 'icon_biggrin.gif', ':-P' => 'icon_razz.gif', ':-o' => 'icon_surprised.gif', ':-x' => 'icon_mad.gif', ':-|' => 'icon_neutral.gif', ';-)' => 'icon_wink.gif', '8O' => 'icon_eek.gif', ':(' => 'icon_sad.gif', ':)' => 'icon_smile.gif', ':?' => 'icon_confused.gif', ':D' => 'icon_biggrin.gif', ':P' => 'icon_razz.gif', ':o' => 'icon_surprised.gif', ':x' => 'icon_mad.gif', ':|' => 'icon_neutral.gif', ';)' => 'icon_wink.gif', ':!:' => 'icon_exclaim.gif', ':?:' => 'icon_question.gif', ); //移除WordPress4.2版本更新所带来的Emoji钩子同时挂上主题自带的表情路径 remove_action('wp_head', 'print_emoji_detection_script', 7); remove_action('admin_print_scripts', 'print_emoji_detection_script'); remove_action('wp_print_styles', 'print_emoji_styles'); remove_action('admin_print_styles', 'print_emoji_styles'); remove_filter('the_content_feed', 'wp_staticize_emoji'); remove_filter('comment_text_rss', 'wp_staticize_emoji'); remove_filter('wp_mail', 'wp_staticize_emoji_for_email'); add_filter('tiny_mce_plugins', 'disable_emoji'); add_filter('smilies_src', 'custom_smilie_src', 10, 2); } add_action('init', 'init_fixsmilie', 5); |
不过最后还是遗留了问题，首页评论小工具处的表情不显示，显示的是一个灰色的方块，如果有大神看到希望能指点指点
![[mcj]WordPress评论框美化添加表情功能](https://ypyssl.machunjie.com/machunjie/20190710203037.png_machunjie.png)
alex1977 2天前说：
xizai212 3天前说：
杨嘉业 1周前 (09-01)说：
123456 3周前 (08-20)说：
王光卫博客 1个月前 (08-03)说：
明月登楼 2个月前 (07-11)说：
学习啦
学习学习
js文件和smail.php和无了啊
@安七七 等我补一下
❗ 试试看
😥 😥 🙁 👿 ❗ ❗ 🙂 🙂 山东省大厦
😥 😥 😥
谢谢大家~
@马春杰杰 😛 😛 😛 哈哈