提升用户留存神器：为WordPress子比主题添加“随机小姐姐”视频侧边栏-主题铺

AI 智能摘要

主题铺就为大家分享一个高质量的随机视频API接口，并附上最简单的部署教程。无需复杂的服务器配置，只需一段代码，就能让你的网站拥有类似抖音的“刷视频”体验。本教程以WordPress子比主题 (Zibll) 为例，但理论上适用于所有支持自定义HTML小工具的WordPress主题。

做网站的朋友都知道，除了优质的内容，一个有趣的互动组件往往能显著提升用户的停留时长。最近有不少站长在问，怎么在网站侧边栏加一个随机刷视频的功能？

图片[1]-提升用户留存神器：为WordPress子比主题添加“随机小姐姐”视频侧边栏-主题铺

今天，主题铺就为大家分享一个高质量的随机视频API接口，并附上最简单的部署教程。无需复杂的服务器配置，只需一段代码，就能让你的网站拥有类似抖音的“刷视频”体验。本教程以WordPress子比主题 (Zibll) 为例，但理论上适用于所有支持自定义HTML小工具的WordPress主题。

效果预览

在部署之前，你可以先看看实际效果。这是一个简洁的视频播放器，支持点击播放、音量调节以及“下一个”切换功能。

演示地址：点击查看在线演示

图片[2]-提升用户留存神器：为WordPress子比主题添加“随机小姐姐”视频侧边栏-主题铺

部署教程

我们提供两种方案，主题铺强烈推荐方案二，因为它可以完美融入子比主题的侧边栏，不占用独立页面资源，用户体验更好。

方案一：新建独立页面（沉浸式刷视频）

如果你想做一个专门的“摸鱼页面”，可以使用这个方法。

在本地新建一个文本文件，重命名为 video.html。
将下方代码复制进去。
修改配置参数（见后文）。
将文件上传到你的网站根目录，访问 你的域名/video.html 即可。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机视频播放器 - 主题铺推荐</title>
    <link href="https://api.xn--otsr53afot.com/videos/css/muziqingcss.css" rel="stylesheet">
    <style>
        body {
            margin: 0; padding: 0; display: flex;
            justify-content: center; align-items: center;
            min-height: 100vh; background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <video id="videoPlayer" muted playsinline>
            <source id="videoSource" type="video/mp4">
        </video>
        <button class="play-button" id="playButton"></button>
        <div class="volume-control">
            <input id="volumeSlider" class="volume-slider" type="range" min="0" max="1" step="0.01" value="0">
        </div>
        <button class="next-button" id="nextButton">下一个</button>
    </div>
    <script>
        document.addEventListener('dragstart', (e) => { e.preventDefault(); });
        const videoPlayer = document.getElementById('videoPlayer');
        const playButton = document.getElementById('playButton');
        const nextButton = document.getElementById('nextButton');
        const volumeSlider = document.getElementById('volumeSlider');
        const videoSource = document.getElementById('videoSource');

        // ▼▼▼ 请在此处修改配置 ▼▼▼
        const apiKey = "你的key";  // 自定义API密钥（8-12位，a-z, 0-9）
        const domain = "你的域名";  // 部署此代码的网站域名
        // ▲▲▲ 配置结束 ▲▲▲

        const baseUrl = "https://api.xn--otsr53afot.com/videos/open.php";
    </script>
    <script src="https://api.xn--otsr53afot.com/videos/js/open.js"></script>
</body>
</html>

方案二：嵌入侧边栏（子比主题推荐）

这是最常用的方式，让用户在浏览文章时也能顺手刷个视频。

进入 WordPress 后台。
点击外观 >> 小工具。
找到 “自定义 HTML” 小工具，将其拖拽到 “侧边栏” 或 “首页侧边栏” 区域。
将下方代码复制进去，并修改配置参数。
点击保存即可。

<!-- 随机视频侧边栏组件 by 主题铺 -->
<link href="https://api.xn--otsr53afot.com/videos/css/muziqingcss.css" rel="stylesheet">
<div class="video-container" style="width: 100%; height: auto; min-height: 200px;">
    <video id="videoPlayer" muted playsinline style="width: 100%; border-radius: 8px;">
        <source id="videoSource" type="video/mp4">
    </video>
    <button class="play-button" id="playButton"></button>
    <div class="volume-control">
        <input id="volumeSlider" class="volume-slider" type="range" min="0" max="1" step="0.01" value="0">
    </div>
    <button class="next-button" id="nextButton">下一个</button>
</div>
<script>
    document.addEventListener('dragstart', (e) => { e.preventDefault(); });
    const videoPlayer = document.getElementById('videoPlayer');
    const playButton = document.getElementById('playButton');
    const nextButton = document.getElementById('nextButton');
    const volumeSlider = document.getElementById('volumeSlider');
    const videoSource = document.getElementById('videoSource');

    // ▼▼▼ 请在此处修改配置 ▼▼▼
    const apiKey = "randomKey123";  // 建议修改：自定义API密钥（8-12位字母数字组合）
    const domain = "www.zhutipu.com";  // 必须修改：填写你网站的实际域名
    // ▲▲▲ 配置结束 ▲▲▲

    const baseUrl = "https://api.xn--otsr53afot.com/videos/open.php";
</script>
<script src="https://api.xn--otsr53afot.com/videos/js/open.js"></script>

关键参数配置说明（新手必读）

为了保证视频能正常播放，请务必准确修改代码中的以下两个参数：

1. 域名（domain）

含义：告诉 API 接口是哪个网站在调用它，用于验证请求来源。
填写规则：
- 不要带 http:// 或 https://。
- 如果你的网站是 https://www.example.com，请填写 www.example.com。
- 如果你的网站是 https://blog.example.com，请填写 blog.example.com。
注意：填写的域名必须与你实际访问的域名完全一致，否则视频可能无法加载。

2. API密钥（apiKey）

含义：这就好比是一个“暗号”。
填写规则：
- 长度：8-12位。
- 字符：仅限小写字母（a-z）和数字（0-9）。
- 生成方式：完全自定义，你想填什么都行！例如：zhutipu666、myvideo888。
故障排查：如果视频无法播放，试着换一个没用过的复杂点的 Key 试试。

最后总结

这个小功能虽然简单，但在实际运营中效果非常不错。它利用了用户的碎片化时间，有时候用户为了把这个视频看完，会在页面多停留几十秒，这对降低网站跳出率大有裨益。

建议将其放置在侧边栏的中下部位置，既不喧宾夺主，又能给无聊的用户一点小惊喜。快去试试吧！

① 本站文章均为原创，除非另有说明，否则本站内容依据CC BY-NC-SA 4.0许可证进行授权，转载请附上出处链接，谢谢。
② 本站提供的资源(插件或主题)均为网上搜集，如有涉及或侵害到您的版权请立即通知我们。
③ 本站所有下载文件，仅用作学习研究使用，请下载后24小时内删除，支持正版，勿用作商业用途。
④ 因代码可变性，不保证兼容所有浏览器、不保证兼容所有版本的WP、不保证兼容您安装的其他插件。
⑤ 本站保证所提供资源(插件或主题)的完整性，但不含授权许可、帮助文档、XML文件、PSD、后续升级等。
⑥ 使用该资源(插件或主题)需要用户有一定代码基础知识！另本站提供汉化使用安装教程，仅供参考。由本站提供的资源对您的网站或计算机造成严重后果的本站概不负责。
⑦ 有时可能会遇到部分字段无法汉化，同时请保留作者汉化宣传信息，谢谢！
⑧ 本站资源售价只是赞助和汉化辛苦费，收取费用仅维持本站的日常运营所需。
⑨ 如果喜欢本站资源，欢迎捐助本站开通会员享受优惠折扣，谢谢支持！
⑩ 如果网盘地址失效，请在相应资源页面下留言，我们会尽快修复下载地址。

THE END