作为一名游戏爱好者，我一直想在自己的博客kina漫记上展示 Steam 游戏库和实时在线状态。经过一番折腾，我开发了这个 WordPress 插件，今天就来分享一下实现过程和最终效果。

为什么要做这个插件？

市面上虽然有一些 Steam 展示工具，但要么是需要嵌入 iframe 的第三方服务，要么是样式不符合我的网站风格。我想要的是：

• 原生集成
• 直接嵌入 WordPress，不需要外部跳转
• 实时状态
• 显示当前是否在线，正在玩什么游戏
• 美观 UI
• 采用现在流行的磨砂玻璃设计

最终效果

先看一下成品效果：

磨砂玻璃质感的个人资料卡片，显示等级、在线状态和最近游戏

竖屏封面展示的游戏库，带有时长统计和”最近”标签

可以放在导航栏的紧凑状态显示

技术实现

1. Steam API 接入

Steam 提供了官方的 Web API，主要用到以下几个接口：

// 获取玩家基本信息
https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v2/

// 获取游戏库
https://api.steampowered.com/IPlayerService/GetOwnedGames/v1/

// 获取最近游戏
https://api.steampowered.com/IPlayerService/GetRecentlyPlayedGames/v1/

// 获取 Steam 等级
https://api.steampowered.com/IPlayerService/GetSteamLevel/v1/

2. 核心功能实现

数据缓存策略

Steam API 有调用频率限制，所以需要做好缓存：

// 玩家数据缓存 5 分钟
set_transient('kina_steam_player_' . $steam_id, $player, 300);

// 游戏库缓存 1 小时（游戏库不会频繁变化）
set_transient('kina_steam_games_' . $steam_id, $games, 3600);

实时状态更新

前端使用 AJAX 轮询，每 30 秒更新一次状态：

function updateSteamStatus() {
    // 页面不可见时暂停更新
    if (document.hidden) return;
    
    fetch(ajaxUrl, {
        method: 'POST',
        body: JSON.stringify({ action: 'kina_get_steam_status' })
    })
    .then(res => res.json())
    .then(data => {
        // 更新 DOM
        updateUI(data);
    });
}

setInterval(updateSteamStatus, 30000);

3.磨砂玻璃 UI 设计

这是我最花时间的部分。磨砂玻璃效果需要用到 backdrop-filter：

.kina-steam-profile {
    background: rgba(20, 25, 35, 0.65);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

为了让效果更明显，我添加了多层叠加：

• 底层：半透明深色背景
• 中层：模糊滤镜
• 顶层：内发光边框

游戏中状态的特殊处理

当检测到玩家正在游戏时，需要突出显示：

.kina-status-playing {
    background: rgba(164, 208, 7, 0.15);
    border: 1px solid rgba(164, 208, 7, 0.3);
    animation: border-glow 2s ease-in-out infinite;
}

@keyframes border-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(164, 208, 7, 0.3); }
    50% { box-shadow: 0 0 20px rgba(164, 208, 7, 0.5); }
}

绿色脉冲动画让”游戏中”状态一眼就能看到。

4.竖屏游戏封面

Steam 提供了竖屏封面 library_600x900.jpg，比传统的横版封面更适合网格展示

<img src="https://cdn.cloudflare.steamstatic.com/steam/apps/{appid}/library_600x900.jpg" 
     onerror="this.src='https://cdn.cloudflare.steamstatic.com/steam/apps/{appid}/header.jpg'">

onerror 用于回退，因为部分老游戏可能没有竖屏封面。

5.遇到的坑

问题 1：Undefined array key 警告
有些游戏没有 playtime_2weeks 字段，直接访问会报错。
解决：所有数组访问前都用 isset() 检查：

$playtime_weeks = isset($game['playtime_2weeks']) 
    ? round($game['playtime_2weeks'] / 60, 1) 
    : 0;

问题 2：游戏名换行不美观

早期版本中，长游戏名会换行显示，破坏了紧凑布局。

解决：强制单行显示，超长截断，悬停显示完整名称：

.kina-mini-game {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

问题 3：API 调用失败

Steam API 偶尔会超时或返回错误。

解决：添加超时控制和错误降级

$response = wp_remote_get($url, array('timeout' => 10));
if (is_wp_error($response)) {
    return get_transient($cache_key); // 返回缓存数据
}

使用方法

安装

1. 下载插件文件，上传到 wp-content/plugins/
2. 在 WordPress 后台激活
3. 进入”Steam 集成”设置页面，填写 API Key 和 Steam ID
4. 确保 Steam 隐私设置为公开

短代码

在文章或页面中插入：

[kina_steam_profile]   // 完整资料卡片
[kina_steam_library]   // 游戏库
[kina_steam_status]    // 迷你状态（适合侧边栏）

参数说明

[kina_steam_library] 支持以下参数：
show_playtime="false" - 隐藏游戏时长

show_recent="false" - 隐藏"最近"标签

columns="5" - 指定列数

未来计划

• [ ] 游戏成就展示
• [ ] 好友在线列表
• [ ] 愿望单展示
• [ ] 深色/浅色主题切换

源码下载

完整代码已开源在 GitHub：点击下载

结语

这个插件花了我两个周末的时间，从 API 调研到 UI 打磨，每一个细节都反复调整。看到最终效果的那一刻，感觉还是很值的。
如果你也是 WordPress + Steam 用户，不妨试试这个插件。

有任何问题欢迎在评论区留言。