如何使用 FitVids 讓 WordPress 中的影片具備響應式設計

當您在 WordPress 中嵌入一個視頻時，這些視頻默認不是響應式的。隨著響應式 WordPress 主題的興起，用戶訪問您的網站時可能會看到拉伸和不成比例的視頻容器。在本文中，我們將向您展示如何使用 FitVids 使您的 WordPress 中的影片具備響應式設計。

什麼是 FitVids？

FitVids 是一個 JQuery 插件，允許您使視頻嵌入具備響應式設計。如果您想在您的 WordPress 網站上使用它，只需要安裝並激活 FitVids for WordPress 插件。激活後，前往「外觀」»「FitVids」並輸入 CSS 選擇器類。WordPress 自動為文章添加 .post 類，所以您只需要使用這個類。

完成後，保存更改並預覽您的網站。 您需要重新調整瀏覽器窗口來查看視頻如何自行調整。

視頻教程

如果您不喜歡視頻或需要更多指導，請繼續閱讀。

手動添加 FitVids 使您的 WordPress 影片具備響應式設計

如果您不想安裝 FitVids for WordPress 插件，可以手動添加 FitVids jQuery 插件。首先，您需要下載並解壓 FitVids jQuery 插件到您的計算機。然後需要將解壓的 FitVids.js-master 文件夾上傳到您的主題的 js 目錄中。

您需要使用 FTP 工具（如 Filezilla）連接到您的網站並打開主題目錄。您的 WordPress 主題可能沒有 js 文件夾。如果沒有，則需要創建一個然後上傳 FitVids.js-master 文件夾。

在 js 文件夾中，創建一個新文件並命名為 FitVids.js。編輯該文件並將以下代碼粘貼到其中：

 (function($) { $(document).ready(function(){ // 獲取目標 .container, .wrapper, .post, 等. $(".post").fitVids(); }); })(jQuery); 

上面的代碼告訴 FitVids 查找 .post CSS 選擇器類。現在 FitVids 準備就緒，是時候在您的 WordPress 主題中正確添加 JavaScript。

將以下代碼粘貼到主題的 functions.php 文件中：

 wp_enqueue_script('fitvids', get_template_directory_uri() . '/js/FitVids.js-master/jquery.fitvids.js', array('jquery'), '', TRUE); wp_enqueue_script('fitvids-xtra', get_template_directory_uri() . '/js/FitVids.js', array(), '', TRUE); 

完成後，您已成功使您的 WordPress 影片具備響應式設計。

希望您覺得這篇文章有用。若有任何反饋和問題，請隨時在下方留言或在 Twitter 和 Google+ 上加入我們。