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

GitCafe 发布于2019-07-01 12:25 / 2691人阅读

摘要：在网上查资料闲逛，偶然间看到了张戈博客的评论框有点意思，于是就收走拿到了我的米扑博客。

在网上查资料闲逛，偶然间看到了张戈博客的评论框有点意思，于是就收走拿到了我的米扑博客。
本文为米扑博客原创：总结分享 WordPress显示评论者IP归属地、浏览器、终端设备、电信运营商

WordPress显示评论者IP归属地、浏览器、终端设备、电信运营商，如下图：

米扑博客评论演示效果： https://blog.mimvp.com/donate/#comments

恩，本来搞定了不打算写博客的，但是想了想原文步骤繁琐，有些细节还没有，都是自己一点一点捣鼓出来的，很多朋友可能用得到，所以还是总结分享写出来
张戈博客，WordPress显示访客UA信息，共分了两篇博客：
WordPress显示访客UA信息：Show UserAgent纯代码轻度汉化版
分享WordPress显示评论者IP的归属地及运营商信息的2种方案

本文，将合并两篇博客的内容，主要合并了两个脚本，并对国旗、浏览器、终端设备等图标进行了美化

插件实现
1）Show UserAgent 插件 （推荐）
官网： 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. 下载zip包
米扑博客整理了图标和文字两种显示方式，命名为加强版zip包
Show UserAgent 加强版： show-useragent-pro.zip

2. 上传到主题根目录
把 show-useragent-pro.zip 上传到主题的根目录，注意不是WordPress根目录
例如，米扑博客使用的主题是 officefolders ，则zip包上传至 wp-content/themes/officefolders/ 目录下
上传后，解压zip包：
unzip show-useragent-pro.zip
解压后的文件列表如下：

tree show-useragent -L 1

show-useragent
├── browsers
├── flags
├── ip2c
├── ip2c-qqwry.dat
├── ip2c-text.php
└── show-useragent.php

3. 添加代码到 functions.php

vim functions.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根目录下，搜索定位到的关键词，如上图中的 "comment-author vcard" ，找到对应的评论模板文件
一般模板文件在 wp-include/ 目录下，所以搜索命令为：

# grep "comment-author vcard" wp-includes/ -r | grep -vE ".svn|.git"
wp-includes/class-walker-comment.php:           
wp-includes/class-walker-comment.php:

3）修改评论模板文件
打开步骤2）找到的评论模板文件

vim wp-includes/class-walker-comment.php

再次搜索关键词 "comment-author vcard"，定位到在文件中的具体位置，添加代码如下：



"; echo convertip(get_comment_author_ip()); echo ""; ?>

添加后的效果：

简单解释：
包含IP归属地、浏览器，以及文本信息等，目的是为后面鼠标悬浮显示时使用，js实现显示和隐藏效果
CID_print_comment_flag() 显示IP归属地的国旗
CID_print_comment_browser() 显示浏览器和用户设备
convertip(get_comment_author_ip()) 显示IP归属地的文本信息

至此，显示评论者信息已经实现了
如果想看效果，先把 id="comment_ua_info" 中的样式 display:none; 去掉，就可以看到效果了

5. 添加代码到 footer.php
初看步骤4的效果还不错，但是看上去信息会很多，颜色等有点乱，于是想追求极致，还需要继续努力
为了实现鼠标悬浮在评论框才显示的效果，我们需要结合js实现，添加js代码到主题下的footer.php中

vim footer.php

添加js代码

说明：
1）jQuery(".comment-body").hover 悬浮事件，主要用于PC电脑端，但是手机端没有悬浮事件
2）jQuery(".comment-body").click 点击事件，主要用于手机端，点击可以显示，但需要注意click事件里不要加hide，否则在电脑端与hover相冲突
3）span.comment_ua_info 标签，是在步骤4中特别说明的，记得要把 id="comment_ua_info" 中的样式设置为 display:none; 默认不显示ua-info信息

至此，评论者IP归属地等信息默认是隐藏了，只有当鼠标悬浮在评论框时才会显示出来
演示效果，请见米扑博客：https://blog.mimvp.com/donate/#comments

