共享內容是一種相當普遍的做法。但是，在您的網站上展示其他創作者的內容會產生潛在的法律後果，而託管視頻等大型文件可能會損害您網站的效果。幸運的是，iFrames為這些問題提供了一個簡單的解決方案。
在這篇文章中，我們將解釋iFrame是什麼以及如何在WordPress網站上使用它們。
準備潛水了嗎？讓我們開始吧！
厭倦了緩慢的WordPress主機和subpar支持？我們在Kinsta做不同的事情。查看我們的託管計劃
- 什麼是iFrame（以及為什麼它們有用）
- 如何使用WordPress的iFrames
什麼是iFrames（以及為什麼它們有用）？
iFrame是一種將網頁嵌入另一個頁面內容的方法。這是使用HTML標記，外部網頁的URL以及有關窗口應如何在您的網站上顯示的規範來完成的。
有兩種情況，iFrame通常很有用。
第一種是當您希望分享不屬於您的內容時。在大多數情況下，通過iFrame嵌入內容不被視為侵犯版權。因此，與大多數其他選項相比，它通常是一種合法且更符合道德的分享方法。此外，無法直接訪問iFrame中的代碼。這意味著您網站的訪問者無法複製嵌入的內容並在其他位置共享。
您可能想要合併iFrame的第二個原因是共享大型文件，例如視頻，音頻甚至圖像。 YouTube就是最好的例子。
使用iFrame，您可以在網站上顯示文件內容，而無需在WordPress媒體庫中託管它。這很重要，因為這些類型的媒體文件通常佔用大量存儲空間，甚至可能會降低您的網站速度。
通過在YouTube平台上託管您的視頻，然後使用iFrame將其嵌入WordPress網站，您可以避免直接將其上傳到您網站的弊端。此技術將幫助您成為在線社區中更合乎道德的成員，並使您的網站快速且易於使用。
如何使用WordPress的iFrames（3種方法）
正如您可能希望使用iFrame的各種場景一樣，有多種方法可以實現iFrame。下面，我們將探討將iFrame添加到WordPress網站的三種最常用方法。
1.手動在WordPress中添加iFrame
將iFrame添加到頁面的基本代碼非常簡單。您只需要打開和關閉HTML標記，以及要嵌入的網頁的URL：
有關源URL的注意事項有幾個限制。首先，iFrames只能顯示使用與您相同的超文本傳輸協議的網站的內容。換句話說，如果您的網站使用HTTPS，則只能嵌入其他HTTPS網站的內容。同樣，如果您使用HTTP，則只能嵌入也使用HTTP的URL。
此外，一些流行的網站 – 如Facebook和YouTube – 禁用手動iFrame嵌入。嘗試從不允許嵌入iFrame的網站顯示頁面將在您的窗口中顯示錯誤：
禁用iFrame嵌入
如果您能夠使用此方法，請務必知道您還可以自定義iFrame以滿足您網站的需求。這就是iFrame參數的用武之地。一些最常見的參數包括：
- 寬度：使用此參數可以設置iFrame的特定寬度（以像素為單位）。
- 高度：與寬度參數一樣，高度決定了網頁上iFrame窗口的大小（以像素為單位）。
- 允許：使用此參數，您可以為iFrame設置某些默認行為或功能，例如全屏查看或付款處理。
- 重要性：您可以使用此參數指定iFrame何時應載入。
例如，以下是窗口大小為900像素×700像素的iFrame的代碼，啟用了全屏查看，設置為在網頁的其餘部分後下載：
在前端，這就是iFrame的樣子：
iFrame如何在前端看到
您可以考慮使用其他參數。但是，上面列出的內容應該可以讓您創建基本的iFrame，以便在您的網站上分享YouTube視頻或其他內容。
2.使用嵌入代碼創建iFrame
某些網站會限制您是否可以手動將其內容嵌入iFrame中。這可能使某些類型的內容很難顯示，例如Facebook帖子或YouTube視頻。但是，這並不意味著您無法在iFrame中顯示這些來源的內容。
相反，您只需訪問必要的嵌入代碼即可。我們來看看它在YouTube中的工作原理。轉到您想要嵌入的視頻，無論是您的還是其他創作者。在視頻播放器下方，您應該看到一個共享按鈕：
YouTube的共享功能
單擊此按鈕，將打開一個窗口，顯示可用的各種共享選項。其中一個是嵌入：
YouTube嵌入功能
選擇「嵌入」選項後，YouTube會顯示一個HTML代碼段，您可以使用該代碼段將視頻添加到iFrame。它包含某些iFrame參數，您可以根據需要複製和使用這些參數。否則，您也可以選擇簡單地複製源URL：
YouTube的嵌入代碼
當您使用嵌入代碼時，視頻將顯示在您的iFrame中，而不是您嘗試使用標準網址時會看到的錯誤。
要將其添加到塊編輯器中的頁面或帖子，您可以使用自定義HTML塊：
將iframe嵌入為自定義HTML塊
在經典編輯器中，您需要切換到文本編輯器並在相關點添加代碼：
我們用WordPress增加了1,187％的流量。我們將告訴你如何。加入20,000多名其他人通過內部WordPress提示獲取我們的每周時事通訊！立即訂閱成功！感謝您的訂閱
您將在一周內收到下一期Kinsta時事通訊。
訂閱Kinsta時事通訊訂閱我同意條款和條件以及隱私政策 
在經典編輯器中將iframe嵌入為自定義HTML
結果應該是一個正常運行的iFrame：
iFrame在WordPress中正確添加
您可以按照類似的過程在您的網站上嵌入Facebook帖子。導航到您要分享的帖子，然後點擊帖子右上角的三點圖標：
Facebook的嵌入功能
然後，選擇「嵌入」選項：
選擇Facebook的嵌入功能
這將顯示一個HTML代碼段，就像我們之前查看過的YouTube視頻一樣。源URL也是此代碼中最重要的部分，儘管您也可以使用預定的參數：
Facebook的iframe代碼
將此代碼添加到您的網頁，帖子應該顯示沒有任何問題：
Facebook的iframe嵌入在WordPress上
許多流行的社交媒體網站，包括LinkedIn，Instagram和Twitter，也為他們的帖子提供嵌入代碼。您通常會在每個帖子的設置中找到此選項。
3.使用插件將iFrame添加到WordPress
當然，WordPress開發人員總是在努力簡化任務，例如通過使用插件嵌入iFrame。如果您計劃在網站上嵌入外部內容，則可能需要考慮兩個選項。最流行的解決方案是iFrame插件：
iframe WordPress插件
此插件允許您使用短代碼將iFrame添加到WordPress網站。您可以指定與通過HTML手動添加iFrame時相同的所有參數。但是，您不必擔心直接處理頁面代碼。
或者，您也可以嘗試使用Advanced iFrame插件：
高級iFrame WordPress插件
再次，此插件允許您使用短代碼將iFrame添加到您的網站。但是，它還包括一些其他功能，例如防止其他用戶未經您的許可嵌入iFrame的安全代碼，自定義樣式選項等。
只需20美元，您就可以升級到高級iFrame Pro六個月的許可證。此版本生成響應式iFrame，並啟用縮放功能和延遲載入等功能。根據您計劃在網站上使用iFrame的頻率，這些選項可能值得付出高價。
您是否需要在您的網站上播放視頻，音頻片段或其他人的內容？了解如何使用此深入指南在WordPress中嵌入iFrame代碼！ ??️點擊鳴叫摘要
保持您的網站表現良好，並在法律的右側是至關重要的。 iFrames不僅可以幫助您以道德的方式分享他人的內容，還可以讓您顯示視頻和音頻文件，而無需在您的網站上託管它們。在這篇文章中，我們研究了在WordPress中使用iFrames的三種方法：
- 手動合併WordPress網站和iFrame。
- 使用嵌入代碼創建iFrame。
- 使用WordPress插件添加iFrame，例如iFrame或Advanced iFrame。
您對iFrames或如何在WordPress網站上使用它們有任何疑問嗎？請在下面的評論部分告訴我們！
0股
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
.essb_links .essb_links_list li a {margin-top：0px; } @media only screen and（min-width：64em）{.container – narrow.pb – 60，.knowledgebase .user-content {position：relative; } .widget-share {position：absolute;左：-200px;頂部：0px;身高：100％;寬度：200px; box-sizing：border-box; } .widget-share-aligner {width：200px; padding-right：62px; box-sizing：border-box; } .widget-share-inner {padding-bottom：62px; } .knowledgebase .user-content .widget-share-inner {padding-top：0; } .widget-share .amount {display：flex; align-items：center;證明內容：flex-end;寬度：100％;保證金右：11像素; font-size：14px;字體重量：500;邊距：10px的; } .widget-share .amount svg {margin-right：8px;保證金左：10px的; } .essb_links .essb_links_list {flex-direction：column; align-items：flex-end; } .essb_links .essb_links_list li {display：block; margin-bottom：5px！important; } .widget-share__total {margin-bottom：0px！important; } .widget-share__total .heading – small {color：＃999999;字體大小：14px的; font-weight：300; } .essb-total-value {margin-right：4px; } .essb_links {margin：0px;填充：0像素; } .essb_counter_right {display：none！important; } .essb_links.essb_template_circles-retina .essb_link_hackernews a，.essb_links.essb_template_circles-retina .essb_link_reddit a，.essb_links.essb_template_circles-retina .essb_link_mail a，.essb_links.essb_template_circles-retina .essb_link_mwp a，.essb_links.essb_template_circles-retina .essb_link_buffer a ，.essb_links.essb_template_circles-retina .essb_link_linkedin a，.essb_links.essb_template_circles-retina .essb_link_facebook a，.essb_links.essb_template_circles-retina .essb_link_twitter a {color：＃43414e！important;背景：＃f3f3f6！important; } .essb_links.essb_template_circles-retina li a：focus，.essb_links.essb_template_circles-retina li a：hover {border-color：#fff！important;背景：＃43414e！important; {.binter-color：＃f3f3f6！important;背景：＃f3f3f6; } .essb_links .essb_icon：在{font-size：15px！important;之前頂：8像素;左：9px; } .essb_links .essb_icon {width：32px;高度：32PX; } .essb_links.essb_counter_modern_right .essb_counter_right {background：＃f3f3f6！important; } @media only screen and（max-width：63.999em）{。widget-share-aligner {position：relative！important;頂部：0！重要; } .essb_links .essb_links_list li {margin-right：8px！important; }}