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。

Related Article
WordPress displays the registration time of the login user in the frontend

When using WordPress to build a website, some users want to display the user registration time in the frontend, but Read more

WordPress adds the number of SQL queries at the bottom

An excellent woodpress theme is definitely that the less SQL consulting is used, the better. How can we see how Read more

Some WordPress articles can be seen after comments / replies

If we want to hide part of the content of the article and need the user's comments and replies to Read more

WordPress common template function reference document

Basic template filefile namedescribe style.css Theme style file index.php Home page template file header.php Header template file single.php Single article Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image