如何使用自定义字段将 HTML5 视频添加到 WordPress

已发表: 2018-07-28

一般来说，如果你问 10 位 WordPress 开发者如何做某事，你会得到十个不同的答案。 但这既说明了 CMS 的多功能性，也说明了任何给定任务都有不止一种解决方案。

最近，我面临在 WordPress 页面中设置 HTML5 视频的挑战。 它位于静态位置，需要经常更换。 虽然使用视频简码很好，但在这种情况下，我想让更新页面的人更简单。 我不希望他们必须了解简码是什么或如何使用它。

因此，最简单的解决方案（无论如何，在我看来）是创建一些可以上传相关视频文件的自定义字段。 从那里，主题的模板将自动创建必要的代码来显示视频。 我是这样做的：

项目要求

您当然需要一个 WordPress 站点和访问权限来编辑您的主题（如果您还没有这样做，请使用子主题）。 熟悉 PHP 和 HTML 也会有很大帮助。 除此之外，您应该拥有：

  • 一种创建自定义字段的方法。 高级自定义字段(ACF) 的免费版本可以很好地完成这项工作。 在您的 WordPress 网站上安装并激活它。
  • 一个视频——最好是多种格式。 虽然现在每个主要浏览器都支持 MP4 文件，但提供 WEBM 版本以提供额外覆盖可能不是一个坏主意。 而且，当您使用它时，对于那些使用真正古老的浏览器的人来说，FLV 后备不会有什么坏处。 您需要确保视频的每个版本都设置为相同的分辨率。
  • 一张“海报”图片。 以您的视频播放时的最高分辨率制作的屏幕截图或自定义图形。

创建自定义字段

第 1 步：创建自定义字段

安装并激活 ACF 的免费版本后，转到 WordPress 内的自定义字段菜单，然后单击添加新的。

在您的新字段集（我们称为“视频字段”）中，您需要为您计划上传的每种视频格式创建一个 ACF 文件字段，并为海报图像创建另一个字段。 在我们的设置中，我们有 MP4、WEBM、FLV 和海报的字段。 对于每个文件字段，请确保选中“返回值”中显示“文件 URL”的单选按钮。 此外，请务必记下字段名称——我们稍后会需要它们。

自定义字段组。

接下来，在 ACF 的“位置”设置中，将新字段分配到您想要的任何页面或帖子并保存您的工作。 当您去编辑该分配的页面时，您应该会看到这些字段（您可能需要向下滚动一点才能找到它们）。

上传视频文件的自定义字段。

第 2 步：上传视频文件

导航以编辑您分配新自定义字段的页面或帖子。 从那里开始，就是上传正确文件的问题。 上传必要的文件后，保存您的页面/帖子。

添加到模板后的视频。

第 3 步：编辑模板

现在到了有趣的部分——为您的主题模板添加一些 PHP 魔法。 如果您不熟悉 WordPress 模板层次结构，现在可能是学习它的好时机。

找到您要放置视频的正确模板文件和位置。 然后，复制并粘贴以下代码片段并根据您的需要进行自定义：

 <?php
// 获取视频字段
$video_mp4 = get_field('mp4_video'); // MP4 字段名称
$video_webm = get_field('webm_video'); // WEBM 字段名称
$video_flv = get_field('flv_video'); // FLV 字段名称
$video_poster = get_field('poster_image'); // 海报图片字段名称
                

// 构建简码
$attr = 数组（
'mp4' => $video_mp4,
'webm' => $video_webm,
'flv' => $video_flv,
'海报' => $video_poster,
'预加载' => '自动'
);

// 显示简码
回声 wp_video_shortcode( $attr );
?>

第一部分代码引用了我们在步骤 1 中创建的自定义字段的名称。我们为每个字段创建一个 PHP 变量（它们将输出各自文件的 URL），我们需要在中间使用它代码部分。

在中间部分，我们有一个wp_video_shortcode函数的属性数组。 请注意，每种文件类型都有一个属性。 我们还选择预加载视频，但这完全是可选的。 如果您愿意，您还可以在这里设置宽度、高度、循环甚至（喘气）自动播放视频。

代码的底部部分是将我们工作的结果输出到我们的模板中。

一旦您满意地设置了所有内容，您将需要保存模板并将其上传到您的网站（或者如果您使用的是内置的 WordPress 主题编辑器，则只需保存）。 然后，在前端检查您的页面以确保视频正确显示。

WordPress 在 CMS 中内置了一个 HTML5 视频播放器，默认播放器的外观和功能都非常好。 但是如果你想给它一个更个性化的风格，你可以设计各种选项。 使用浏览器的开发工具检查输出代码，并记下各种 CSS 类。 例如，容器元素有一个.wp-video类。 您可能还想查看教程以更深入地了解可能性。

自定义字段简化流程

自定义字段简化流程

使用自定义字段可以为 WordPress 带来丰富的新功能和设计可能性。 但它们令人敬畏的一个核心要素是它们可以使管理内容更容易。 无论谁将添加和编辑内容，自定义字段都可以简化整个过程。 这对我们所有人都有好处，但对于非专业开发人员的用户来说尤其好。

添加一些简单的功能，例如上面的 HTML5 视频字段，可以大大减少新用户面临的学习曲线。 无需考虑他们应该做什么，现在只需上传几个文件即可。

最后，前期的一点点额外工作可以为每个人节省一些时间和网站生命周期的麻烦。