当前位置: 首页 > 后端技术 > PHP

米扑博客:总结分享WordPress显示评论者IP归属、浏览器、终端设备、电信运营商

时间:2023-03-29 19:36:23 PHP

在网上闲逛查资料,无意中看到了张哥博客的评论框,有点意思,就拿走了,搞定了我的米扑博客。本文为米扑博客原创:总结分享WordPress显示评论者IP归属、浏览器、终端设备、电信运营商WordPress显示评论者IP归属、浏览器、终端设备、电信运营商,如下图:米扑博客评论demo效果:https://blog.mimvp.com/donate/#comments嗯,搞定后本来不打算写博客的,后来想了想,原文的步骤是繁琐,有些细节还没有。我就是一点一点的摆弄出来的,可能很多朋友都会用到,所以还是总结分享一下,写张哥的博客。WordPress显示访客UA信息。分为两个博客:WordPress显示访客UA信息:ShowUserAgentpurecodelight中文版分享WordPress显示评论本文将两个博客的内容合并,主要合并两个脚本,国旗,浏览器、终端设备等图标将进行美化。插件实现1)ShowUserAgent插件(推荐)官网:https://wordpress.org/plugins/show-useragent/下载:show-useragent.1.0.9.zip效果图如下:2)WP-UserAgent插件(适合老外)官网:https://wordpress.org/plugins/wp-useragent/下载:wp-useragent.zip效果图如下:代码实现在这里,大家注意是重点,按步骤操作即可1.下载压缩包米扑博客整理有图标和文字两种显示方式,命名为增强版压缩包ShowUserAgent增强版:show-useragent-pro.zip2。上传到主题根目录上传show-useragent-pro.zip到主题根目录,注意不是WordPress根目录例如米扑博客使用的主题是officefolders,那么上传zip包到wp-content/themes/officefolders/目录。上传后解压压缩包:unzipshow-useragent-pro.zip解压后的文件列表如下:treeshow-useragent-L1show-useragent├──browsers├──flags├──ip2c├──ip2c-qqwry.dat├──ip2c-text.php└──show-useragent.php3.添加代码到functions.phpvimfunctions.php在php作用域中,添加两行代码:include("show-useragent/show-useragent.php");//显示访客信息include("show-useragent/ip2c-text.php");//IP归属地和运营商查询功能4.在xxx-comment.php模板中添加代码这里我们需要在评论者用户后面添加IP归属地、浏览器图标等信息,所以我们需要找到评论者所在的位置。搜索方法如下:1)打开有评论的网页,按F12(Mac用户组合键option+command+i)进入开发者模式,定位评论者,例如:阳光岛大师2)搜索定位的WordPress根目录下的关键字,搜索定位的关键字,如上图“评论-作者名片”,找到对应的评论模板文件。一般模板文件在wp-include/目录下,所以搜索命令为:#grep"comment-authorvcard"wp-includes/-r|grep-vE".svn|.git"wp-includes/class-walker-comment.php:wp-includes/class-walker-comment.php:3)修改评论模板文件打开步骤2)找到评论模板文件vimwp-includes/class-walker-comment.php再次搜索关键字"comment-authorvcard",定位到具体位置在文件中,添加如下代码:";echoconvertip(get_comment_author_ip());echo"";?>添加效果:简单解释:包含IP归属、浏览器、文本信息等,目的是为了后面的鼠标悬停显示用,js实现显示隐藏效果CID_print_comment_flag()显示IP归属地的国旗CID_print_comment_browser()显示浏览器和用户设备convertip(get_comment_author_ip())显示IP归属地的文字信息至此,显示评论者信息已经实现如果想看效果,先setthestyleinid="comment_ua_info"display:none;去掉,可以看到效果5.将代码添加到footer.php乍一看第4步的效果还不错,b但是好像信息量会很多,颜色有点乱,所以想追求极致,还是要继续努力才能实现鼠标悬停在评论上的效果box,我们需要结合js实现,在主题下footer.php添加js代码vimfooter.php添加js代码说明:1)jQuery('.comment-body').hover悬停事件,主要用于PC端,手机端没有hover事件2)jQuery('.comment-body').click点击event,主要用在手机端,点击显示,但是需要注意点击事件中不要添加hide,否则会和电脑端的hover冲突3)span.comment_ua_info标签在中有专门说明step4,记得把id="comment_ua_info"中的style设置为display:none;默认不显示ua-info信息。此时评论者的IP地址等信息默认隐藏。只有当鼠标悬停在评论框上时才会显示,以达到演示效果。参见米扑博客:https://blog.mimvp.com/donate/#comments6。按钮显示所有IP功能的评论,部分博客已经实现。我的米扑博客只是用代码实现了别人的效果,分享到最后,我想贡献一点创新。个人感觉还是比较实用的。就是添加一个可以一键显示所有IP的按钮。嗯,你是对的。第4步已经实现。把第5步的隐藏IP扔掉,现在第6步一键显示所有IP。蛋疼,哈恩,蛋疼,折腾也无所谓,自己想办法,微创新,直接上传代码和步骤就可以了1)修改注释文件comments.php进入主题目录,修改评论文件comments.phpvimcomments.php增加一行显示按钮(按钮放哪看你的)显示评论IP2)在footer.php添加js代码进入主题目录,修改页脚文件footer.phpvimfooter.php添加js代码如下:3)评论结果a)点击“显示评论IP”显示所有评论IP,将按钮设置为“隐藏评论IP”,如下图b)点击“隐藏评论IP”,然后在所有IP上隐藏评论,将按钮设置为“显示评论IP”,如下图。折腾了这么多,到底疼不疼,来看看米扑博客的效果吧?米扑博客:https://blog.mimvp.com/donate/#comments