作为一名（伪）UP 主，我一直想在自己的博客 kina 漫记 上展示 B 站个人资料和直播状态。找了一圈发现要么太花哨，要么功能不全，干脆自己写了一个 WordPress 插件。
为什么要做这个插件？
市面上虽然有一些 B 站展示工具，但要么是嵌入 iframe 的第三方页面，要么是样式不符合我的网站风格。我想要的是：
- 原生集成 直接嵌入 WordPress，不需要外部跳转
- 实时状态 显示当前是否在直播，直播间标题是什么
- 简约透明 白色半透明卡片，适配各种主题背景，不抢戏
最终效果
先看一下成品效果：
个人资料卡片
白色半透明质感的个人资料卡片，显示头像、等级、直播状态和统计数据
追番列表
竖屏封面展示的追番网格，带有地区标签和观看进度
迷你状态
可以放在导航栏的紧凑状态显示，实时直播状态
技术实现
1. B 站 API 接入
B 站没有官方开放的 Web API，但有不少公开接口可以用：
php
// 获取用户信息
https://api.bilibili.com/x/space/acc/info?mid={uid}
// 获取直播状态
https://api.live.bilibili.com/room/v1/Room/getRoomInfoOld?mid={uid}
// 获取追番列表
https://api.bilibili.com/x/space/bangumi/follow/list?vmid={uid}2. 核心功能实现
数据缓存策略
B 站 API 虽然没有 Steam 那么严格的频率限制，但频繁调用还是不太好：
php
// 用户数据缓存 5 分钟
set_transient('kina_bili_user_' . $uid, $user, 300);
// 追番列表缓存 1 小时（追番不会频繁变化）
set_transient('kina_bili_bangumi_' . $uid, $bangumi, 3600);实时状态更新
前端使用 AJAX 轮询，每 30 秒更新一次状态：
JavaScript
function updateLiveStatus() {
// 页面不可见时暂停更新
if (document.hidden) return;
fetch(ajaxUrl, {
method: 'POST',
body: JSON.stringify({ action: 'kina_get_bili_status' })
})
.then(res => res.json())
.then(data => {
// 更新 DOM
updateUI(data);
});
}
setInterval(updateLiveStatus, 30000);3. 简约透明 UI 设计
这是我最满意的一部分。白色半透明卡片需要恰到好处的透明度：
css
.kina-bili-profile {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}为了让效果更自然，我添加了多层叠加：
- 底层：白色半透明背景
- 中层：轻微模糊滤镜
- 顶层：半透明白色边框
直播中状态的特殊处理
当检测到正在直播时，需要一眼就能看出来：
css
.kina-live-badge {
background: #ff4757;
animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4); }
50% { box-shadow: 0 0 0 8px rgba(255, 71, 87, 0); }
}红色脉冲动画让”直播中”状态非常醒目。
4. 竖屏追番封面
B 站的番剧封面是竖屏的，很适合网格展示。为了防止图片加载失败，我加了 referrerpolicy="no-referrer" 来绕过防盗链：
HTML
<img src="https://{cover_url}"
referrerpolicy="no-referrer"
onerror="this.src='fallback.jpg'">5. 遇到的坑
问题 1：B 站图片 403
B 站图片有防盗链机制，直接引用会返回 403。
解决： 给所有 <img> 标签添加 referrerpolicy="no-referrer"，这样请求就不会带上 Referer 头。
问题 2：视频投稿功能挂了
早期版本支持展示视频投稿列表，但 B 站后来给视频 API 加了签名验证（WBI 签名），公开接口没法直接用了。
解决： v1.0.3 无奈删除了视频投稿功能，只保留个人资料、追番和直播状态。
问题 3：数据为空
第一次安装后显示空白，排查发现是 B 站隐私设置的问题。
解决： 在插件设置页面加了提示，引导用户去 B 站隐私设置里公开关注列表、粉丝列表和追番列表。
问题 4：数组访问警告
跟 Steam 插件一样，API 返回的字段不一定都存在。
解决： 所有数组访问前都用 isset() 检查：
php
$sign = isset($user['sign']) ? $user['sign'] : '这个人很懒，什么都没有写~';使用方法
安装
下载插件文件，上传到 wp-content/plugins/ 在 WordPress 后台激活 进入左侧菜单 B 站集成 设置页面，填写 B 站 UID 确保 B 站隐私设置已公开相关列表
短代码
在文章或页面中插入：
plain
[kina_bilibili_profile] // 完整资料卡片
[kina_bilibili_bangumi] // 追番列表
[kina_bilibili_status] // 迷你状态（适合侧边栏）参数说明
[kina_bilibili_bangumi] 支持以下参数：
limit="6" — 指定显示数量（默认 12）
show_progress="false" — 隐藏观看进度未来计划
- [ ] 视频投稿展示（等找到绕过 WBI 签名的方法）
- [ ] 直播间弹幕展示
- [ ] 深色 / 浅色主题切换
- [ ] 更多统计信息（获赞数、播放量等）
源码下载
完整代码已开源在 GitHub：点击下载
结语
这个插件从 v1.0.0 到 v1.0.5 迭代了好几版，最大的教训是：不要依赖没有官方文档的 API。B 站加签名验证那次直接废掉了一个功能，现在只能等有没有更好的公开接口。
看到最终效果的那一刻，感觉还是很值的。如果你也是 WordPress + B 站用户，不妨试试这个插件。
有任何问题欢迎在评论区留言。
