如何在 WordPress 中為 YouTube 視頻添加縮略圖

您是否見過熱門網站在其網站首頁上使用 youtube 視頻縮略圖?如果您在 youtube、vimeo 或其他網站上運行視頻頻道,那么您也可以在博客的首頁和存檔頁面上顯示所有包含視頻的帖子的視頻縮略圖。在本文中,我們將向您展示如何在 wordpress 中添加 youtube 視頻的縮略圖。

如何在 WordPress 中為 YouTube 視頻添加縮略圖

視頻縮略圖和 WordPress 帖子縮略圖

WordPress 具有添加特色圖像或發布縮略圖的內置功能,并且大多數 WordPress 主題都支持此功能。但是,如果您想突出顯示YouTube 中的視頻內容,那么您可能需要使用視頻縮略圖來展示該內容。本文將幫助您使用默認的 WordPress 帖子縮略圖功能來實現這一點。

在 WordPress 中設置視頻縮略圖插件

您需要做的第一件事是安裝并激活視頻縮略圖插件。激活插件后,您需要進入設置?視頻縮略圖來配置插件設置。

如何在 WordPress 中為 YouTube 視頻添加縮略圖

在設置屏幕上,我們建議您選擇將縮略圖存儲在媒體庫中。這將減少您網站上的外部 http 請求,并且您的頁面加載速度將更快。在帖子類型部分下,插件將顯示帖子、頁面和自定義帖子類型(如果您的網站上有)。選擇您希望插件掃描視頻??鏈接的帖子類型。此頁面上的最后一個選項是選擇自定義字段。一些 WordPress 視頻插件將視頻 URL 保存在自定義字段中,如果您使用此類插件,則需要在此處輸入該自定義字段。之后單擊“保存更改”按鈕。

在設置頁面上,您還將看到“提供商”選項卡。如果您使用 Vimeo 共享視頻,則需要在Vimeo上創建一個應用程序,然后在此處輸入客戶端 ID、客戶端密鑰、訪問令牌和訪問令牌密鑰值。

如何在 WordPress 中為 YouTube 視頻添加縮略圖

“批量操作”選項卡上,您可以掃描已發布的帖子中的視頻并為其生成視頻縮略圖。該插件還提供了一個按鈕來清除所有視頻縮略圖并將它們作為附件從帖子中刪除。

如何在 WordPress 中為 YouTube 視頻添加縮略圖

在 WordPress 帖子中創建視頻縮略圖

現在您已經設置了插件,讓我們通過在 WordPress 帖子中添加視頻 URL 來創建視頻縮略圖。為此,您需要創建或編輯 WordPress 帖子,并在帖子編輯區域中添加您的視頻 URL。發布帖子后,您將看到該插件已為您生成視頻縮略圖并將其添加到您的帖子中。

如何在 WordPress 中為 YouTube 視頻添加縮略圖

在 WordPress 主題中顯示視頻縮略圖

視頻縮略圖插件使用 WordPress 發布縮略圖功能。大多數 WordPress 主題都設置為自動顯示帖子縮略圖。這意味著您的主題將自動顯示視頻縮略圖以及您的帖子內容或摘錄。但是,如果您的主題不顯示視頻縮略圖,則需要編輯主題文件并將此代碼添加到要顯示縮略圖的模板中。

<?php the_post_thumbnail(); ?>

在 WordPress 中一鍵使用

如何在 WordPress 中的視頻縮略圖上添加播放按鈕

現在您已成功捕獲并在 WordPress 帖子中顯示視頻縮略圖,您可能希望將常規圖像縮略圖與視頻縮略圖區分開來。這會讓您的用戶知道帖子中有視頻,他們可以單擊播放按鈕來查看視頻帖子。我們將向您展示如何使用條件標簽來區分視頻縮略圖和常規帖子縮略圖并添加播放按鈕。

要使用此方法,您需要確保在特定類別(例如視頻)下發布視頻帖子。然后在主題的模板文件中index.php, archive.php, category.php, or content.php查找以下代碼行:

在 WordPress 中一鍵使用

現在我們需要用以下代碼替換此代碼:

在 WordPress 中一鍵使用

此代碼僅添加在視頻類別下提交的帖子的帖子縮略圖之后。下一步是從媒體?添加新屏幕上傳圖像文件。該圖像將用作播放按鈕。上傳圖像文件后,請單擊圖像旁邊的編輯鏈接記下圖像文件位置。

最后一步是顯示播放按鈕。我們將使用 css 在視頻縮略圖上顯示和定位播放按鈕。為此,您需要通過單擊Appearance ? Editor將此 CSS 代碼復制并粘貼到您的主題或子主題的樣式表中。

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

在 WordPress 中一鍵使用

不要忘記將背景圖像 url 替換為您之前上傳的播放按鈕圖像文件的 URL。就這樣。您的視頻縮略圖文件現在應該有一個播放按鈕。

? 版權聲明
THE END
喜歡就支持一下吧
點贊5 分享