WordPress 是一个开源的内容管理系统(CMS),WordPress的灵活性和易用性使其成为个人博客、新闻网站、企业网站、电子商务网站等多种类型网站的理想选择。根据W3Techs的数据,截至2023年,互联网上大约有35.6%的网站使用 WordPress。
使用WordPress的网站如果集成直播功能,可以带来以下好处:
- 增强互动性:直播可以实时与观众互动,提高用户参与度和网站活跃度。
- 实时内容分享:可以实时分享新闻、教程、产品展示等内容,吸引并保持观众的注意力。
- 提升SEO:实时内容可以吸引更多的访问流量,有助于提高网站的搜索引擎排名。
- 增加用户粘性:通过直播,用户可以与网站建立更紧密的联系,提高回访率。
- 品牌推广:直播可以作为品牌推广的工具,展示品牌形象和价值观。
- 电子商务:对于电商网站,直播可以用于展示产品、进行促销活动,甚至直接在直播中完成销售。
- 教育培训:教育机构或个人可以通过直播进行在线教学或培训。
- 事件直播:可以直播会议、音乐会、体育赛事等大型活动,吸引无法到场的观众。
- 社区建设:直播可以帮助建立社区,让志同道合的人聚集在一起,分享经验和观点。
- 反馈收集:直播过程中可以收集观众的反馈和建议,用于改进产品和服务。
- 多渠道分发:直播内容可以同时在多个平台进行,扩大观众范围。
- 内容再利用:直播结束后,内容可以被剪辑并作为视频内容再次发布,增加内容的利用价值。
要在 WordPress 网站上实现直播功能,可以使用专门的直播插件或集成第三方直播服务。今天分享的内容就是集成第三方直播服务—— ZEGO 互动直播 UIKit 在 WordPress 网页上实现直播功能。
下面将介绍如何在 WordPress 上集成互动直播 UIKit。
准备环境
在开始集成互动直播 UIKit 前,请确保开发环境满足以下要求:
- Windows 或 macOS 开发电脑已经连接到 Internet。
- 满足 ZEGO Express Web SDK 兼容性的浏览器,推荐使用最新版本的 Google Chrome 浏览器。
前提条件
- 已在 ZEGO 控制台 创建项目,并申请有效的 AppID 和 AppSign,详情请参考 控制台 – 项目信息。
- 联系 ZEGO 技术支持,开通 UIKit 相关服务。
实现步骤
1 添加一个新页面
登录 WordPress 控制面板,在侧边栏点击 Add New 创建一个新页面。
![无需插件!在 WordPress 网页中 4 步实现直播功能](https://www.nxrte.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
2 添加自定义 HTML
创建新页面后,点击 + 按钮,然后点击 Custom HTML 添加自定义 HTML。
![无需插件!在 WordPress 网页中 4 步实现直播功能](https://www.nxrte.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
3 在 HTML 块中添加互动直播 UIKit 代码
添加自定义 HTML 后,从下面的代码块中复制代码。
<script>
function getUrlParams(
url = window.location.href
) {
let urlStr = url.split('?')[1];
return new URLSearchParams(urlStr);
}
var script = document.createElement("script");
script.type = "text/javascript";
script.addEventListener("load", function (event) {
// 生成 Kit Token。
// @param 1: appID
// @param 2: serverSecret
// @param 3: Room ID
// @param 4: User ID
// @param 5: Username
const roomID = "room01";
const userID = Math.floor(Math.random() * 10000) + "";
const userName = "userName" + userID;
const appID = ;
const serverSecret = "";
const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID, userID, userName);
// 您可以根据 URL 参数分配不同的角色。
let role = getUrlParams(window.location.href)['role'] || 'Host';
role = role === 'Host' ? ZegoUIKitPrebuilt.Host : ZegoUIKitPrebuilt.Audience;
const zp = ZegoUIKitPrebuilt.create(kitToken);
zp.joinRoom({
container: document.querySelector("#root"),
scenario: {
mode: ZegoUIKitPrebuilt.LiveStreaming,
config: {
role,
},
},
sharedLinks: [{
name: 'Join as the audience',
url:
window.location.protocol + '//' +
window.location.host + window.location.pathname +
'?roomID=' +
roomID +
'&role=Audience',
}],
// 设置语言为中文
language: "zh-CN",
});
});
script.src =
"https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
说明:
- 为方便测试,以下代码使用
generateKitTokenForTest
接口生成 Kit Token。为规避安全风险,在您的 App 上线时,请在您的服务端生成 Token,并在客户端调用generateKitTokenForProduction
接口生成 Kit Token,详情请参考 使用 Kit Token 鉴权。 - UIKit 默认语言为英文,如需修改为中文,请在
joinRoom
时传入language
参数。
4 传入 appID 和 serverSecret
在图中高亮代码传入您从 ZEGO 控制台获取的项目的 AppID 和 ServerSecret。
![无需插件!在 WordPress 网页中 4 步实现直播功能](https://www.nxrte.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
5 预览
点击 Save Draft 保存草稿。点击 Preview 按钮来执行代码。
![无需插件!在 WordPress 网页中 4 步实现直播功能](https://www.nxrte.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
恭喜!您已完成所有步骤!
![无需插件!在 WordPress 网页中 4 步实现直播功能](https://www.nxrte.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
本文为原创稿件,版权归作者所有,如需转载,请注明出处:https://www.nxrte.com/jishu/yinshipin/49351.html