本博客现已支持所有用户表情评论(附操作方法)

曾几何时,本博客文章和评论只有我能够添加表情,而其他用户羡煞此功能

为了给广大(虽然昨天只有2PV。。)访客平等、良好的用户体验,现在我增加了评论表情功能欢迎体验 当然可能还有bug也欢迎反馈

具体方法为:

1、后端操作:首先下载从https://qzs.qq.com/qzone/em/e100.gif到https://qzs.qq.com/qzone/em/e999.gif的所有文件保存到服务器的某个文件夹,我保存在了网站根目录/public/qqemoji下。然后编辑wp-includes目录下comment-template.php文件,在第2097行

$output = $walker->paged_walk( $_comments, $r['max_depth'], $r['page'], $r['per_page'], $r );

之后插入两行

$output=preg_replace('/\[(e\d*)\]/', '<img src="/public/qqemoji/$1.gif">', $output);
$output=preg_replace(array('/\\\\\[/','/\\\\\]/'), array('[',']'), $output);

为了安全考虑所有HTML标签依然是不可用的,我通过将所有形如[e100]的转换为<img src="public/qqemoji/e100.gif"/>的方法显示表情。

有好奇宝宝可能要问万一我就想在评论里写[e100]原文怎么办?!你怎能转为标签了呢,剥夺了我自由评论的权力!虽然正常人不会有这种需求,但作为严谨的程序员我当然不能让评论功能不完整。不用担心,看第二行,正是为了解决这个问题的。只需评论\[e100\]即可在转义后显示为[e100]原文啦

这是在输出时将[e100]转换为img标签输出,而评论在数据库中存储的时候依然为[e100]原文,在显示时转换而不是在存储时转换的好处是:如果以后存储小表情的地址改变了,那只需要改变一行代码即可,而不需要UPDATE数据库中所有小表情的地址(我怎么会告诉你其实是我没有找到如果在存储时转换代码应该插的位置)

2、前端操作:还是comment-template.php文件,在第2377行echo $args['comment_notes_after'];之后插入

?>
<table>
<tr>
<script>
function insertEmoji(str) {
var obj=document.getElementById('comment');
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
var startPos = obj.selectionStart,
endPos = obj.selectionEnd,
cursorPos = startPos,
tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
obj.focus();
}
var i,cnt=0,cnt_per_line=Math.ceil(jQuery('#comments').width()/40);
for (i=100;i<=405;i++) {
if (i==210 || i==278) continue;
if (cnt!=0 && cnt%cnt_per_line==0) document.write('</tr><tr>');
document.write('<td><a href="javascript:void(0);" onclick="insertEmoji(\'[e'+i+']\')"><div style="width: 24px;height: 24px;background-image: url(/public/qqemoji/e'+i+'.gif);"></div></a></td>');

cnt++;
if (i==298) i=399;
}
</script>
</tr>
</table>
<?php

这是在评论区添加表情按钮和点击按钮的事件

好啦这就是给Wordpress博客添加表情评论功能的方法啦 电视机前的小朋友们你们有没有学会呢 如果学会的话举起你的小手让我看见好吗

《本博客现已支持所有用户表情评论(附操作方法)》有2个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

地方所限只列了这些常用的,但如果你打开例如https://tiny.zhouii.com/qqemoji/e888.gif发现不是404也可以手动加入[e888]之类的喔~