Kina Steam Integration

一个为 WordPress 打造的 Steam 集成插件，支持展示个人资料、游戏库和实时在线状态，采用磨砂玻璃 UI 设计。

✨ 特性

• 🪟 磨砂玻璃界面 - 现代毛玻璃质感设计
• 🎮 实时状态显示 - 显示"游戏中 - 游戏名"，30秒自动刷新
• 🖼️ 竖屏游戏封面 - 600x900 高清封面，悬停放大效果
• 📚 完整游戏库 - 展示所有游戏，支持时长统计
• 🎨 Steam 头像框 - 自动获取并显示头像框
• 📊 Steam 等级 - 显示用户等级徽章
• 🔄 自动更新 - 定时任务每5分钟刷新数据

📦 安装

1. 创建插件文件夹

在 wp-content/plugins/ 下创建：

kina-steam-integration/
├── kina-steam-integration.php
└── assets/
    ├── css/
    │   ├── steam-style.css
    │   └── admin.css
    └── js/
        ├── steam.js
        └── admin.js

2. 复制代码

将对应代码复制到每个文件中。

3. 激活插件

进入 WordPress 后台 → 插件 → 安装插件 → 激活 "Kina Steam Integration"。

4. 配置 Steam

1. 获取 Steam API Key：https://steamcommunity.com/dev/apikey

   • 域名填写你的网站地址，如 https://kina.ink

2. 进入插件设置页面（左侧菜单 🎮 Steam 集成）

3. 填写：

   • Steam API Key：复制的 API Key
   • Steam 自定义 URL：你的 Steam 个人资料链接后缀

   例如你的资料链接是 steamcommunity.com/id/kina，则填写 kina

4. 点击"保存设置"，然后点击"测试 API 连接"确认正常

5. 设置 Steam 隐私（重要）

编辑 Steam 个人资料 → 隐私设置 → 游戏详情 → 公开

否则游戏库无法显示。

📝 短代码

[kina_steam_profile] - 完整个人资料

显示头像、等级、在线状态、最近游戏。

[kina_steam_profile]

效果：

• 磨砂玻璃卡片
• Steam 头像框（如果有）
• 等级徽章（金色 Lv.XX）
• 游戏中状态（绿色脉冲动画）
• 4个最近游戏（竖屏封面）

[kina_steam_library] - 游戏库

显示所有游戏，竖屏封面网格。

[kina_steam_library]

参数：

示例：

[kina_steam_library show_playtime="false"]
[kina_steam_library columns="5"]

效果：

• 头部显示游戏总数和总时长
• 竖屏封面（2:3比例）
• "最近"标签（绿色）
• 时长角标（超过10小时）
• 悬停显示"查看商店"

[kina_steam_status] - 迷你状态

紧凑状态显示，适合侧边栏或导航。

[kina_steam_status]

效果：

• 小头像 + 状态光环
• 昵称（单行截断）
• 游戏中 - 游戏名（单行，超长截断）
• 实时更新（30秒轮询）

🎨 界面预览

完整资料卡片

┌─────────────────────────────────────────┐
│  [磨砂玻璃背景 + 模糊效果]               │
│    ┌─────┐                              │
│    │ 👤  │  桜井紀奈                    │
│    │ 🟢  │  🟢 游戏中 - NARAKA: BL...   │
│    └─────┘  Lv.42                       │
├─────────────────────────────────────────┤
│  🎯 最近游玩                            │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐           │
│  │ 🎮 │ │ 🎮 │ │ 🎮 │ │ 🎮 │           │
│  └────┘ └────┘ └────┘ └────┘           │
├─────────────────────────────────────────┤
│      [ 访问 Steam 主页 → ]              │
└─────────────────────────────────────────┘

迷你状态

┌─────────────────────────────┐
│ ┌──┐ 桜井紀奈               │
│ │👤│ 🟢 游戏中 - NARAKA...  │
│ │🟢│                        │
│ └──┘                        │
└─────────────────────────────┘

游戏库

┌─────────────────────────────────────────┐
│  🎮 游戏库          共 156 款  2847h    │
├─────────────────────────────────────────┤
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐   │
│  │最近│ │    │ │ 727│ │    │ │    │   │
│  │ 🎮 │ │ 🎮 │ │ 🎮 │ │ 🎮 │ │ 🎮 │   │
│  └────┘ └────┘ └────┘ └────┘ └────┘   │
│  NARAKA   Wallpaper  游戏3   游戏4...  │
│  82.5h    2.5h      156h    8h        │
└─────────────────────────────────────────┘

🔧 常见问题

Q: 游戏库显示为空？

A: 检查 Steam 隐私设置，确保"游戏详情"为公开。

Q: 显示 "Undefined array key" 警告？

A: 已修复，请使用最新版代码。如果还有问题，在 wp-config.php 中设置：

define('WP_DEBUG', false);

Q: 游戏中状态不更新？

A: 插件每30秒自动刷新，也可以手动刷新页面。确保 Steam 客户端在线且正在运行游戏。

Q: 封面图片加载失败？

A: 插件会自动回退到横版封面。如果仍失败，可能是游戏尚未发布或已下架。

📝 更新日志

v2.2

• 全新UI设计
• 优化迷你状态显示（单行截断）
• 修复所有 PHP 警告
• 增强发光和动画效果

v2.1

• 修复 Undefined array key 错误
• 添加游戏时长 isset 检查

v2.0

• 竖屏游戏封面
• Steam 头像框支持
• 实时状态更新
• 完整游戏库展示

v1.0

• 初始版本

👤 作者

Kina - KINA漫记