如何在WordPress中動態更改oEmbed寬度和高度

WPressize Me

06/03/2023

如何在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上找到我們。



Related Posts

  • 2024-07-20
  • WordPress 主题

您是否想在 WordPress 中為不同頁面使用多個佈景主題?可以自訂網頁的外觀和布局,為文章、頁面和部分區域建立模板。但是如果您想為網站的某些部分或頁面使用完全不同的佈景主題呢?本文將指導您如何在 WordPress 中為頁面使用多個佈景主題。

閱讀更多
  • 2024-07-19
  • WordPress 主题

您是否想在 WordPress 網站上添加回頂效果?這種效果在頁面較長時非常有用,可以讓用戶輕鬆返回頁面頂部,提升網站的用戶體驗。本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。

閱讀更多
  • 2024-07-13
  • WordPress 主题

您是否想在 WordPress 中創建一個自定義頁面?自定義頁面允許您使用與網站其餘部分不同的佈局。許多 WordPress 網站使用自定義頁面佈局來建立銷售頁面、登陸頁面、網路研討會頁面等。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中創建自定義頁面。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>