如何在 WordPress 中嵌入 iFrame

在線共享內容是一種常見的做法。 然而，當您試圖弄清楚如何合併某些類型的內容時，您可能會感到難過。 從其他網站共享大文件或特定項目有時可能是一個挑戰。

幸運的是，您可以使用一種相當簡單的網頁設計實踐來在您的 WordPress 網站上顯示特定類型的內容。 使用 HTML 創建內聯框架 (iFrames) 可以更輕鬆地在線共享圖像、視頻和其他媒體。

在本文中，我們將探討 iFrame 在網站上的不同用途。 我們還將完成手動和使用插件創建 iFrame 的步驟。 讓我們開始吧！

iFrame 使用

當您使用 iFrame 時，您實質上是在您的網站上創建了一個小門戶，可以查看來自其他地方的內容。 這在多種情況下很有用。

使用 iFrame 意味著您不必實際託管要顯示的文件。 內容保留在其原始位置，並且可以通過您網站上的框架進行查看。 當您想要顯示大文件時，這種技術可以發揮作用的一種方式是。 iFrame 可以將該內容帶到您的網站上，而不會降低其加載速度。

值得注意的是，iFrame 是 HTML5 中唯一允許的框架類型。 您可以使用它們來顯示各種不同類型的內容，包括：

• 圖像：您可以使用 iFrame 顯示來自外部畫廊的高質量圖像，並避免因文件大小而不得不妥協。
• 視頻：在 YouTube 或 Vimeo 等平台上託管您的視頻，並使用 iFrame 將它們放在您的網站上，可以增強用戶體驗，同時釋放您的網站存儲空間。
• 其他網頁內容：突出顯示來自其他網站的內容，例如投資組合頁面或食譜，可以輕鬆為您的受眾帶來豐富的內容。

當您使用 iFrame 時，您還可以避免複雜的版權規則。 一些法院已經裁定，使用 iFrame 顯示受版權保護的材料並不在所有情況下都構成版權侵權。

網站還可以包含腳本以防止其內容包含在 iFrame 中。 但是，我們建議始終將您使用的任何內容歸功於原始創作者，或者如果您不確定如何繼續，請尋求法律建議。

通過插件使用 iFrame

在 WordPress 網站上使用 iFrame 的最簡單方法之一是使用 iFrame 插件。 幸運的是，有幾個評價很高的選項可供選擇。

第 1 步：下載並配置 iFrame 插件

對於我們的示例，我們將使用 Advanced iFrame 插件。 它靈活、易於使用且評價很高：

安裝並激活插件後，您會在 WordPress 儀表板中找到一個新的Advanced iFrame菜單項。 Advanced iFrame 具有相當廣泛的選項集。 您需要從“選項”選項卡開始，然後查看“快速入門”視頻：

然後，您可以向下滾動並查看插件的一些選項。 這些都設置了大量有用的解釋和易於選擇的選項：

Advanced iFrame 還提供了一個免費的 iFrame 檢查器，它將檢查您提供的任何 URL，以查看它是否包含阻止內容包含在 iFrame 中的腳本。 最好先通過此工具運行任何 URL，然後再在您網站的 iFrame 中使用它。

您還需要查看“基本設置”選項卡。 在那裡，您可以自定義 iFrame 的元素，例如高度、寬度和框架邊框：

配置完插件設置以滿足您的需求後，您就可以開始在您的網站上使用 iFrame。

第 2 步：使用高級 iFrame 塊

在 WordPress 塊編輯器中，您現在可以使用高級 iFrame塊：

如果您第一次使用時找不到這個塊，它會在小部件類別下。

單擊Advanced iFrame塊後，它將自動加載來自插件創建者網站的內容。 您可以使用頁面右側的“阻止”選項來配置阻止：

在那裡，您可以添加要在 iFrame 中顯示的內容的 URL。 如果需要，您還可以覆蓋插件的某些設置。

第 3 步：預覽您的網站

如果您使用 iFrame 檢查器測試了您的 URL，您應該可以開始了。 但是，最好在發佈內容之前預覽您的更改。 在編輯和進行更改時，您應該會看到 iFrame 的實時預覽。

您還可以使用編輯窗口右上角的“預覽”選項，以便在站點菜單和側邊欄的上下文中查看帖子。

在沒有插件的情況下使用 iFrame

如果您不想使用插件但仍想使用 iFrame，那麼您很幸運！ 您可以手動將代碼應用到您的帖子和頁面以包含 iFrame 內容。

第 1 步：插入嵌入代碼

如果您想在您的網站上加入 YouTube 視頻等內容，您需要找到 YouTube 提供的嵌入代碼。 您可以通過單擊分享在視頻下方找到它。

這將調出一個共享選項菜單。 您需要選擇“嵌入”以獲取 iFrame 所需的代碼。

將打開一個單獨的窗口，預覽嵌入內容的外觀。 然後您就可以復制 iFrame 代碼片段。

如果您希望查看者在特定時間代碼自動開始查看內容，您還可以選中開始於框。

接下來，您將返回到您的 WordPress 帖子並添加自定義 HTML塊。 您可以在格式類別下找到它。

將此塊添加到您的帖子後，您只需粘貼從 YouTube 頁面複製的嵌入代碼即可。

接下來，您需要確保嵌入功能正常運行並且看起來符合您的要求。 您可以單擊“自定義 HTML”塊中的“預覽”來查看您的 iFrame 是否正常工作。

這樣，您就成功地在您的網站上放置了一個 iFrame。 相同的過程適用於為您提供嵌入代碼的任何平台。

第 2 步：自定義您的 iFrame

如果您對 iFrame 在您的帖子或頁面上的顯示方式仍然不太滿意，您可以手動調整代碼中的一些值。 建議您使用層疊樣式表 (CSS) 來完全自定義 iFrame 在您網站上的顯示方式。

iFrame 標記允許使用許多自定義屬性。 然而，重要的是要注意其中許多已不再受 HTML5 支持。 正如我們之前提到的，您可能需要調查主題的 CSS，因為您可能無法直接在自定義 HTML塊中覆蓋某些格式。

第 3 步：定期檢查您的 iFrame 內容

使用 iFrame 時，您需要定期檢查框架內容。 由於您打開了一個內容窗口，您可能無法對其進行任何編輯或質量控制，因此它可能隨時導致您的網站出現問題。

例如，如果我們在示例中使用的視頻是從其 YouTube 頻道中刪除的，那麼我們的帖子中的播放器就會損壞。 這比斷開的鏈接更明顯，因為它會給您的網站留下視覺衝擊。 定期檢查您的 iFrame 內容使您能夠更改或刪除任何不再工作的媒體。

使用 WP Engine 優化您的網站

在您的網站上使用 iFrame 可以讓事情順利進行，同時仍然包含豐富的媒體和動態內容。 在 WP Engine，我們知道理解重要的網頁設計概念和訪問最好的開發人員資源的重要性。

此外，我們致力於幫助您為客戶提供最佳數字體驗。 我們提供多種完全託管的 WordPress 託管計劃供您選擇，因此您可以專注於設計漂亮的網站！