6

在老白博客之前的帖子'以B2主题为例修改WordPress默认评论Emoji表情'中,老白对默认的emoji表情符号进行了替换,发现其展示效果是非常不错的。就是有点emoji表情符号有点小,然后缺乏类似表情包GIF的动态效果,故此有了本文:基于CSS实现WordPress网页emoji符号的大小与动态效果。关于效果大家可以看本站评论区。

 

1.WordPress调整思路

大部分主题的评论区有emoji表情符号后,其代码如下:

<div class="comment-content-text"><p>老白博客yyds😁😁😁</p> </div> 

我们可以看到emoji符号和文本一起被包裹在P标签里面,想要二者表现为不同的大小,就得把他们分开。

老白这里采用的思路是“替换”,将原有的二者共用一个类,打断为两个,并且给emoji表情单独定义类名,然后再用css去调整就行