近期自己博客也想修改添加表情包,看到一篇文章很实用。 原帖出自:日出一点一
自从看到饭大佬给博客加上了贴吧的表情后就也想弄一个,毕竟 这个表情太火了,而我之前弄的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 ,详情见这篇文章,我也懒得复杂粘贴了
到这里基本就完成了,如果有啥问题可以评论或者发邮件给我。
参考文章:
Comments | 1 条评论
对了,我更新了评论区添加表情的样式,在评论框下面加一个按钮,点了之后表情们才会被显示,比上一代好了很多。一直想更新我的教程,然而拖延症又犯了。