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


您是否在網站首頁上使用其YouTube視頻縮略圖查看了熱門網站? 如果您在YouTube,Vimeo或其他網站上運行視頻頻道,那麼您也可以在博客首頁和存檔頁面上為所有包含視頻的帖子顯示視頻縮略圖。 在本文中,我們將向您展示如何在WordPress中為YouTube視頻添加縮略圖。

WordPress中的視頻縮略圖示例

視頻縮略圖和WordPress發布縮略圖

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

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

您需要做的第一件事是安裝並激活Video Thumbnails插件。 激活插件後,您需要轉到 佈置»視頻縮略圖 配置插件設置。

設置視頻縮略圖

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

在設置頁面上,您還將看到 提供者 標籤。 如果使用Vimeo共享視頻,則需要在Vimeo上創建一個應用程序,然後在此處輸入客戶端ID,客戶端密碼,訪問令牌和訪問令牌密碼值。

添加Vimeo應用程序憑據

群眾行動 標籤,您可以掃描已發布的帖子中的視頻並為其生成視頻縮略圖。 該插件還提供了一個按鈕,用於清除所有視頻縮略圖並將其作為附件從您的帖子中刪除。

掃描帖子以生成視頻縮略圖

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

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

在WordPress帖子中添加視頻並生成視頻縮略圖

在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;
}

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

我們希望本文能幫助您使用WordPress中的縮略圖突出顯示您的YouTube視頻。 對於反饋和問題,請發表評論或關注我們 推特