WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息

test 29 0
摘要:

WordPress前端页面显示访问者IP地址,再通过IP归属地API接口获取IP位置地点信息,方便访问者查看自己电脑、手机等设备的宽带IP地址和IP位置地点信息。

前言

  WordPress前端页面显示访问者IP地址,再通过IP归属地API接口获取IP位置地点信息,方便访问者查看自己电脑、手机等设备的宽带IP地址和IP位置地点信息,效果见下图。

WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息

WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息

WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息

WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息

使用方法

一、进入WordPress后台 > 主题 > 主题文件编辑器 > 点击主题页脚

代码一:粘贴到“主题页脚”里的顶部位置

<?php
$ip_address = $_SERVER['REMOTE_ADDR'];
?>

WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息

代码二:粘贴到底部导航显示IP地址和位置地点的位置

<div id="ip-location-info"></div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var ip_address = "<?php echo $_SERVER['REMOTE_ADDR']; ?>";
        var infoDiv = document.getElementById('ip-location-info');
        fetch('https://api.qqsuu.cn/api/dm-iplocation?ip=' + ip_address + '&apiKey=这里换成您的API Key')
            .then(response => response.json())
            .then(data => {
                var displayString = '您的IP地址:' + ip_address + '<br>您的地点:';
                if (data.code === 200) {
                    var country = data.country;
                    var province = data.province;
                    var city = data.city;
                    if (country !== '中国') {
                        displayString += country;
                    }
                    if (province !== '') {
                        displayString += province;
                    }
                    if (city !== '') {
                        displayString += city;
                    }
                } else {
                    displayString += '无法获取IP地址归属地信息';
                }
                infoDiv.innerHTML = displayString;
            })
            .catch(error => console.error('API请求失败', error));
    });
</script>
</div>

WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息

三、在大米API网站免费注册登录账号(https://api.qqsuu.cn/user/register.html),在左侧栏菜单点击接口列表,在列表中找到IP地址查询②,点击右边的购买

WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息

四、点击年付,再点击立即购买

WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息

五、在左侧栏菜单点击我的接口,复制API Key

WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息

六、主题页脚文件中的代码二找到这里换成您的API Key,替换成你的API Key,最后点击更新文件

WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息

提醒

  大米API的IP地址查询②API接口,不支持IPv6地址,如果你的网站服务器有IPv6地址,前端页面会显示无法获取IP地址归属地信息

发表评论 取消回复
表情 图片 链接 代码

分享