如何在 WordPress 中嵌入 iFrame 代碼？

您想知道如何在 WordPress 中嵌入 iFrame 代碼嗎？ IFrame 允許您將視頻或其他內容嵌入您的網站，而無需上傳。

YouTube 等一些第三方平台允許用戶通過 iFrame 嵌入其網站中的內容。 本文討論了幾種可用於在 WordPress 中嵌入 iFrame 的方法。

本文將討論 iFrame 以及如何通過三種方法在 WordPress 中使用 iFrame。

什麼是 iFrame？

iFrame 是在其他網頁中嵌入網頁內容的方法。 HTML 標記用於識別外部頁面的 URL 以及有關如何在您的網站上顯示窗口的規範。

一般推薦在兩種情況下使用 iFrame：

• 首先，您希望共享不屬於您的內容。 在大多數情況下，通過 iFrame 嵌入內容不被視為侵犯版權。
• 因此，與大多數其他方法相比，它通常被認為是一種更合乎道德和合法的分享方法。 直接訪問 iFrame 中的代碼也是不可能的。
• 因此，您網站的訪問者將無法複製嵌入的內容並在其他地方共享。
• 您可能想要集成 iFrames 的第二個原因是支持共享大文件，例如視頻、音頻甚至圖像。 YouTube 就是這種服務的一個很好的例子。
• iFrame 允許您在網站上顯示文件的內容，而無需將文件託管在 WordPress 媒體庫中。
• 此外，必須注意這些媒體文件通常會佔用大量存儲空間，甚至可能導致您的網站加載緩慢。
• 當您在外部平台（例如 YouTube）上託管視頻，然後使用 iFrame 將它們嵌入到您的 WordPress 網站中時，您可以避免將它們直接上傳到您的網站的限制。
• 它將幫助您保持在線社區的道德成員，並保持您網站的速度和可訪問性。

如何在 WordPress 中使用 iFrame？

通常，共享內容是常見的做法。 然而，在您的網站上展示他人的內容可能會受到法律影響。 託管大文件（例如視頻）會對您網站的性能產生不利影響。

多虧了 iFrame，這些問題可以相對較快地得到解決。 在本節中，我們介紹了在 WordPress 中使用 iFrame 的三種方法。

方法一：使用嵌入代碼創建 iFrame

有些網站不允許您手動將其內容嵌入 iFrame。

因此，某些類型的內容（例如 Facebook 帖子或 YouTube 上的視頻）可能難以成為精選內容。

但是，這並不妨礙您使用 iFrame 顯示來自這些來源的內容。

因此，您只需訪問完成此操作所需的 iFrame 嵌入代碼。 為了說明這是如何工作的，讓我們看一下 YouTube。

請按照以下步驟執行此操作：

1. 選擇您要嵌入的視頻，無論是您自己的還是由其他創作者創建的。
2. 單擊視頻播放器下方的共享按鈕。

這將打開一個窗口，顯示各種可用的共享選項。 其中一個選項是Embed 。

3. 單擊嵌入按鈕。

在 YouTube 上選擇嵌入選項將顯示一個 HTML 片段，可用於將視頻嵌入 iFrame。

可以根據需要復制和使用多個 iFrame 參數。 或者，如果願意，您可以只複製源 URL，而不是 iFrame 參數。

4. 單擊複製按鈕。

與使用標準 URL 時收到的失敗相反，當您使用嵌入代碼時，您將看到嵌入在 iFrame 中的視頻。

5. 使用自定義 HTML 塊將代碼粘貼到頁面或發佈到塊編輯器中。

如果您使用的是經典編輯器，則需要切換到文本編輯器並在必要時添加代碼。

結果，您應該能夠查看正常運行的 iFrame。 可嵌入的 Facebook 帖子也可以類似地添加到您的網站。

許多流行的社交媒體網站，如 LinkedIn、Instagram 和 Twitter，都為其帖子提供嵌入代碼。 您通常可以在這些網站上各個帖子的設置中找到這些代碼。

方法 2：在 WordPress 中手動添加 iFrame

向頁面添加 iFrame 非常簡單。 除了打開和關閉 HTML 標記以及您希望嵌入的網頁的 URL 之外，沒有其他要求。

