如何使用自定義字段將 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 視頻字段，可以大大減少新用戶面臨的學習曲線。 無需考慮他們應該做什麼，現在只需上傳幾個文件即可。

最後，前期的一點點額外工作可以為每個人節省一些時間和網站生命週期的麻煩。