WordPress Tutorial: Plug in free inserting QQ emoticons into articles

one thousand four hundred and twenty-one
article

September 15, 2017 18:24:42 WordPress comment one hundred and seventy-nine Reading mode

abstract

Sometimes, an expression plays a role that cannot be described in words. I believe that we often chat with QQ expressions, which is a deep experience. Some blogs insert expressions that are not so stiff, expressing emotions more abundantly, and making it easier for readers to browse.

Expression Pack Preparation

Download the emoticon package, decompress it locally and upload it to the img directory of your theme directory. If there is no such directory, create a new one.

Emoticon download

Deployment Code

Add the following code to functions.php. Note that the emoticon address of line 7 in the code is img/smilies Change to your own file path.

/*? code? Share from: Free Fish Blog*/
//Output WordPress emoticons??
function ? fa_get_wpsmiliestrans(){
???? global ? $wpsmiliestrans ;
???? $wpsmilies ?=? array_unique ( $wpsmiliestrans );
???? foreach ( $wpsmilies ? as ? $alt ?=>? $src_path ){
???????? $output ?.=?'< a? class = "add-smily" ? data-smilies= "'.$alt.'" ><img? class = "wp-smiley" ? src= "'.get_bloginfo('template_directory').'/img/smilies/'.rtrim($src_path,?" gif ").'gif" ?/></ a>';
????}
???? return ? $output ;
}
add_action('media_buttons_context',?' fa_smilies_custom_button');
function ? fa_smilies_custom_button( $context )? {
???? $context ?.=?'< style>.smilies-wrap{background:#fff; border:?1px?solid?#ccc;box-shadow:?2px?2px?3px?rgba(0,? 0,? 0,? 0.24); padding:?10px;position:?absolute;top:?60px;width:?380px;display:none}.smilies-wrap?img{height:24px; width:24px;cursor:pointer;margin-bottom:5px}?.is-active.smilies-wrap{display:block}</style><a? id= "insert-media-button" ? style= "position:relative" ? class = "button?insert-smilies?add_smilies" ? title= Add emoticon ? data-editor= "content" ? href= "javascript:;" >
???? Add emoticons
????</ a><div? class = "smilies-wrap" >'.? fa_get_wpsmiliestrans()?.'</ div><script>jQuery(document).ready( function (){jQuery(document).on( "click" ,? ".insert-smilies" , function ()? {? if (jQuery( ".smilies-wrap" ).hasClass( "is-active" )){jQuery( ".smilies-wrap" ).removeClass( "is-active" );} else {jQuery( ".smilies-wrap" ).addClass( "is-active" );}}); jQuery(document).on( "click" ,? ".add-smily" , function ()? {?send_to_editor( "?" ?+? jQuery(this).data( "smilies" )?+? "?" ); jQuery( ".smilies-wrap" ).removeClass( "is-active" ); return ? false;});});</script>';
???? return ? $context ;
}

Css beautification

After completing the above operations, you will see a Add emoticons Indicates that the addition was successful.

But when you use it, you will find that when you publish an expression, it will occupy a separate line, and sometimes the expression looks very small instead of the original size, which requires you to modify the CSS.

Add the following code to style.css:

.wp-smiley? {
???? display inline - block ?! important;? /*In order to make the expression not exclusive*/
???? height : 24px ?! important; /*To make the emoticon not conflict with the default CSS code, make the emoticon display larger*/
???? max-height 24px ?! important; /*To make the emoticon not conflict with the default CSS code, make the emoticon display larger*/
}

See if it is perfect: mrgreen:?: neutral:? :evil:? :idea:? :wink:? :eek:? :lol:? :sad:? :!:?

AD ： Please click here to support Watson's blog!

Expression Pack Preparation

Deployment Code

Css beautification

Comment