6. 按钮显示评论所有IP
上面的功能，在一些博客里都已实现，我的米扑博客只是把人家的效果，用代码实现分享出来
最后，奉献一点小创新，个人感觉还是比较实用的，就是添加一个按钮，能够一键显示所有IP
恩，你说的对，步骤4早已经实现了，折腾出步骤5的隐藏IP，现在步骤6又整出一键显示所有IP，闲的蛋疼，哈
恩，蛋疼也好，折腾也罢，也要搞出来，微创新嘛，直接上代码和步骤啦
1）修改评论文件 comments.php
进入主题目录，修改评论文件 comments.php

vim comments.php

添加一行用于显示的按钮（按钮放哪儿，由你自己决定了）

显示评论IP

2）添加js代码到 footer.php
进入主题目录，修改页脚文件 footer.php

vim footer.php

添加js代码如下：

3）检阅成果
a）点击“显示评论IP”，则显示全部评论IP，并把按钮置为“隐藏评论IP”，如下图

b）点击“隐藏评论IP”，则隐藏全部评论IP，并把按钮置为“显示评论IP”，如下图

好了，折腾完了，到底蛋闲不闲疼不疼，看看米扑博客的效果再说吧 ?
米扑博客：https://blog.mimvp.com/donate/#comments

混合云私有云 asp获取ip归属地查询ip地址服务器归属地归属地手机归属地

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/30671.html

收集整理适用博客建站免费开源Wordpress主题-简约好看的WP主题

摘要：最重要的就是找一个适合自己的主题了。事实上，免费主题也非常多，而且很多的免费主题在功能上和界面美观上已经大大超过了付费的主题。加上这些主题都是开源的，基本上可以在上找得到源码，安全性是没有问题，主题的作者也在不断更新当中。WordPress最重要的就是找一个适合自己的主题了。好一点的WordPress主题基本上都是要收费的，而且价格还不便宜，这导致了不少的新手朋友们很为难。而有时我们仅仅根据...

番茄西红柿 2021-07-30 14:57 评论0 收藏2637
电信流量卡套餐介绍（北京电信校园卡）- 月费20元 20GB全国流量+30GB定向流量 500分钟通

摘要：如果我们也有需要电信流量卡套餐的话，可以选择当前正在进行的北京电信校园卡。每月都包含全国通用流量全国定向流量分钟通话。这个渠道是官方的，直接在北京电信官网渠道申请在先提交信息的。我们每个月的手机流量够用吗？由于各种特殊的原因我们很多朋友常年用的主卡肯定是不能更换的，毕竟绑定各种账户信息，如果注销重新办理的话确实是比较麻烦。于是运营商也正是抓住这个特点，我们的原手机卡可能每月需要几十元或者一百...

YacaToy 2021-10-14 09:50 评论0 收藏0
IT，互联网，科技，技术博客网站推荐

摘要：科技博客很多，但质量高的不多，发现质量高的，但又记不住，所以索性把它们都记下来。促进软件开发领域知识与创新的传播是创意工作者们的社区。科技博客很多，但质量高的不多，发现质量高的，但又记不住，所以索性把它们都记下来。米扑博客，深耕写博客近十年，总结了许多好博客，主要偏向互联网、科技资讯、技术分享本文原文，来自于米扑博客分享：IT，互联网，科技，技术博客网站推荐国内科技博客极客公...

codecraft 2019-08-22 17:14 评论0 收藏0
IT，互联网，科技，技术博客网站推荐

摘要：科技博客很多，但质量高的不多，发现质量高的，但又记不住，所以索性把它们都记下来。促进软件开发领域知识与创新的传播是创意工作者们的社区。科技博客很多，但质量高的不多，发现质量高的，但又记不住，所以索性把它们都记下来。米扑博客，深耕写博客近十年，总结了许多好博客，主要偏向互联网、科技资讯、技术分享本文原文，来自于米扑博客分享：IT，互联网，科技，技术博客网站推荐国内科技博客极客公...

cangck_X 2019-07-01 12:27 评论0 收藏0