WordPress Theme Development – add emoji to comments

staywordpressIt used to be very popular to add expression packs to the comments on the topic，And many websites also include this function。

The implementation is mainly to replace the official expression with its own expression pack，So the quantity is limited。

It’s not just reviews, of course，Background article editor can also add small expressions，There is an article about it later；

No more nonsense，Take a tutorial：

function：

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() . '/images/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 class="add-smily" data-action="addSmily" data-smilies="' . $alt . '"><img class="wp-smiley" src="' . get_template_directory_uri() . '/images/smilies/' . $src_path .'" /></a>';  
    }  
    return $output;  
}  
  
function alu_smilies_reset() {  
    global $wpsmiliestrans, $wp_smiliessearch;  
  
    if ( !get_option( 'use_smilies' ) )  
        return;  
  
    $wpsmiliestrans = array(  
        ':mrgreen:' => '1.gif',  
        ':neutral:' => '2.gif',  
        ':twisted:' => '3.gif',  
        ':arrow:' => '5.gif',  
        ':shock:' => '4.gif',  
        ':smile:' => '6.gif',  
        ':???:' => '7.gif',  
        ':cool:' => '8.gif',  
        ':evil:' => '9.gif',  
        ':grin:' => '10.gif',  
        ':idea:' => '11.gif',  
        ':oops:' => '12.gif',  
        ':razz:' => '13.gif',  
        ':roll:' => '14.gif',  
        ':wink:' => '15.gif',  
        ':cry:' => '16.gif',  
        ':eek:' => '17.gif',  
        ':lol:' => '18.gif',  
        ':mad:' => '19.gif',  
        ':sad:' => '20.gif',  
        '8-)' => '21.gif',  
        '8-O' => '22.gif',  
        ':-(' => '23.gif',  
        ':-)' => '24.gif',  
        ':-?' => '25.gif',  
        ':-D' => '26.gif',  
        ':-P' => '27.gif',  
        ':-o' => '28.gif',  
        ':-x' => '29.gif',  
        ':-|' => '30.gif',  
        ';-)' => '31.gif',  
        '8O' => '32.gif',  
        ':(' => '33.gif',  
        ':)' => '34.gif',  
        ':?' => '35.gif',  
        ':D' => '36.gif',  
        ':P' => '37.gif',  
        ':o' => '38.gif',  
        ':x' => '39.gif',  
        ':|' => '40.gif',  
        ';)' => '11.gif',  
        ':!:' => '22.gif',  
        ':?:' => '33.gif',  
    );  
}  
add_action('init','alu_smilies_reset');

js：

document.addEventListener('DOMContentLoaded', function(){  
   var aluContainer = document.querySelector('.comment-form-smilies');  
    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()  
        }  
    });  
});  
  
jQuery(document).on("click", ".facetoggle", function($) {  
    jQuery(".comment-form-smilies").toggle();  
});

stay评论框合适的位置添加：

<?php echo alu_get_wpsmiliestrans();?>

你需要将图片存放stayimagesFoldersmiliesIn the file。