wordpress评论中加入表情 – 爱CSS - 每多学一点知识就少写一行代码

关闭边栏(ESC)打开边栏(ESC)

先从网上找一套表情包

表情自行在网上找吧，好多，本站用的表情包文件是放在主题根目录下的，名为：smilies

首先在functions.php最后加入以下代码

这里有个再次绑定表情的操作，之前一直没有弄这个，所以一直卡在这里，网上介绍的文章也好少有提到要弄这个。注意表情图片的路径。

//自定义表情：
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');

//自定义表情：

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来控制位置在提交按钮上面，如果你主题有明显示的位置可以放的话，直接调用就是。

<div class="smiley"> <?php echo alu_get_wpsmiliestrans();?></div>

1	<div class="smiley"> <?php echo alu_get_wpsmiliestrans();?></div>

添加JS,为表情添加动作

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

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，如

.wp-smiley{height:auto!important;max-height:3em!important;width:25px;margin-right:5px;}

1	.wp-smiley{height:auto!important;max-height:3em!important;width:25px;margin-right:5px;}

评论：10条

评论加载中...

xiaopan
来了学习老哥的代码，写的很详细，我要拿去用了，真的很NICE

山西省太原市联通 2019-06-06 16:00 回复
- Icss.me
  回复xiaopan的评论
  
  哈哈多谢
  
  广东省佛山市电信 2019-06-07 10:19 回复
无人小站
表情加好了但是移动端有时候点击表情没反应刷新下就好了，表情动作js我是放在footer里，求dalao告知什么问题

江西省移动 2017-08-13 19:43 回复
- icss
  回复无人小站的评论
  
  我看了下，我的JS是跟评论同一个页面里的，放在head里，你试下看
  
  广东省佛山市电信 2017-08-13 19:57 回复
- icss
  回复无人小站的评论
  
  我的试了下，JS点击是有反应的，你看下路径是不是对了，JS放的位置
  
  广东省佛山市电信 2017-08-13 19:56 回复
- 无人小站
  回复icss的评论
  
  我查了一下好像没啥问题我也放head试试
  
  江西省移动 2017-08-13 20:04 回复
无人小站
看起来不错有时间试试

江西省移动 2017-08-04 12:55 回复
- icss
  回复无人小站的评论
  
  嗯，加个表情挺好玩的，加我友链哦，亲
  
  广东省佛山市电信 2017-08-04 13:27 回复
- 无人小站
  回复icss的评论
  
  加好了，友链样式很好看哦
  
  江西省抚州市电信 2017-08-04 14:43 回复
- icss
  回复无人小站的评论
  
  谢谢，有空多来作作客，哈
  
  广东省佛山市电信 2017-08-04 16:39 回复

目录

先从网上找一套表情包

首先在functions.php最后加入以下代码

然后在comments.php适应位置调用表情包

添加JS,为表情添加动作

评论后表情显示问题

将fancybox图片灯箱效果集成到wordpress主题

给Excel工作表来个解码

制作widget小工具 | 整合Aplayer.js音乐播放器到小工具

为wordpress文章添加目录方便阅读文章

关于黑糖主题中调用自定义Gravatar头像的问题

友情墙 | 一个友情链接优化成的一种页面模板

用视频作背景像本站首页全屏的视频背景

友情页面 | 本站目前使用的友情链接页面

发表评论取消回复

五岁生日 | 这一年跟表姐一块庆祝生日，可心的一天了

跨域 | 百度联想词二种方式来实现

$.ajax({})方法success，error，complete，beforeSend

【童心致敬•礼赞祖国】红红中国心浓浓爱国情

由原北京天安门国旗护卫队班长，带领他的教官团队为我们展示升旗仪式

jquery.fixedheadertable.js表头固定插件的使用

目 录

先从网上找一套表情包

首先在functions.php最后加入以下代码

然后在comments.php适应位置调用表情包

添加JS,为表情添加动作

评论后表情显示问题

将fancybox图片灯箱效果集成到wordpress主题

给Excel工作表来个解码

发表评论 取消回复

目录

发表评论取消回复