不凡博客
本站主要内容是WordPress和建站相关,分享各类实用软件,欢迎关注&收藏本博客网站!
首页 > WordPress > 正文

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

WordPress | 2023年12月26日22:34:23

腾讯云高性价比国内轻量服务器,2核2G4M,99元/年,新老用户同享,续费同价

前言

  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后台 > 主题 > 主题文件编辑器 > 点击“主题页脚(footer.php)”

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

<?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位置地点信息

网站有以下任意情况无效

1、网站服务器有IPv6地址;

2、安装了静态缓存插件。

The End
淘宝购物先领券,更省钱

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

本文链接:https://www.bufanz.com/post/306.html

版权声明:本文章是 不凡博客 的原创文章,未经允许请勿转载本文章!