WordPress | 2023年12月26日22:34:23
WordPress前端页面显示访问者IP地址,再通过IP归属地API接口获取IP位置地点信息,方便访问者查看自己电脑、手机等设备的宽带IP地址和IP位置地点信息,效果见下图。
一、进入WordPress后台 > 主题 > 主题文件编辑器 > 点击“主题页脚(footer.php)”
代码一:粘贴到“主题页脚”里的顶部位置
<?php $ip_address = $_SERVER['REMOTE_ADDR']; ?>
代码二:粘贴到底部导航显示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>
三、在大米API网站免费注册登录账号(https://api.qqsuu.cn/user/register.html),在左侧栏菜单点击“接口列表”,在列表中找到“IP地址查询②”,点击右边的“购买”
四、点击“年付”,再点击“立即购买”
五、在左侧栏菜单点击“我的接口”,复制API Key。
六、“主题页脚”文件中的代码二找到“这里换成您的API Key”,替换成你的API Key,最后点击“更新文件”。
1、网站服务器有IPv6地址;
2、安装了静态缓存插件。
本文标题:WordPress前端页面显示访问者IP地址 通过IP归属地API接口获取IP位置地点信息
本文链接:https://www.bufanz.com/post/306.html
版权声明:本文章是 不凡博客 的原创文章,未经允许请勿转载本文章!
相关文章