CSS实现WP网页emoji符号的大小与动态效果

在老白博客之前的帖子'以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去调整就行

为什么要调整

两个原因：

①.很多主题都提供了自定义的表情包功能，但是该功能是图片，老白的缓存处理插件有时候就转不过来，还是字符；

②.emoji符号是通用的，这个放到哪里都能用，而且几乎不占用什么空间

2.emoji大小与动态效果

2.1 打断emoji表情与文本

在主题文件的function.php加入以下代码，注意.comment-content-text和emoji-comment。

.comment-content-text是你主题评论区的类名，每个主题不太一样，7B2主题可以用这个。

emoji_xcbtmw是你需要自定义的emoji文本符号的类名。

//wordpress修改emoji符号-https://www.xcbtmw.com/29797.html
function add_emoji_class_to_comment_content() {
?>
<script>
jQuery(document).ready(function($) {
// 获取所有评论内容中的文本
var commentTexts = $('.comment-content p');
commentTexts.each(function() {
var commentText = $(this).html(); // 使用 .html() 保留 HTML 结构
var updatedCommentText = addClassToEmoji(commentText);
$(this).html(updatedCommentText);
});
function addClassToEmoji(text) {
// 更广泛的emoji正则表达式，匹配更多emoji字符
var emojiRegex = /([u{1F600}-u{1F64F}u{1F300}-u{1F5FF}u{1F680}-u{1F6FF}u{1F700}-u{1F77F}u{1F780}-u{1F7FF}u{1F800}-u{1F8FF}u{1F900}-u{1F9FF}u{1FA00}-u{1FA6F}u{1FA70}-u{1FAFF}u{2600}-u{26FF}u{2700}-u{27BF}u{FE00}-u{FE0F}])/gu;
var updatedText = text.replace(emojiRegex, '<div class="emoji_xcbtmw">$1</div>');
return updatedText;
}
});
</script>
<?php
}
add_action('wp_footer', 'add_emoji_class_to_comment_content');
//wordpress修改emoji符号结束-https://www.xcbtmw.com/29797.html