如何在 WordPress 中为 YouTube 视频添加缩略图

您是否看到热门网站在其网站首页上使用其 YouTube 视频缩略图?如果您在 YouTube、Vimeo 或其他网站上运行视频频道,那么您也可以在博客的首页和存档页面上为所有包含视频的帖子显示视频缩略图。在本文中,我们将向您展示如何在 WordPress 中为 YouTube 视频添加缩略图。

WordPress中的视频缩略图示例

视频缩略图和 WordPress 帖子缩略图

WordPress 自带添加特色图片或发布缩略图的内置功能,大多数 WordPress 主题都支持此功能。但是,如果您想突出显示来自 YouTube 的视频内容,则需要使用视频缩略图展示该内容。本文将通过使用默认的 WordPress 帖子缩略图功能来帮助您做到这一点。

在 WordPress 中设置视频缩略图插件

您需要做的第一件事是安装并激活Video Thumbnails插件。激活插件后,您需要进入设置»视频缩略图配置插件设置。

设置视频缩略图

在设置屏幕上,我们建议您选择将缩略图存储在媒体库中。这将减少您网站上的外部 http 请求,并且您的页面将加载得更快。在帖子类型部分下,插件将显示帖子、页面和自定义帖子类型(如果您的网站上有任何内容)。选择您希望插件扫描视频​​链接的帖子类型。此页面上的最后一个选项是选择自定义字段。一些 WordPress 的视频插件将视频 URL 保存在自定义字段中,如果您使用此类插件,则需要在此处输入该自定义字段。之后单击保存更改按钮。

在设置页面上,您还将看到Providers选项卡。如果您使用Vimeo共享视频,则需要在 Vimeo 上创建应用程序,然后在此处输入客户端 ID、客户端密码、访问令牌和访问令牌密码值。

添加 Vimeo 应用程序凭据

在批量操作选项卡上,您可以扫描已发布的帖子以查找视频并为其生成视频缩略图。该插件还提供了一个按钮来清除所有视频缩略图并将它们作为附件从您的帖子中删除。

扫描帖子以生成视频缩略图

在 WordPress 帖子中创建视频缩略图

现在您已经设置了插件,让我们通过在 WordPress 帖子中添加视频 URL 来创建视频缩略图。为此,您需要创建或编辑 WordPress 帖子并在帖子编辑区域中添加您的视频 URL。发布帖子后,您将看到该插件已为您生成视频缩略图并将其添加到您的帖子中。

在 WordPress Post 中添加视频并生成视频缩略图

在您的 WordPress 主题中显示视频缩略图

视频缩略图插件使用 WordPress Post Thumbnails 功能。大多数 WordPress 主题都设置为自动显示帖子缩略图。这意味着您的主题将自动显示视频缩略图以及您的帖子内容或摘录。但是,如果您的主题不显示视频缩略图,则需要编辑主题文件并将此代码添加到要显示缩略图的模板中。

如何在 WordPress 的视频缩略图上添加播放按钮

现在您已成功捕获并在 WordPress 帖子中显示视频缩略图,您可能希望将常规图像缩略图与视频缩略图区分开来。这会让您的用户知道帖子中有视频,他们可以点击播放按钮查看视频帖子。我们将向您展示如何使用条件标签来区分视频缩略图和常规帖子缩略图并添加播放按钮。

要使用此方法,您需要确保在特定类别下发布视频帖子,例如视频。然后在你的主题模板文件index.php, archive.php, category.php, or content.php中寻找这行代码:

“> 仅在视频类别下提交的帖子的帖子缩略图之后添加。下一步是从媒体»添加新屏幕上传图像文件。此图像将用作播放按钮。上传图像文件后,通过单击图像旁边的编辑链接记下图像文件的位置。

最后一步是显示播放按钮。我们将使用 CSS 在视频缩略图上显示和定位播放按钮。为此,您需要通过单击外观 » 编辑器将此 CSS 代码复制并粘贴到您的主题或子主题的样式表中。

.playbutton {    background: url(‘http://example.com/wp-content/uploads/playbutton.png’) center center no-repeat;    position: absolute;    top: 50%;    left: 50%;    width: 74px;    height: 74px;    margin: -35px 0 0 -35px;    z-index: 10;    opacity:0.6;}.playbutton:hover {     opacity:1.0;}

不要忘记将背景图片网址替换为您之前上传的播放按钮图片文件的网址。就这样。您的视频缩略图文件现在应该有一个播放按钮。

我们希望本文能帮助您在 WordPress 中使用缩略图突出显示您的 YouTube 视频。如需反馈和问题,请发表评论或在Twitter 上关注我们。