• 推荐!搬瓦工官方代理,自动更换被封IPJust My Socks

ad

WordPress添加贴吧表情

WordPress已经自带了一些表情,它们存在于wp-includes/images/smilies文件夹下,只不过默认是“隐藏”的。但是又是不是觉得纯文字的博客很单调无味?今天的教程就是教你非插件版如何在后台编辑器添加表情,并在前端博文中显示~ :evil: 添加表情后的效果如下图:

wordpress-post-smiles

 

下载表情资源

如果你也喜欢这套贴吧滑稽表情,猛戳下载连接:WordPress贴吧表情bao包。当然,你也可以自己制作自己喜欢的表情,png,gif都可以~

 

后台编辑器显示表情

下载好资源后,就需要将这些表情关联到文章编辑器中,在functions.php中加入以下代码:

// /*-----------------------------------------------------------------------------------*/	
// /* 添加表情对应数组
// /*-----------------------------------------------------------------------------------*/
function smilies_reset() {
    global $wpsmiliestrans;
    $wpsmiliestrans = array(':mrgreen:' = >'mrgreen.png', ':exclaim:' = >'exclaim.png', ':neutral:' = >'neutral.png', ':twisted:' = >'twisted.png', ':arrow:' = >'arrow.png', ':eek:' = >'eek.png', ':smile:' = >'smile.png', ':confused:' = >'confused.png', ':cool:' = >'cool.png', ':evil:' = >'evil.png', ':biggrin:' = >'biggrin.png', ':idea:' = >'idea.png', ':redface:' = >'redface.png', ':razz:' = >'razz.png', ':rolleyes:' = >'rolleyes.png', ':wink:' = >'wink.png', ':cry:' = >'cry.png', ':surprised:' = >'surprised.png', ':lol:' = >'lol.png', ':mad:' = >'mad.png', ':drooling:' = >'drooling.png', ':cowboy:' = >'cowboy.png', ':persevering:' = >'persevering.png', ':symbols:' = >'symbols.png', ':shit:' = >'shit.png', );
}
smilies_reset();

// /*-----------------------------------------------------------------------------------*/	
// /* WordPress后台编辑器插入表情
// /*-----------------------------------------------------------------------------------*/
function loper_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('wpurl').'/wp-includes/images/smilies/'.rtrim($src_path, "png").'png" /></a>';
    }
    return $output;
}

// /*-----------------------------------------------------------------------------------*/	
// /* WordPress后台编辑器添加表情按钮
// /*-----------------------------------------------------------------------------------*/
function loper_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="添加表情" data-editor="content" 
href="javascript:;">添加表情</a><div class="smilies-wrap">'.loper_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;
}
add_action('media_buttons_context', 'loper_smilies_custom_button');

注意在第一个函数中缩写与图片的对应关系,如果自己使用的主题已经加入了表情,则在第二个函数中修改src的路径,例如我使用的主题中有加入了表情,那么就只需要修改src为:

$output .= '<a class="add-smily" data-smilies="' . $alt . '"><img class="wp-smiley"
src="' . get_bloginfo( 'template_directory' ) . '/images/smilies/' . rtrim( $src_path, "png" ) . 'png" /></a>';

 

添加表情效果

修改效果如下,编辑文章时的添加表情按钮:

wordpress-edit-with-smilies

博文中表情的显示:

wordpress-post-with-similes

 

至此,你已经完成了非插件版在后台编辑器添加表情,并在前端博文中显示的功能 :wink:   :wink:   :wink:

点赞
  1. zozoc丶说道:

    楼主,好像贴吧表情的下载链接挂掉了 :exclaim:

    1. flyzy小站说道:

      更新下载链接了:贴吧表情包

      1. zozoc丶说道:

        感谢

  2. s说道:

    谢谢回复 已解决
    确实有好多免费的

  3. s说道:

    楼主如果有时间写个怎么搭建邮件服务器的帖子就更好了 :razz:

    1. flyzy小站说道:

      不一定要自己搭建域名服务器啊,我是用的zoho搭建的域名邮箱:zoho免费域名邮箱