WordPress在文章中插入表情图,实现丰富多彩效果

2018年4月30日22:26:07 15 4,563

WordPress在文章中插入表情图,实现丰富多彩效果

有时候单纯的文字会使文章显得很生硬,如果配上一点点表情图案,文章就会显得生动有趣,情感表达得更充沛。玩WP建站的人有很多都是搭建的个人博客,所以我们不免都会写点生活文章等等,这时配上表情则更好的向大家传达你的喜怒哀乐,想要实现这个效果也很简单,这里就给大家说下方法,教程来源【闲鱼】博客。 :wink:

表情包准备

WordPress在文章中插入表情图,实现丰富多彩效果

替换主题自带表情包

将表情上传到你主题目录下的img/images目录中(以知更鸟主题5.2为例),如果没有这个目录就新建一个,提供的是压缩包,记得解压。目录的名字尽量不要修改。使用主题自带表情包的,请忽略此步! :smile:

代码部署

将以下代码添加到functions.php中

  1. /* 代码 分享自:www.macrr.com */
  2. //输出WordPress表情  
  3. function fa_get_wpsmiliestrans(){
  4.     global $wpsmiliestrans;
  5.     $wpsmilies = array_unique($wpsmiliestrans);
  6.     foreach($wpsmilies as $alt => $src_path){
  7.         $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>';
  8.     }
  9.     return $output;
  10. }
  11. add_action('media_buttons_context', 'fa_smilies_custom_button');
  12. function fa_smilies_custom_button($context) {
  13.     $context .= '<style>.smilies-wrap{background:#fff;border: 1px solid #ccc;box-shadow: 2px 2px 3px rgba(0000.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:;">
  14.     添加表情
  15.     </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>';
  16.     return $context;
  17. }

PS:代码中表情地址为img/smilies,请根据你自己的情况修改,地址、名字都要对。

CSS代码

完成以上操作之后,我们可以在写文章的时候在编辑器的上方看到一个“添加表情”的字样,这就告诉你成功啦 。 :grin:

但是你会发现你现在发布表情时表情会单独占用一行,而且表情看起来有时候很小而不是原来的大小,这就需要我们再加把力了,修改下css。

将以下代码添加到style.css中

  1. .wp-smiley {
  2.     display: inline-block !important; /*为了让表情不会独占一行*/
  3.     height:24px !important;/*为了让表情不和默认的CSS代码冲突,让表情显示的大点*/
  4.     max-height: 24px !important;/*为了让表情不和默认的CSS代码冲突,让表情显示的大点*/
  5. }

代码稍作修改 代码稍作修改 代码稍作修改(重要事情说三遍) :neutral:  :neutral:  :neutral: 

通过博主实际应用发现,两种代码部署添加以后,表情包会太小看不清。WordPress在文章中插入表情图,实现丰富多彩效果

心想是不是代码出错了,考虑到知更鸟主题更新速度快,版本之间可能会产生差异,随自行研究解决。修改情况如下:

① 找到wp-includes/css/editor.min.css 并打开,查找“.wp-media-buttons a”,将font-size:12px 修改为24px,让表情图变大,便于添加。

② 将第一段functions代码中第14行里面的“absolute;top: 60px;width: 380px”修改为“absolute;top: 60px;width: 620px”,拉长表情包边框,实现同一行显示。

OK,大功告成! :oops:

weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:15   其中:访客  9   博主  6

    • 阿帕奇 阿帕奇 1 来自天朝的朋友 谷歌浏览器 Windows 7 上海市杨浦区 /虹口区电信

      支持支持。

      • 堆爱博客 堆爱博客 2 来自天朝的朋友 QQ浏览器  Android 8.1.0 OPPO R11 Plus Build/OPM1.171019.011 贵州省铜仁地区思南县 电信

        最近怎么不更新了?

          • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器 Windows 10 山东省潍坊市 联通

            @堆爱博客 最近脑袋有点锈逗了,要休息休息 :razz:

          • 云柯博客 云柯博客 2 来自天朝的朋友 谷歌浏览器 Windows 7 四川省广安市 广电网

            哇,我之前没看 ,手动替换的

              • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

                @云柯博客 能实现表情效果就可以的

              • 青山 青山 3 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信

                好像,begin指南里有方法

                  • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Unknow Os 山东省潍坊市 联通

                    @青山 有吗?这种方法也是挺简单的。

                  • 蓝亚之舟 蓝亚之舟 3 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 北京宽带通电信技术有限公司

                    博主,你好,我的代码贴上去以后,发现“添加表情”是乱码,怎么办?

                      • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10 山东省潍坊市 联通

                        @蓝亚之舟 是知更鸟主题吗,代码添加地方正确了吗?

                          • 蓝亚之舟 蓝亚之舟 3 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 北京宽带通电信技术有限公司

                            @BG4PGR 谢谢博主回复,找到原因了,是因为我打开文件的软件格式有问题,我将上面代码改了以后,发现表情还是很小,基本没有变化,请问博主知道可能的原因吗?

                              • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10 山东省潍坊市 联通

                                @蓝亚之舟 解决了吗?发网站看看

                                  • 蓝亚之舟 蓝亚之舟 3 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 北京宽带通电信技术有限公司

                                    @BG4PGR 解决了,不过我发现我用自己管理员看的时候,很小,但是用无痕网页打开的时候,发现是大的,这应该算是解决了吧,https://zhoushuo.net/%E7%BC%A9%E7%95%A5%E5%9B%BE/

                            • 明月登楼 明月登楼 3 来自天朝的朋友 谷歌浏览器 Windows 7 河南省南阳市 电信

                              以前我也很喜欢文章里加入表情的,但是每次主题更新都要重新修改代码挺郁闷的其实,所以后来就放弃了!

                                • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

                                  @明月登楼 做网站就是在不断的修改折腾中找寻快乐 :wink: