wordpress评论中加入表情

前些天折腾了评论的时候能插入表情，互动效果更加好些，在折腾的过程也是种种困难呀，从网上找的文章中去弄，没成功，最终在知言的帮忙下才弄好了，感谢知言的代码提供

先从网上找一套表情包

表情自行在网上找吧，好多，本站用的表情包文件是放在主题根目录下的，名为：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');

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

本主题表情包的位置是放在comments-title上面，再用Jq来控制位置在提交按钮上面，如果你主题有明显示的位置可以放的话，直接调用就是。

<div class="xwb"> <?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>

评论后表情显示问题

按上面的步骤弄好，就能发表表情了，如果在显示评论结果的时候，表情固定死了高度的话，可以自行修改下CSS，如

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