关闭边栏(ESC)打开边栏(ESC)
前些天折腾了评论的时候能插入表情，互动效果更加好些，在折腾的过程也是种种困难呀，从网上找的文章中去弄，没成功，最终在知言的帮忙下才弄好了，感谢知言的代码提供
先从网上找一套表情包
表情自行在网上找吧，好多，本站用的表情包文件是放在主题根目录下的，名为：smilies
首先在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 |
//自定义表情： add_filter('smilies_src', 'alu_smilies_src', 1, 10); function alu_smilies_src($img_src, $img, $siteurl) { $img = rtrim($img, "gif"); return get_template_directory_uri() . '/smilies/' . $img . 'gif'; } function alu_get_wpsmiliestrans() { global $wpsmiliestrans; $wpsmilies = array_unique($wpsmiliestrans); $output = ''; foreach ($wpsmilies as $alt => $src_path) { //$emoji = str_replace(array('&#x', ';'), '', wp_encode_emoji($src_path)); $output .= '<a data-action="addSmily" data-smilies="' . $alt . '"><img class="wp-smiley" src="' . get_template_directory_uri() . '/smilies/' . $src_path .'"/></a>'; } return $output; } function alu_smilies_reset() { global $wpsmiliestrans, $wp_smiliessearch; // don't bother setting up smilies if they are disabled if ( !get_option( 'use_smilies' ) ) return; $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', // This one transformation breaks regular text with frequency. // '8)' => 'icon_cool.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', ); } add_action('init','alu_smilies_reset'); |
然后在comments.php适应位置调用表情包
本主题表情包的位置是放在comments-title上面，再用Jq来控制位置在提交按钮上面，如果你主题有明显示的位置可以放的话，直接调用就是。
|
1 |
<div class="smiley"> <?php echo alu_get_wpsmiliestrans();?></div> |
添加JS,为表情添加动作
|
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 |
<script> document.addEventListener('DOMContentLoaded', function(){ var aluContainer = document.querySelector('.smiley'); if ( !aluContainer ) return; aluContainer.addEventListener('click',function(e){ var myField, _self = e.target.dataset.smilies ? e.target : e.target.parentNode, tag = ' ' + _self.dataset.smilies + ' '; if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') { myField = document.getElementById('comment') } else { return false } if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = tag; myField.focus() } else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; var cursorPos = endPos; myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length); cursorPos += tag.length; myField.focus(); myField.selectionStart = cursorPos; myField.selectionEnd = cursorPos } else { myField.value += tag; myField.focus() } }); }); </script> |
评论后表情显示问题
按上面的步骤弄好，就能发表表情了，如果在显示评论结果的时候，表情固定死了高度的话，可以自行修改下CSS，如
|
1 |
.wp-smiley{height:auto!important;max-height:3em!important;width:25px;margin-right:5px;} |
哈哈 多谢
表情加好了但是移动端有时候点击表情没反应刷新下就好了，表情动作js我是放在footer里，求dalao告知什么问题
我看了下，我的JS是跟评论同一个页面里的，放在head里，你试下看
我的试了下，JS点击是有反应的，你看下路径是不是对了，JS放的位置
我查了一下好像没啥问题我也放head试试
看起来不错有时间试试
嗯，加个表情挺好玩的，加我友链哦，亲
加好了，友链样式很好看哦
谢谢，有空多来作作客，哈