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

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

本文为米扑博客原创：总结分享 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 作用域内，添加两行代码：

1 2	`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: <div class="comment-author vcard">
wp-includes/class-walker-comment.php: <div class="comment-author vcard">

3）修改评论模板文件

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

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

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

<span id="comment_ua_info" class="comment_ua_info" style="white-space: nowrap;overflow: hidden;display:none;">

<?php echo '   '; CID_print_comment_flag(); echo ' '; CID_print_comment_browser(); ?>

<?php echo "<span id='ua-info-text' style='font-size:14px;font-weight:normal;color:#aaa;'>"; echo convertip(get_comment_author_ip()); echo "</span>"; ?>

</span>

添加后的效果：

简单解释：

<span id="comment_ua_info" ... > 包含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代码

<script>

jQuery('.comment-body').hover(

function(){

jQuery(this).find('span.comment_ua_info').show();

},

function(){

jQuery(this).find('span.comment_ua_info').hide();

});

jQuery('.comment-body').click(

function(){

jQuery(this).find('span.comment_ua_info').show();

});

</script>

说明：

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

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

<span id="comment_show_ip" class="comment_show_ip" style="color:blue; font-size:14px;">显示评论IP</span>

2）添加js代码到 footer.php

进入主题目录，修改页脚文件 footer.php

vim footer.php

添加js代码如下：

<script>

jQuery(".comment_show_ip").click(function(){

if(jQuery(".comment_show_ip").text() == "显示评论IP") {

jQuery(".comment_ua_info").show();

jQuery(".comment_show_ip").html("隐藏评论IP");

}

else {

jQuery(".comment_ua_info").hide();

jQuery(".comment_show_ip").html("显示评论IP");

}

});

</script>

3）检阅成果

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

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

好了，折腾完了，到底蛋闲不闲疼不疼，看看米扑博客的效果再说吧 <img draggable="false" class="emoji" alt="

WordPress显示评论者IP归属地、浏览器、终端设备、电信运营商相关推荐

米扑博客：总结分享 WordPress显示评论者IP归属地、浏览器、终端设备、电信运营商...
在网上查资料闲逛,偶然间看到了张戈博客的评论框有点意思,于是就收走拿到了我的米扑博客. 本文为米扑博客原创:总结分享 WordPress显示评论者IP归属地.浏览器.终端设备.电信运营商 WordPr ...
米扑博客：总结分享 WordPress显示评论者IP归属地、浏览器、终端设备、电信运营商... 1
2019独角兽企业重金招聘Python工程师标准>>> 在网上查资料闲逛,偶然间看到了张戈博客的评论框有点意思,于是就收走拿到了我的米扑博客. 本文为米扑博客原创:总结分享 Word ...
[转]用Whois获得电信运营商的IP地址是如何分配的?
[转]用Whois获得电信运营商的IP地址是如何分配的? Linux下获得一些中国电信运营商的IP地址分配情况: APNIC是管理亚太地区IP地址分配的机构,它有着丰富准确的IP地址分配库,同时这些信 ...
获取客户端外网IP，省份，城市，运营商
/// <summary> /// 获取客户端外网IP,省份,城市,运营商 /// 2012年12月18日 15:07 /// </summary> ...
python 批量获取ip的国家省份市区以及运营商生成excel文件
废话不多说直接上代码这里有几个点需要注意下 #!/usr/bin/env python # -*- coding: utf-8 -*- import requests from bs4 import ...
php禁止国外访问,wordpress 禁止国外ip访问
一般做国内站,国外ip都是来攻击或撞库的,没有国外用户的需求,就可以在进入网站时进行ip检查,如果是国外ip就禁止访问阿里提供了一个查询ip归属的接口,可以用来获取当前ip的真实地址,但对访问速度会 ...
(转)路由器WAN口IP显示为10、100、172开头，网络被电信联通等运营商做了NAT转发
转自:http://www.ekingcn.com/school/pcfaq_1658_202.html 1.表现形式: 路由器拨号获得的公网IP变成了一个以100开头的IP(或者是10.172开头) ...
通过APNIC获取各运营商IP网段
APNIC是管理亚太地区IP地址分配的机构,它有着丰富准确的IP地址分配库,同时这些信息也是对外公开的!下面就让我们看看如何在Linux下获得一些电信运营商的IP地址分配情况: shell> w ...
批量获取ip运营商_通信公司员工收钱开通IP多拨被用于诈骗，6人获刑
如今的网络诈骗手段层出不穷,有时让人防不胜防,不少人因此遭受重大损失. 6月3日,四川资阳市雁江区人民法院开庭审理对一起信息网络犯罪活动案作出一审宣判,涉案6人均被判处缓刑.原来,某通信运营商资阳分公 ...

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

插件实现

WordPress显示评论者IP归属地、浏览器、终端设备、电信运营商相关推荐

最新文章

热门文章