子比美化 – 侧边用户UA信息小工具
这是一款子比主题的侧边侧边用户UA信息小工具，这款小工具非常详细的定位当前的位置，并且还有精准的IP，不过只能用户可以看到自己的地址和IP，喜欢的自行部署吧！代码部署
定位：WP后台–>>外观–>>小工具–>>自定义HTML，将下面的代码放到里面即可！
<div class="ua-info-widget" style="border: 1px solid #333; border-radius: 10px; padding: 15px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); background-color: #1a1a1a; color: #f0f0f0; max-width: 300px; transition: all 0.3s ease;">
<h3 style="margin-top: 0; color: #ffffff; border-bottom: 1px solid #444; padding-bottom: 10px; font-size: 16px; font-family: Arial, sans-serif;">设备信息</h3>
<div id="ua-loading" style="color: #bbb; padding: 10px 0; font-size: 14px;">加载中...</div>
<ul id="ua-info-list" style="display: none; list-style: none; padding: 0; margin: 10px 0;">
<li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">IP:</strong> <span id="ua-ip" style="color: #f0f0f0;"></span></li>
<li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">位置:</strong> <span id="ua-address" style="color: #f0f0f0;"></span></li>
<li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">浏览器:</strong> <span id="ua-browser" style="color: #f0f0f0;"></span></li>
<li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">系统:</strong> <span id="ua-os" style="color: #f0f0f0;"></span></li>
<li style="padding: 6px 0; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">设备:</strong> <span id="ua-device" style="color: #f0f0f0;"></span></li>
</ul>
<div id="ua-error" style="display: none; color: #ff6b6b; font-size: 14px; padding: 10px; background-color: #2d1b1b; border-radius: 6px; border: 1px solid #4a2727;"></div>
</div>
<script>
// 检测系统是否偏好暗色模式并适配
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
// 如果是亮色模式，调整样式
document.querySelector('.ua-info-widget').style.backgroundColor = '#ffffff';
document.querySelector('.ua-info-widget').style.color = '#333';
document.querySelector('.ua-info-widget').style.borderColor = '#e0e0e0';
// 调整文本颜色
const textElements = document.querySelectorAll('#ua-info-list span');
textElements.forEach(el => {
el.style.color = '#333';
});
// 调整标题和分隔线
document.querySelector('.ua-info-widget h3').style.color = '#333';
document.querySelector('.ua-info-widget h3').style.borderBottomColor = '#f0f0f0';
// 调整加载状态
document.getElementById('ua-loading').style.color = '#666';
}
// 获取UA信息
fetch('https://v2.xxapi.cn/api/ua')
.then(response => {
if (!response.ok) {
throw new Error('网络响应不正常');
}
return response.json();
})
.then(data => {
document.getElementById('ua-loading').style.display = 'none';
if (data.code === 200 && data.data) {
document.getElementById('ua-info-list').style.display = 'block';
document.getElementById('ua-ip').textContent = data.data.ip || '未知';
document.getElementById('ua-address').textContent = data.data.address || '未知';
document.getElementById('ua-browser').textContent =
(data.data.browser || '未知') + ' ' + (data.data.browserVersion || '');
document.getElementById('ua-os').textContent = data.data.os || '未知';
document.getElementById('ua-device').textContent = data.data.deviceType || '未知';
} else {
document.getElementById('ua-error').textContent = data.msg || '获取信息失败';
document.getElementById('ua-error').style.display = 'block';
}
})
.catch(error => {
document.getElementById('ua-loading').style.display = 'none';
document.getElementById('ua-error').textContent = '加载失败: ' + error.message;
document.getElementById('ua-error').style.display = 'block';
});
</script>
页:
[1]