azanone
Think a bigger things.
给WordPress添加自定义表情

Hey大家好!我是阿赞。

博客搭建这么长时间了,个人认为还是觉得博客有点生硬,添加表情当然可以解决这个问题,可是感觉Emoji并不能满足我的需求,所以就有了想添加自定义表情的想法!

首先来讲一下我会添加什么表情吧,先加一个贱贱的ARU aruHAHA 阿鲁表情XDARU实在是太贱了),没错,我就是在张大妈(什么值得买)认识的,非常幽默、有趣。其次加点节选的滑稽,其实我不是太喜欢百度的表情,但是他家滑稽是在太搞笑了 hjSNHJ ,其实滑稽的精华并非百度的原生滑稽,而是后续由PDC制作的变体滑稽(流行于无比封闭的酷安),比如 hjSNHJ 受虐滑稽、 hjLHHJ 流汗滑稽之类的,印象深刻哈哈。

除了两个常见的贱贱的表情我会加入到博客之外,还有一个希尔达 HD_:D 表情我也会添加,大家或许没有听过希尔达是什么,这是一个系列漫画/动画,推荐看看Netflix制作的动画(个人认为Netflix动画版更好,没有那个Netflix毁原作的定律XD),至于为什么会添加么,粉丝的情怀么,除去情怀之外,这种画风很适合作为表情包,自然也比各种二次元表情效果要好(不然我早就添加头文字D的表情啦!)

当然,受限于服务器和CDN性能,目前我不会添加太多表情包。那么找到好表情之后,是时候来配置表情了……可是,怎么配置? aruZZ

这就是个困扰的地方,起初说插件影响服务器性能,而且插件已经停更多年,我就试了试PHP+JS的方案,不过即使文章还算新,但是我依然没找到能做表情的地方,那没办法,只能先pass掉这个方案啦 aruZM

那么插件用什么?答案是停更8年的Custom Smilies插件:

https://blog.azan.one/wp-content/uploads/2020/03/img_1028-1024x768.png
插件主页
https://blog.azan.one/wp-content/uploads/2020/03/img_1029-966x1024.jpg
详情页(8年多了)

那么安装好这个插件以后,默认会显示WP默认的表情合集(为了防止出现不必要的损失,先搬运了 WordPress啦 的一张截图)

https://blog.azan.one/wp-content/uploads/2020/03/img_1030.jpg

Custom Smilies的使用方法就是在图片旁边的小框输入文字,比如aru+HAHA就等于 aruHAHA ,我们将其称为表情代码,需要注意的是,表情代码前后需要用空格间隔一下。可是…你以为就这么简单就好了么…

没错,自带的表情实在是老掉牙啊 aruZM ,在当今手机都视网膜屏幕的情况下,WP这种低分辨率的表情实在不堪入目,而且脱离潮流啊……不过没关系,我们可以更换表情,推荐用FTP先上传表情合集(可以用主流的大部分图片格式,推荐PNG,但是不能用子文件夹分类),然后再让插件将表情位置指向上传的表情文件夹,我的配置是这样的:

https://blog.azan.one/wp-content/uploads/2020/03/img_1031-1024x768.png

刚才你问我,表情的间隔为什么这么大,我可以回答你无可奉告,直接看图吧 aru555

https://blog.azan.one/wp-content/uploads/2020/03/img_1032.png

没错,高清的希尔达表情分辨率实在是太!大!了!…… HD_:|

配置完表情之后,就可以勉强使用了……为什么说是勉强使用,没错,毕竟插件最后一次更新是八年前 aruKBZ ,可视化的表情按钮只在经典编辑器提供,也就是说,新版的区块编辑器和古腾堡编辑器,移动端的WordPress编辑器以及各种Markdown第三方编辑器,都不能用可视化的表情列表插入! hjPen hjNKZ 除了编辑器不能用之外,RSS Feed也不能正常使用表情(无解) aruDK

那你说怎么办吗? aruZB HD_:|

RSS Feed的问题肯定是无解了。不过编辑器有一个曲线救国的办法,单独开设一个文章(比如这一篇表情测试页),专门有顺序的记录表情代码,想用的时候手动去找表情代码吧,就像这样 aruCool

https://blog.azan.one/wp-content/uploads/2020/03/img_1033-1024x768.png
iPad Pro好方便啊!

太苦逼了… aru555 hjKJ

你以为配置完表情代码,加个整理页面就能再开心使用了?如果你是这样想的话,接下来你会更苦逼 aruLK ,下面的内容涉及CSS知识。

https://blog.azan.one/wp-content/uploads/2020/03/img_1034-1024x768.png

看起来平安无事,对吗?我们注释一下wp-smiley的CSS代码看看:

https://blog.azan.one/wp-content/uploads/2020/03/img_1035-1024x768.jpg

这特么也太小了吧!!! hjPen HD_What

即使表情再高清,但是WP默认的表情大小仅仅一个字那么大,很惨,希尔达甚至都看不清 aruZM

这个时候,CSS就有作用了,我们可以设定css选择器,让特定表情有特定的宽度(只有高度貌似无效)

手动适配完之后,表情才算基本能用的级别了(比勉强好),你问我评论区怎么办? aruZZ 这个只能看运气,有的主题可以用,有的就不行,MDx主题貌似就不支持,毕竟8年前的插件,还要自行车的话那你是在想peach🍑 aruZM 当然可以引读者前往表情页面去查找表情,尽量把代码设置的简单一点,通俗易懂,比如 hj+SNHJ hjSNHJ

现在可以在WP开开心心的来发送表情了!用WP的博主们也试着加一个吧!

也可以看看我的表情测试页 aruYES

没有标签
首页      图文      给WordPress添加自定义表情

发表评论

textsms
account_circle
email

给WordPress添加自定义表情
Hey大家好!我是阿赞。 博客搭建这么长时间了,个人认为还是觉得博客有点生硬,添加表情当然可以解决这个问题,可是感觉Emoji并不能满足我的需求,所以就有了想添加自定义表情的想法!…
扫描二维码继续阅读
2020-03-26