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

前言

　　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、安装了静态缓存插件。