评论本地化并为评论框添加 OwO 表情

由于多说经常抽风,加上对移动端也不够友好,便决定停用多说。正好前两天刚刚帮 LWL 搞了个 OwO ,就顺便给我自己加上了。
OwO 是 Diygod 写的一个炒鸡萌的表情插件:https://www.anotherhome.net/2582

由于多说评论会自动回写到本地数据库,所以不需要对数据进行操作。


首先在主题的 functions.php 中插入代码,使评论能够支持图片。

function auto_comment_image( $comment ) {
	global $allowedtags;
	$allowedtags['img'] = array('src' => array (), 'alt' => array ());
	return $comment;
}
add_filter('preprocess_comment', 'auto_comment_image');

然后在评论框代码的合适位置加上 OwO 的 div :

<div class="OwO"></div>

接着分别在主题头部和尾部引入 OwO 的 css 和 js 文件,并修改主题的 js ,在合适的位置加入以下语句即可:

new OwO({
    logo: 'OωO表情',
    container: document.getElementsByClassName('OwO')[0], //OwO 按钮的 class
    target: document.getElementsByClassName('text_area')[0], //评论框 class
    api: 'https://public.admincdn.com//wp-content/themes/quench/owo/OwO.json', //储存表情数据的 json地址
    position: 'up', //弹出框的方向,down 或 up
    width: '100%', //表情框的宽度
    maxHeight: '250px' //表情框的最大高度
});

由于本站主题带有全站 Pjax ,所以需要在 Pjax 的回调函数中调用上述代码。因此,我对 ajax.js 的修改如下:

function setOwO() {
	new OwO({
	    logo: 'OωO表情',
	    container: document.getElementsByClassName('OwO')[0],
	    target: document.getElementsByClassName('text_area')[0],
	    api: 'https://public.admincdn.com//wp-content/themes/quench/owo/OwO.json', 
	    position: 'up',
	    width: '100%',
	    maxHeight: '250px'
	});
}

setOwO(); //这一句添加到回调函数内即可

这样就算完成了 OwO 的添加。不过如果要安心使用本地评论框,还需要针对垃圾评论进行有效过滤。可以考虑使用 Akismet 插件,或者参照 Diygod 的这篇文章,通过隐藏的 token 值防止自动评论。

上一篇
下一篇