无需插件！在 WordPress 网页中 4 步实现直播功能

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 添加一个新页面

2 添加自定义 HTML

创建新页面后，点击 + 按钮，然后点击 Custom HTML 添加自定义 HTML。

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 参数。