請按照以下步驟執行此操作：

1. 將URL替換為 example.com：

<iframe src=”example.com”></iframe>

關於 URL 源，需要注意一些限制。 iFrame 的第一個限制是它們只能顯示來自使用與您的站點相同的超文本傳輸協議的站點的內容。

因此，如果您的網站受 HTTPS 保護，您將只能嵌入來自其他 HTTPS 網站的內容。 同樣，如果您使用 HTTP，則只能嵌入同樣基於 HTTP 的 URL。

此外，一些流行的網站，如 Facebook 和 YouTube，可能不允許手動嵌入 iFrame。

如果您嘗試顯示來自不允許 iFrame 的網站的頁面，您將收到一條錯誤消息。

使用此方法的優點是您可以自定義 iFrame 以滿足您網站的需求。 這些參數稱為 iFrame 參數。

下面列出了一些最常見的類型：

寬度：使用此參數，您可以指定 iFrame 的寬度（以像素為單位）。

高度：與寬度參數類似，高度指定網頁上 iFrame 窗口的大小（以像素為單位）。

Allow ：通過設置此參數，您可以確定 iFrame 的默認行為或功能，例如全屏查看和支付處理。

重要性：此參數可以指定何時加載 iFrame。

例如，下面是窗口大小為 900 x 700 像素且啟用全屏查看的 iFrame 的代碼，設置為在網頁的其餘部分之後下載：

 <iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>

除了這些參數之外，您可能還需要考慮其他參數。 一般來說，上面列出的那些應該允許您創建基本的 iFrame，以便與訪問者共享 YouTube 視頻或其他內容。

方法 3：使用插件將 iFrame 添加到 WordPress

開發人員經常利用插件來簡化任務，例如將 iFrame 嵌入 WordPress 網站。

許多 WordPress 插件可以處理 WordPress 中的嵌入，選擇合適的插件取決於您的需要。 我們對最佳 WordPress iFrame 插件進行了詳細審查，您可以查看這些插件以找到最適合您需求的插件。

開始使用 iFrame 之前需要了解的事項

儘管 iFrame 提供了便利，但在使用它們之前，您應該注意以下幾點：

HTTPS/HTTP 兼容性問題

不允許從使用與您相同的超文本傳輸協議 (HTTP) 的其他網站或網頁嵌入內容。

因此，如果網站使用安全超文本傳輸協議 (HTTPS)，您將只能使用 HTTPS 嵌入來自其他網站的內容。 HTTP 也受此規則的約束。

Google 推薦 HTTPS，大多數知名網站都使用它。 這意味著您可以輕鬆嵌入高質量的網頁，如果您也這樣做的話。

安全問題

但是，對於 iFrame 可能對您的網站造成的安全漏洞，存在更重要的擔憂。

因為 iFrame 是進入其他站點的窗口，所以這些站點上發生的任何更改都可能影響您自己的站點。 也有可能通過 iFrame 將惡意代碼注入您的網站。

請務必記住，iFrame 會打開另一個網站的窗口，並且您不一定能阻止源網站包含惡意代碼。

對於此問題，建議您僅使用 iFrame 嵌入來自信譽良好的網站的內容。 您可以通過使用 iFrame 中的沙盒屬性來實現更高級的安全設置。

谷歌不是 iFrame 的忠實粉絲

通常，Google 建議避免使用 iFrame。 如果您的網站需要 iFrame，您可以提供基於文本的鏈接來訪問此內容，以便 Google 機器人可以抓取它。

本指南包含避免這些警告的最佳實踐，因此您不必擔心是否遵循它們。

並非所有網站都允許其內容被 iFramed

目前，許多大型網站已禁用其內容在 iFrame 中顯示的功能。 在這種情況下，您將無法通過 iFrame 顯示網站。

經常問的問題

在本節中，我們將回答一些常見問題，以幫助您更輕鬆地找到解決方案：

結論

本文討論了 iFrame 是什麼以及您可以在 WordPress 中使用 iFrame 的三種不同方法。

請接受我們真誠的感謝您花時間閱讀本文。 如果您有任何問題或意見，請隨時使用評論部分。

如果您想及時了解我們的文章，我們建議您在 Facebook 和 Twitter 上關注我們。