给WordPress加上贴吧表情

发布于 2018-01-16  1.46k 次阅读

近期自己博客也想修改添加表情包，看到一篇文章很实用。     原帖出自：日出一点一

自从看到饭大佬给博客加上了贴吧的表情后就也想弄一个，毕竟 :(滑稽) 这个表情太火了，而我之前弄的QQ表情里没有这些表情。现在终于有时间来给博客添加贴吧的表情了 :(滑稽)  :(滑稽)  :(滑稽)

饭大佬用的是 Typecho ，有一个插件可以用，而 WordPress 呢，我看了一下很多表情插件都是 N 年前更新的，都不知道适不适配最新的 4.9 版本。之前我用的是免插件修改函数的方法实现表情的，现在还用的是这种方法。方法如下（以下代码部分来自互联网，具体出处见文末）

一、禁用 Wordpress 自带的表情

WordPress 其实自带了一套表情，不过不是很好看，首先我们要禁用它。在主题目录下的“functions.php”里最后一个”?>”前面加上以下代码（如果还是不知道在哪加，就在最后加上“<?php 代码 ?>”）

/**
* Disable the emoji's
 */
function disable_emojis() {
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    remove_action( 'admin_print_styles', 'print_emoji_styles' );    
    remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
    remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );  
    remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
    add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );
/**
 * Filter function used to remove the tinymce emoji plugin.
 * 
 * @param    array  $plugins  
 * @return   array             Difference betwen the two arrays
 */
function disable_emojis_tinymce( $plugins ) {
    return array_diff( $plugins, array( 'wpemoji' ) );
}

二、修改表情目录

首先下载贴吧表情和QQ表情包:点我下载（有三个压缩包，smilies_qq 是QQ表情，smilies_tieba 是贴吧表情，smilies 是贴吧和 QQ 表情两个都有。选择不同后续的代码也会不同）。解压后用  FTP 上传到当前主题目录下的 “/images” 文件夹下（如果没有请新建一个）。然后在 functions.php 中添加如下代码：

 add_filter('smilies_src','sven_smilies_src',1,10);
 function sven_smilies_src ($img_src, $img, $siteurl = null){
	 return get_template_directory_uri().'/images/smilies/'.$img;
 }
//我这里的/images/smilies/ 文件夹里就是表情图片所在的位置

三、重定向 WordPress 的表情链接

改变了表情文件夹后还有把表情符号和表情图片连接在一起，还是在主题的 functions.php 里添加如下代码：

function smilies_reset() {
    global $wpsmiliestrans, $wp_smiliessearch;
    // don't bother setting up smilies if they are disabled
    if ( !get_option( 'use_smilies' ) )
        return;
    $wpsmiliestrans = array(
//请根据你下载的表情来选择添加的表情    
//QQ表情开始
    ':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',
//QQ表情结束
//以下是贴吧表情
    		':(呵呵)'        =>    '呵呵.png',
			':(哈哈)'        =>    '哈哈.png',
			':(吐舌)'        =>    '吐舌.png',
			':(太开心)'        =>    '太开心.png',
			':(笑眼)'        =>    '笑眼.png',
			':(花心)'        =>    '花心.png',
			':(小乖)'        =>    '小乖.png',
			':(乖)'        =>    '乖.png',
			':(捂嘴笑)'        =>    '捂嘴笑.png',
			':(滑稽)'        =>    '滑稽.png',
			':(你懂的)'        =>    '你懂的.png',
			':(不高兴)'        =>    '不高兴.png',
			':(怒)'        =>    '怒.png',
			':(汗)'        =>    '汗.png',
			':(黑线)'        =>    '黑线.png',
			':(泪)'        =>    '泪.png',
			':(真棒)'        =>    '真棒.png',
			':(喷)'        =>    '喷.png',
			':(惊哭)'        =>    '惊哭.png',
			':(阴险)'        =>    '阴险.png',
			':(鄙视)'        =>    '鄙视.png',
			':(酷)'        =>    '酷.png',
			':(啊)'        =>    '啊.png',
			':(狂汗)'        =>    '狂汗.png',
			':(what)'        =>    'what.png',
			':(疑问)'        =>    '疑问.png',
			':(酸爽)'        =>    '酸爽.png',
			':(呀咩爹)'        =>    '呀咩爹.png',
			':(委屈)'        =>    '委屈.png',
			':(惊讶)'        =>    '惊讶.png',
			':(睡觉)'        =>    '睡觉.png',
			':(笑尿)'        =>    '笑尿.png',
			':(挖鼻)'        =>    '挖鼻.png',
			':(吐)'        =>    '吐.png',
			':(犀利)'        =>    '犀利.png',
			':(小红脸)'        =>    '小红脸.png',
			':(懒得理)'        =>    '懒得理.png',
			':(勉强)'        =>    '勉强.png',
			':(爱心)'        =>    '爱心.png',
			':(心碎)'        =>    '心碎.png',
			':(玫瑰)'        =>    '玫瑰.png',
			':(礼物)'        =>    '礼物.png',
			':(彩虹)'        =>    '彩虹.png',
			':(太阳)'        =>    '太阳.png',
			':(星星月亮)'        =>    '星星月亮.png',
			':(钱币)'        =>    '钱币.png',
			':(茶杯)'        =>    '茶杯.png',
			':(蛋糕)'        =>    '蛋糕.png',
			':(大拇指)'        =>    '大拇指.png',
			':(胜利)'        =>    '胜利.png',
			':(OK)'        =>    'OK.png',
			':(沙发)'        =>    '沙发.png',
			':(手纸)'        =>    '手纸.png',
			':(香蕉)'        =>    '香蕉.png',
			':(便便)'        =>    '便便.png',
			':(药丸)'        =>    '药丸.png',
			':(红领巾)'        =>    '红领巾.png',
			':(蜡烛)'        =>    '蜡烛.png',
			':(音乐)'        =>    '音乐.png',
			':(灯泡)'        =>    '灯泡.png',
//贴吧表情结束
    );
}
smilies_reset();

这样 Wordpress 就能识别出文章和评论中的表情符号，并把相应的符号转化为对应的表情图片。不过，总不能想添加表情的时候手动输入表情符号吧，因此就需要在文章编辑器和评论中添加表情按钮。

四、在文章编辑器中添加表情按钮

在主题的 functions.php 中添加如下代码：

//文章输出WordPress表情
function sven_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').'/images/smilies/'.rtrim($src_path, $img).'" /></a>';
}
//这里的地址也要根据自己的情况来做相应的更改
return $output;
}
add_action('media_buttons_context', 'sven_smilies_custom_button');
function sven_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">'. sven_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;
}

五、在评论区添加表情按钮

在主题目录下的 comments.php 中找到

<?php
	endif;
	comment_form(); //找到这个
	?>

在 “comment_form();” 之后添加以下代码：

//添加表情
	get_template_part( 'template-parts/comments/smiley', 'none' );
//

然后下载这个 smiley.php 文件，上传到主题的 /template-parts/comments/ 目录下，如果没有这个目录就新建一个。

六、更改 Wordpress 表情默认大小

WordPress竟然默认地把表情图片限制为 1em ,详情见这篇文章，我也懒得复杂粘贴了

:(小乖)  WordPress修复表情尺寸异常问题

到这里基本就完成了，如果有啥问题可以评论或者发邮件给我。

参考文章：

WordPress中添加自定义评论表情包的方法

WordPress主题自定义表情及表情名称

赏

靠着树干坐下，头顶满树韶光，枝叶的罅隙里斜斜地透着记忆，落满一地思念。