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

Have you seen popular sites using their YouTube video thumbnails on the front page of their site? If you run a video channel on sites like YouTube, Vimeo, or others, then you too can display a video thumbnail for all posts containing videos on the front and archive pages of your blog. In this article, we will show you how to add thumbnails for YouTube videos in WordPress.

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

视频缩略图和WordPress发布缩略图 (Video Thumbnails and WordPress Post Thumbnails)

WordPress comes with built-in functionality to add featured images or post thumbnails, and most WordPress themes support this feature. However, if you want to highlight your video content from YouTube, then you would want to showcase that content with video thumbnails. This article will help you do that by using the default WordPress post thumbnail functionality.

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

在WordPress中设置视频缩略图插件 (Setting up Video Thumbnails Plugin in WordPress)

First thing you need to do is install and activate Video Thumbnails plugin. After activating the plugin, you need to go to Setttings » Video Thumbnails to configure the plugin settings.

您需要做的第一件事是安装并激活Video Thumbnails插件。 激活插件后，您需要转到“ 设置”»“视频缩略图”来配置插件设置。

On the settings screen, we recommend that you choose to store the thumbnail in your media library. This will reduce external http requests on your site, and your pages will load faster. Under the post types section the plugin will show posts, pages, and custom post types if you have any on your website. Select the post types you want the plugin to scan for videos links. The last option on this page is to choose a custom field. Some video plugins for WordPress save video URLs in a custom field, and if you are using such plugins, then you will need to enter that custom field here. After that click Save Changes button.

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

On the settings page, you will also see the Providers tab. If you are using Vimeo to share your videos, then you will need to create an app on Vimeo and then enter client ID, client secret, access token, and access token secret values here.

在设置页面上，您还将看到Providers标签。 如果使用Vimeo共享视频，则需要在Vimeo上创建一个应用，然后在此处输入客户端ID，客户端密码，访问令牌和访问令牌密码值。

On the Mass Actions tab, you can scan your published posts for videos and generate video thumbnails for them. The plugin also provides a button to clear all video thumbnails and remove them as attachment from your posts.

在“ 群众动作”标签上，您可以扫描已发布的帖子中的视频并为其生成视频缩略图。 该插件还提供了一个按钮，用于清除所有视频缩略图并将其作为附件从您的帖子中删除。

在WordPress帖子中创建视频缩略图 (Creating Video Thumbnails in WordPress Posts)

Now that you have set up the plugin, let’s create a video thumbnail by adding a video URL in a WordPress post. To do that you need to create or edit a WordPress post and add your video URL in the post edit area. Once you publish the post, you will see that the plugin has generated a video thumbnail for you and added it to your post.

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

在WordPress主题中显示视频缩略图 (Displaying a Video Thumbnail in your WordPress Theme)

Video thumbnails plugin uses WordPress Post Thumbnails functionality. Most WordPress themes are setup to automatically display post thumbnails. This means that your theme will automatically display the video thumbnail along with your post content or excerpt. However if your theme does not display the video thumbnails, then you need to edit your theme files and add this code to the template where you want to display thumbnail.

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

<?php the_post_thumbnail(); ?>

如何在WordPress的视频缩略图上添加播放按钮 (How to Add a Play Button on the Video Thumbnail in WordPress)

Now that you have successfully captured and displayed video thumbnails in your WordPress posts, you might want to distinguish your regular image thumbnails from your video thumbnails. This will let your users know that there is a video in the post, and they can click on the play button to view the video post. We will show you how to use conditional tags to distinguish between video thumbnails and regular post thumbnails and add a play button.

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

To use this method you need to make sure that you publish your video posts under a specific category, for example, Videos. Then inside your theme’s template files like index.php, archive.php, category.php, or content.php look for this line of code:

要使用此方法，您需要确保在特定类别(例如“视频”)下发布视频帖子。 然后在主题的模板文件(如index.php, archive.php, category.php, or content.php查找以下代码行：

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

Now we need to replace this code with the following code:

现在，我们需要用以下代码替换此代码：

<?php if ( in_category( 'video' )) : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?><span class="playbutton"></span></a>
<?php else : ?> 
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>	
<?php endif; ?>

This code adds <span class="playbutton"?></span> after the post thumbnail only for posts filed under video category. The next step is to upload an image file from Media » Add New screen. This image will be used as the play button. Once you have uploaded the image file, note the image file location by clicking on the Edit link next to the image.

此代码仅在视频类别下提交的帖子的帖子缩略图之后添加<span class="playbutton"?></span> 。 下一步是从Media»Add New屏幕上载图像文件。 该图像将用作播放按钮。 上载图像文件后，通过单击图像旁边的“ 编辑”链接来记下图像文件的位置。

The final step is to display the play button. We will be using CSS to display and position the play button on the video thumbnail. To do that, you need to copy and paste this CSS code in your theme or child theme’s stylesheet by clicking on Appearance » Editor.

最后一步是显示播放按钮。 我们将使用CSS在视频缩略图上显示和定位播放按钮。 为此，您需要通过单击Appearance»Editor将此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;
}

Don’t forget to replace the background image url with the URL of the play button image file you uploaded earlier. That’s all. Your video thumbnail files should now have a play button on them.

不要忘了用您之前上传的播放按钮图像文件的URL替换背景图像url。 就这样。 您的视频缩略图文件现在应该在其上具有播放按钮。

We hope this article helped you highlight your YouTube videos with thumbnails in WordPress. For feedback and questions please leave a comment or follow us on Twitter.

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

翻译自: https://www.wpbeginner.com/plugins/how-to-add-thumbnails-for-youtube-videos-in-wordpress/