如何在WordPress中動態更改oEmbed寬度和高度
更新日期:2024年4月26日 | 編輯人員:編輯部 | 審核者:Syed Balkhi
您想在WordPress中動態更改oEmbed的寬度和高度嗎?
預設情況下,WordPress在嵌入視頻和其他oEmbed時表現出色。但是,有時您可能想要動態更改嵌入的寬度和高度。
為什麼要在WordPress中設置動態的oEmbed寬度和高度
WordPress使用oEmbed技術使您可以輕鬆地在帖子和頁面中嵌入第三方內容。這樣您可以輕鬆嵌入YouTube視頻、TikTok視頻、推文等,而且這些內容不會托管在您的WordPress網站上,從而節省服務器資源並提高WordPress性能。
默認情況下,WordPress會自動調整嵌入內容的高度和寬度以適應您的帖子和頁面。但某些用戶可能想要更改這一默認行為。例如,您可能想要為首頁和單個文章設置不同的嵌入寬度和高度。這在使用自定義首頁佈局或設計自己的主題時尤為有用。
話不多說,讓我們看看如何在WordPress中輕鬆設置動態的oEmbed寬度和高度。
方法1:在WordPress中設置動態嵌入寬度和高度
此方法需要您向WordPress網站添加自定義代碼。如果您之前沒有這樣做過,可以看看我們的指南,了解如何輕鬆地將網絡上的代碼片段粘貼到WordPress中。
對於此方法,我們將使用WordPress的條件標籤檢測正在查看的是哪個頁面,然後相應地更改oEmbed的寬度和高度默認值。
只需將以下代碼添加到您的主題的functions.php文件、特定於站點的插件或代碼片段插件中。
function wpb_oembed_defaults($embed_size) {
if(is_front_page()) {
$embed_size['width'] = 940;
$embed_size['height'] = 600;
}
else {
$embed_size['width'] = 600;
$embed_size['height'] = 338;
}
return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');
方法2:使用CSS設置動態oEmbed寬度和高度
WordPress會自動向網站的不同區域添加默認的CSS類。
這些CSS類可以用來更改網站特定區域內嵌內容的外觀。例如,在您的主題中,您可能會找到像page-id、post-id、category、tag等CSS類。您可以使用檢查工具找出這些CSS類。
同樣,WordPress也會向您的帖子和頁面中的嵌入塊添加CSS類。再次使用檢查工具來找出嵌入塊使用的類。
獲取這些CSS類後,您可以用它們來設置oEmbed的動態高度和寬度。例如,在下面的示例代碼中,我們為特定帖子ID的Pinterest嵌入塊設置了動態寬度和高度。
article#post-79 .wp-block-embed-pinterest {
max-width: 200px!important;
max-height: 400px!important;
}
希望這些方法幫助您學會如何在WordPress中輕鬆設置動態oEmbed寬度和高度。您也可以看看這些有用的WordPress使用技巧和我們挑選的最佳社交媒體插件。
如果您喜歡這篇文章,請訂閱我們的YouTube頻道觀看WordPress視頻教程。您也可以在Twitter和Facebook上找到我們。