如何在WordPress中輕鬆嵌入iFrame代碼(3種方法)


您是否要在WordPress帖子或頁面中嵌入iFrame代碼?

IFrame提供了一種無需上傳即可將視頻或其他內容嵌入到您的網站的簡便方法。 YouTube等許多第三方平台都允許用戶使用iframe嵌入其網站中的內容。

在本文中,我們將向您展示如何使用多種方法在WordPress中輕鬆嵌入iFrame代碼。

輕鬆在WordPress中嵌入iFrame代碼

什麼是iFrame?

通過iFrame,您可以在自己的網站上嵌入視頻或其他內容。 這意味著您可以在站點上顯示視頻而無需實際託管該視頻。

iframe就像在您的網站上打開一個窗口以顯示外部內容一樣。 實際內容仍從您要嵌入的源中加載。

要添加iframe,您需要添加特殊的HTML代碼。 如果這聽起來很技術性,請不要擔心。

我們將向您展示將iFrame嵌入WordPress博客的最簡單方法。

為什麼要使用iFrame?

使用iFrame的一個關鍵原因是避免必須在您的站點上託管視頻或其他資源,這會佔用您的帶寬和存儲空間。

另外,通過iFrame,您可以避免侵犯他人的版權內容。 您無需下載視頻或其他內容然後將其上傳到您的網站,只需使用iFrame將其添加到頁面即可。

另一個優點是,如果更改了原始內容,它也會在iFrame中自動更新。

卡通人物向網站添加內容的圖像

使用iFrame也有一些缺點。 並非所有網站都允許您將其內容放入iFrame。 另外,對於您的頁面而言,iFrame可能會變得太大或太小,因此您需要手動對其進行調整。

另一個問題是HTTPS網站只能將iFrame用於其他HTTPS網站的內容。 同樣,HTTP站點只能將iFrame用於其他HTTP站點的內容。

這就是為什麼像WordPress這樣的許多平台都喜歡oEmbed的原因。 您只需將URL粘貼到WordPress帖子中,即可使用oEmbed嵌入視頻以及其他類型的內容。 內容將自動調整大小以適合,並且即使在移動設備上也將是正確的大小。

重要: WordPress不支持在Facebook和Instagram帖子中嵌入oEmbed。 有關更多信息,請查看有關Facebook / Instagram oEmbed問題的完整指南以及如何解決。

iFrames的另一個絕佳替代方法是使用社交Feed插件。 我們建議使用Smash Balloon的插件。 這些使您可以顯示來自Facebook,Instagram,Twitter和YouTube的內容。

話雖如此,讓我們看一下將iFrame添加到網站的三種不同方式。

1.使用源代碼的嵌入代碼在WordPress中添加iFrame

許多大型網站的內容都有“嵌入”選項。 這為您提供了需要添加到網站的特殊iFrame代碼。

在YouTube上,您可以轉到YouTube上的視頻,然後單擊其下方的“共享”按鈕來獲取此代碼。

點擊您選擇的YouTube視頻的“共享”按鈕

接下來,您將看到一個帶有多個共享選項的彈出窗口。 只需單擊“嵌入”按鈕。

點擊嵌入按鈕以獲取YouTube嵌入代碼

現在,YouTube將向您顯示iFrame代碼。 默認情況下,YouTube將包含播放器控件。 我們還建議您啟用隱私增強模式。

之後,繼續並單擊“複製”按鈕以復制代碼。

複製YouTube視頻的嵌入代碼

現在,您可以將該代碼粘貼到網站上的任何帖子或頁面中。 我們將其添加到塊編輯器中的新頁面。

要創建新頁面,請轉到 頁»添加新 在您的WordPress儀表板中。

然後,將HTML塊添加到您的頁面。

向WordPress添加自定義HTML塊

現在,您需要將YouTube iFrame代碼粘貼到該塊中。

將YouTube HTML代碼粘貼到iFrame塊中

然後,您可以預覽或發布頁面以查看嵌入其中的YouTube視頻。

在您的網站上實時觀看嵌入式視頻

小費: 如果您使用的是舊版經典編輯器,則仍然可以添加iFrame代碼。 您需要在“文本”視圖中執行此操作。

在經典編輯器中添加YouTube iFrame代碼

在經典編輯器上的視覺視圖和文本視圖之間切換可能會導致iFrame代碼出現問題。

2.使用iFrame WordPress插件嵌入iFrame

此方法很有用,因為它允許您創建iframe來嵌入任何來源的內容,即使該來源未提供嵌入代碼也是如此。

首先,您需要安裝並激活iFrame插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,該插件將立即開始工作,而無需進行設置。 繼續編輯或創建帖子或頁面。 然後,添加一個簡碼塊。

在塊編輯器中添加一個簡碼塊

之後,您可以使用此短代碼輸入您的iFrame代碼。

[iframe src="https://images2-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&gadget=a&no_expand=1&refresh=604800&url=URL goes here"]

只需更換 網址在這裡 以及要嵌入到您網站中的內容的URL。 我們正在嵌入Google地圖。

小費: 您可能需要使用“嵌入”選項來獲取內容的直接URL。 您只需要使用URL,而無需使用其餘的嵌入代碼。

嵌入Google地圖的簡碼

接下來,預覽或發布您的帖子。 您應該看到網站上嵌入了Google地圖。

網站上嵌入的Google地圖

您可以選擇向iFrame短代碼添加參數,以更改嵌入內容的顯示方式。 例如,您可以設置寬度和高度,並添加或刪除滾動條或邊框。 您可以在iFrame插件頁面上找到詳細信息。

小費: 如果您使用的是經典編輯器,則只需將短代碼粘貼到帖子或頁面中。 您無需切換到“文本”視圖。

在經典編輯器中添加簡碼

3.手動創建iFrame代碼並嵌入WordPress

如果您不想使用iFrame插件,則可以手動創建iFrame代碼。 為此,您需要在WordPress內容編輯器中添加HTML塊。

添加自定義HTML塊

首先,您需要將此代碼粘貼到HTML塊中。

只需將您要嵌入的內容的直接URL替換為“ URL go here”。 您只需要URL本身。

在這裡,我們嵌入了Google的地圖。

輸入Google地圖的iFrame代碼

您可以向HTML標籤添加其他參數。 例如,您可以設置iFrame的寬度和高度。 以下代碼表示您嵌入的內容將顯示600像素寬和300像素高。

如果您需要將嵌入的內容限制在較小的空間,則這很有用。

網站上的Google地圖具有指定的高度和寬度

我們希望本文能幫助您學習如何輕鬆地將iFrame代碼嵌入WordPress。 您可能還需要查看我們有關如何加快WordPress網站速度的最終指南,以及我們對最佳關鍵字研究工具的比較,以提高您的SEO排名。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。