分享內容是一種相當普遍的做法。不過，在自己的網站上展示其他創作者的內容可能會帶來法律後果，而託管視訊等大檔案則會損害網站效能。幸運的是，iFrames 為這些問題提供了簡單的解決方案。
iFrame提供了一種無需上傳即可將視訊或其他內容嵌入網站的簡便方法。騰訊視訊、B站等許多第三方平臺都允許使用者使用iframe嵌入其網站中的內容。
在本篇文章中，我們將解釋什麼是 iFrames 以及如何在 WordPress 網站上嵌入 iFrame 程式碼。
什麼是iFrame?
通過iFrame，您可以在網站上嵌入視訊或其他內容。這意味著您可以在站點上顯示視訊而無需上傳該視訊至你的網站。
iframe就像在網站上開啟一個視窗以顯示外部內容一樣，實際內容從嵌入的源中載入。
iFrame 是將網頁嵌入另一個網頁內容的一種方式。這需要使用 HTML 標記、外部頁面的 URL 以及有關視窗在網站上顯示方式的說明。
iFrames 一般在兩種情況下有用。
第一種情況是你想分享不屬於你的內容。在大多數情況下，通過 iFrame 嵌入內容不被視為侵犯版權（另見歐盟裁決）。因此，與大多數其他選擇相比，這通常是一種合法且更合乎道德的共享方式。此外，iFrame 中的程式碼不能被直接訪問。這意味著網站訪問者無法複製嵌入的內容並將其分享到其他地方。
使用 iFrame 的第二個原因是為了共享大型檔案，如視訊、音訊甚至影象。YouTube 就是一個很好的例子。
有了 iFrame，您就可以在網站上顯示檔案內容，而不必將其託管在 WordPress 媒體庫中。這一點很重要，因為這些型別的媒體檔案通常會佔用大量的儲存空間，甚至會拖慢網站的執行速度。
通過在 YouTube 等平臺上託管視訊，然後用 iFrames 將其嵌入 WordPress 網站，就可以避免直接上傳到網站的缺點。這種技術將使您成為網路社羣中更有道德的一員，並使您的網站快速易用。
新增iframe，需要新增特殊的HTML程式碼。但操作都比較簡單，後面會詳細介紹如何將iFrame嵌入WordPress的三種方法。
為什麼使用iFrames?
使用iFrame的一個關鍵原因是避免必須在自己的網站上上傳視訊或其他資源，以免佔用大量的頻寬和儲存空間。
另外，通過iFrame，還可以避免侵權問題。您無需下載視訊或其他內容後再將其上傳到網站，只需使用iFrame將其新增到頁面即可。
另一個優點是，如果原始內容更改了，iFrame嵌入的方式也會自動更新內容。
使用iFrame也有一些缺點。並非所有網站都允許將其內容放入iFrame。另外，對於您的頁面而言，iFrame可能會變得太大或太小，因此您需要手動對其進行調整。
另一個問題是HTTPS網站只能使用iFrame嵌入其他HTTPS網站內容。同樣，HTTP站點只能使用iFrame嵌入其他HTTP站點內容。
這就是為什麼像WordPress這樣的許多平臺都喜歡oEmbed的原因。您只需將URL貼上到WordPress帖子中，即可使用oEmbed嵌入視訊以及其他型別的內容。內容將自動調整為合適的大小，且相容移動裝置。
重要提示： WordPress不支援針對Facebook和Instagram的oEmbed。
iFrames的另一個絕佳選擇是使用社交資訊流外掛。推薦使用Smash Balloon外掛，以實現顯示來自Facebook，Instagram，Twitter和YouTube的內容。
下面讓我們詳細看看如何將iFrame新增到網站的三種不同方式。
1. 在 WordPress 中手動新增 iFrame
向網頁新增 iFrame 的基本程式碼相當簡單。您所需要的只是 HTML 標記的開頭和結尾，以及您希望嵌入的網頁的 URL：
<iframe src="example.com"></iframe>
關於源 URL，有幾個限制需要注意。首先，iFrames 只能顯示與你的網站使用相同超文字傳輸協議的網站內容。換句話說，如果你的網站使用 HTTPS，你只能嵌入其他 HTTPS 網站的內容。同樣，如果您使用 HTTP，則只能嵌入同樣使用 HTTP 的 URL。
此外，一些常用網站（如 Facebook 和 YouTube）禁止手動嵌入 iFrame。如果嘗試顯示不允許嵌入 iFrame 的網站的頁面，視窗中將顯示錯誤：
禁用 iFrame 嵌入
如果您可以使用這種方法，重要的是要知道您還可以自定義 iFrame，以滿足您網站的需要。這就是 iFrame 引數的作用所在。最常見的引數包括：
- Width: 該引數可讓你以畫素為單位為 iFrame 設定特定寬度。
- Height: 與寬度引數一樣，高度決定了網頁上 iFrame 視窗的大小（單位：畫素）。
- Allow: 使用該引數，您可以為 iFrame 設定某些預設行為或功能，如全屏瀏覽或付款處理。
- Importance: 使用該引數可指定 iFrame 的載入時間。
例如，下面是一個視窗大小為 900 畫素乘 700 畫素的 iFrame 的程式碼，它啟用了全屏瀏覽功能，並被設定為在網頁其他部分之後下載：
<iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>
在前端，iFrame 可能是這個樣子：
iFrame 在前臺的外觀
你還可以考慮使用其他引數。不過，上面列出的引數應該能讓你建立基本的 iFrames，用於在網站上共享 YouTube 視訊或其他內容。
以古騰堡編輯器為例，您需要在WordPress內容編輯器中新增HTML塊。
然後將下面iframe程式碼貼上到HTML塊中。
<iframe src="URL goes here"></iframe>
將“URL go here”替換為嵌入的內容的URL地址。繼續以百度地圖為例：
你還可以設定HTML標籤其他引數。例如，設定iFrame的寬度和高度，以下程式碼表示將嵌入內容顯示為600*300畫素。
<iframe src="URL goes here" width="600" height="300"></iframe>
如果嵌入內容受限於版塊寬度，則這很有用。
2. 使用嵌入程式碼建立 iFrame
許多大型網站的內容都有“嵌入”選項，以iFrame程式碼提供其網站內容。
舉了例子，如果你需要分享B站的視訊，你只需要在具體的視訊頁面，點選視訊播放器下方的分享按鈕，即可看到嵌入程式碼，如下圖所示：
單擊“複製”按鈕以複製程式碼。
然後，將該程式碼貼上到WordPress網站上的任何文章或者頁面。我
下面我們將演示將程式碼複製貼上到頁面的塊編輯器（古騰堡編輯器）。
通過WordPress儀表板中的頁面»新建頁面，即可建立新頁面。然後，將HTML塊新增到這個頁面。
現在，您需要將B站的視訊分享iFrame程式碼貼上到該塊中。
通過預覽或釋出頁面以檢視嵌入其中的B站視訊。
提示：如果使用的是舊版經典編輯器，則需要在“文字”檢視中新增iFrame程式碼。
注：在經典編輯器上的視覺化和文字檢視之間切換可能會導致iFrame程式碼出現問題。
3. 使用iFrame外掛實現iFrame程式碼嵌入
此方法比第一種方法更實用，因為它允許您建立iframe來嵌入任何來源的內容，即使該來源未提供嵌入程式碼。
當然，WordPress 開發人員一直在努力通過使用外掛來簡化嵌入 iFrames 等任務。如果您打算經常在網站上嵌入外部內容，您可能需要考慮兩種方案。最流行的解決方案是 iFrame 外掛：
WordPress 外掛 -iframe
該外掛可讓您使用短程式碼在 WordPress 網站上新增 iFrame。您可以指定所有與通過 HTML 手動新增 iFrame 時相同的引數。不過，您不必擔心直接處理頁面程式碼的問題。
或者，您也可以試試 Advanced iFrame 外掛：
WordPress 外掛 – Advanced iFrame
同樣，這個外掛允許你使用簡碼在網站上新增 iFrames。不過，它還包含一些附加功能，例如防止其他使用者未經許可嵌入 iFrame 的安全程式碼、自定義樣式選項等。
只需支付 20 美元，你就可以升級到 Advanced iFrame Pro，獲得為期 6 個月的許可證。該版本可製作響應式 iFrame，並支援縮放功能和懶載入等功能。根據你計劃在網站上使用 iFrames 的頻率，這些選項可能值得你花高價購買。
下面我們以免費的 iFrame 為例，來演示如何通過外掛在 WordPress 中嵌入 iFrame.
首先，您需要安裝並啟用 iFrame 外掛。
啟用後，該外掛無需進行設定即可工作。編輯或建立文章、頁面。然後，新增一個簡碼（shortcode）塊。
之後，您可以使用此短程式碼輸入iFrame程式碼。
[iframe src="URL goes here"]
只需將 URL goes here 替換為您要嵌入到站點中的內容URL。舉個例子，嵌入百度地圖。
提示：您可能需要使用“嵌入”選項來獲取內容的URL。但你只需要使用URL，而無需使用其餘的嵌入程式碼。
預覽或釋出文章，即可檢視網站上嵌入的百度地圖。
您還可以在iFrame短程式碼新增引數，以更改嵌入內容的顯示方式。例如，設定寬度和高度，新增或刪除滾動條或邊框。這些引數資訊可以在iFrame外掛頁面上找到。
提示：如果使用的是經典編輯器，則只需將簡碼貼上到帖子或頁面中。您無需切換到“文字”檢視。
小結
iFrames 不僅能幫助您以合乎道德的方式分享他人的內容，還能讓您顯示視訊和音訊檔案，而無需在您的網站上託管它們。在本篇文章中，我們將介紹在 WordPress 中使用 iFrames 的三種方法：
- 手動合併 WordPress 網站和 iFrames。
- 使用嵌入程式碼建立 iFrames。
- 使用 WordPress 外掛新增 iFrames，如 iFrame 或 Advanced iFrame。
您對 iFrames 或如何在 WordPress 網站上使用 iFrames 有任何疑問嗎？請在下面的評論區告訴我們！
評論留言