l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在WordPress评论中添加视频及更多内容（使用oEmbed）

如何在WordPress评论中添加视频及更多内容（使用oEmbed）

Bug编译狮

Bug编译狮

在WordPress评论中添加视频及其他内容，可以利用oEmbed技术来实现。oEmbed是一种轻量级的协议，允许网页或应用程序从源网站获取嵌入式媒体资源（如图片、视频等），并将其渲染为本地格式。

1. 安装必要的插件

首先，确保你的WordPress安装中已经安装了以下插件：

  • oEmbed：这是一个强大的oEmbed插件，它能够帮助你在评论区显示来自其他网站的内容。
  • 评论自定义字段：这个插件可以帮助你轻松地管理评论中的各种自定义字段。

2. 配置oEmbed插件

  1. 登录到你的WordPress后台。
  2. 导航到“插件” > “安装插件”，搜索并安装oEmbed和评论自定义字段插件。
  3. 安装完成后，激活这两个插件。

3. 配置oEmbed设置

  1. 打开oEmbed插件的配置页面。
  2. 在“基本选项”部分，选择你喜欢的oEmbed服务提供商。例如，YouTube、Vimeo、Twitter等。
  3. 如果你需要特定的服务提供商支持，可能需要手动添加它们。这通常涉及访问服务提供商的API文档并输入相应的URL。
  4. 确保所有的设置都正确无误。

4. 使用评论自定义字段插件

  1. 同样，在评论自定义字段插件的配置页面，添加一个新的自定义字段。
  2. 将其命名为你想用于存储视频链接或其他内容的字段名。
  3. 激活评论自定义字段插件后，你可以通过拖放的方式将自定义字段添加到评论框中。

示例代码与使用步骤

假设我们想要在评论区展示来自YouTube的视频链接。以下是具体的步骤和效果：

步骤1：在评论区添加oEmbed链接

  1. 在评论区的HTML编辑器中，找到你想要插入oEmbed链接的位置。
  2. 输入如下代码： 
    <div class="comment-body">
 <p><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" rel="nofollow" title="Watch on YouTube">Watch video here</a></p>
</div>

    这个代码会自动解析出YouTube视频的链接，并在评论区中显示出来。

步骤2：使用评论自定义字段插件

  1. 在评论界面，点击左侧菜单栏的“自定义字段”。
  2. 创建一个新的自定义字段，比如“Video Link”。
  3. 在评论提交时，系统会提示你填写这个自定义字段的内容。
  4. 当用户评论时，他们可以选择上传自己的视频文件或者复制粘贴YouTube的视频链接。

效果

当用户评论时，他们可以在评论框中自由地选择上传视频或粘贴YouTube的视频链接。这些链接会被处理成oEmbed格式，然后在评论区中以清晰可见的形式展示出来。此外，如果你使用了评论自定义字段插件，还可以让用户在评论中自行插入更多自定义信息。

通过这种方式，你不仅增加了评论的互动性和趣味性，还让评论区看起来更加丰富和专业。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

如何在WordPress评论中添加视频及更多内容

目标受众

  • 对于那些希望将WordPress评论集成到其网站上的开发者和管理员。
  • 想要在WordPress评论中展示更丰富的内容，包括视频和其他多媒体元素。

学习目标

  1. 理解如何在WordPress评论中嵌入oEmbed视频。
  2. 了解如何在WordPress评论中插入其他类型的内容，如图片、链接等。
  3. 掌握如何设置自定义CSS样式以增强评论外观。

教学步骤

第一步：安装oEmbed插件

首先，你需要在WordPress上安装并启用oEmbed插件。这个插件允许你在WordPress评论中显示来自YouTube、Vimeo或其他服务的视频。以下是安装和配置插件的方法：

  1. 访问插件商店：

    • 登录到您的WordPress账户。
    • 在左侧菜单中找到“插件”选项卡。
    • 使用搜索框输入“oEmbed”，然后点击搜索结果中的“Install Now”。

  2. 激活插件:

    • 找到您刚刚安装的插件，单击它旁边的“激活”按钮。

  3. 配置插件:

    • 在“设置”页面中，你可以选择是否要为评论显示图片或链接。默认情况下，评论将显示视频。

  4. 验证插件:

    • 在“测试”区域，您可以检查当前的oEmbed视频是否正确加载。
第二步：使用oEmbed插件添加视频

现在，你已经成功地在WordPress评论中嵌入了oEmbed视频。接下来，让我们学习如何通过HTML代码来插入更多的视频以及其他媒体元素。

示例代码

  1. 常规视频插入：

    <div class="comment">
<div class="comment-author">
    <img src="image.jpg" alt="John Doe" />
    <span class="author vcard">John Doe</span>
</div>

<div class="comment-body">
    <p>这是一条评论。</p>

    <!-- oEmbed 视频 -->
    <blockquote cite="https://www.youtube.com/watch?v=Qw7Dj09mGcY">
        <iframe width="560" height="315"
            src="https://www.youtube.com/embed/Qw7Dj09mGcY?rel=0&amp;showinfo=0"
            frameborder="0" allowfullscreen></iframe>
    </blockquote>

    <!-- 链接 -->
    <a href="http://example.com/">
        <h3>Click here to go there.</h3>
    </a>
</div>
</div>

  2. 图片插入：

    <div class="comment">
<div class="comment-author">
    <img src="image.jpg" alt="John Doe" />
    <span class="author vcard">John Doe</span>
</div>

<div class="comment-body">
    <p>这是一条评论。</p>

    <!-- 图片 -->
    <img src="image.jpg" alt="My Image" />

    <!-- 文字 -->
    <p>Here is some text about the image.</p>
</div>
</div>

  3. 其他元素组合：

    <div class="comment">
<div class="comment-author">
    <img src="image.jpg" alt="John Doe" />
    <span class="author vcard">John Doe</span>
</div>

<div class="comment-body">
    <p>这是一条评论。</p>

    <!-- oEmbed视频 + 图片 -->
    <blockquote cite="https://www.youtube.com/watch?v=Qw7Dj09mGcY">
        <iframe width="560" height="315"
            src="https://www.youtube.com/embed/Qw7Dj09mGcY?rel=0&amp;showinfo=0"
            frameborder="0" allowfullscreen></iframe>
    </blockquote>

    <!-- 图片 + 文字 -->
    <img src="image.jpg" alt="My Image" /> 
    <p>Here is some text about the image.</p>
</div>
</div>

结语

通过上述步骤，你已经学会了如何在WordPress评论中添加视频及其他多媒体元素。记住，除了oEmbed之外，你还可以通过其他方式扩展评论区的功能，例如使用Markdown语法或自定义CSS来美化评论界面。最后，如果你需要进一步的帮助，请随时提问！

,

最新更新