如何在 WordPress 中设置 oEmbed 最大宽度(4 个简单方法)

技术教程 2021年11月6日
1080 0

您想限制 WordPress 中 oEmbeds 的宽度吗?

WordPress 会自动嵌入第三方内容，例如 YouTube 视频、推文或 Facebook 帖子.但是，有时嵌入内容可能会变得太宽并弄乱您的页面布局.

在本文中，我们将向您展示如何在 WordPress 中设置 oEmbed max-width，以便您可以更好地控制网站布局.

Setting oEmbed maximum width in WordPress

为什么要修复 WordPress 中的 OEmbed 最大宽度?

WordPress 允许您使用一种称为 oEmbed 的技术将来自选定第三方网站的内容自动嵌入到您的帖子和页面中.

这使您可以轻松地在您的网站上嵌入 YouTube 视频、Facebook 帖子、推文和许多其他类型的内容.此内容未托管在您的 WordPress 网站上.相反，它直接从这些第三方站点显示.

WordPress 非常擅长根据您网站的内容或侧边栏区域自动调整嵌入内容的宽度.

但是，有时这些嵌入的内容可能太宽，并且与您网站的内容区域重叠，如下例所示.

A WordPress embed overflowing the content width

要解决此问题，您需要明确告知 WordPress 对第三方嵌入使用最大宽度限制.不幸的是，WordPress 设置中没有选项可以做到这一点.

话虽如此，让我们来看看如何在 WordPress 中轻松设置 oEmbed 最大宽度而不破坏任何东西.

我们将介绍 4 种不同的方法，您可以选择最适合您需求的方法:

  1. 使用 WordPress 短代码设置 oEmbed 宽度
  2. 使用 WordPress Embed Block 设置 oEmbed 宽度
  3. 使用 CSS 设置 oEmbed 最大宽度
  4. 使用 WordPress 过滤器设置 oEmbed 最大宽度(代码方法)

方法一:在WordPress中使用Embed Shortcode

此方法更简单，并且非常适合为 WordPress 中的视频嵌入设置最大宽度.

您将使用短代码块，而不是粘贴 URL 或使用 YouTube 块.在其中，您需要使用嵌入短代码并包含宽度和高度参数.

[embed width="900" height="600"]https://youtu.be/6LwWumPeues[/embed]

宽度和高度的值可以随意更改为您自己的要求，并将嵌入 URL 替换为您自己的嵌入.

Embed shortcode width

您现在可以预览您的帖子或页面并查看嵌入效果.

oEmbed width adjusted

嵌入简码及其宽度和高度参数不适用于所有 oEmbed 提供商.例如，您不能使用它来设置 WordPress 中嵌入的 Giphy 的高度和宽度.

在这种情况下，您可以尝试下面提到的替代方法之一.

方法 2.在 WordPress 中使用嵌入块

默认的 WordPress 编辑器为不同的 oEmbed 服务提供商提供了几个嵌入块.您可以使用它们在帖子和页面的不同区域嵌入内容.

Embed blocks in WordPress

其中一些块还允许您更改嵌入的对齐方式并将内容宽度设置为宽或全宽.

Block width and alignment

您可以尝试使用这些选项来查看它是否修复了嵌入的最大宽度问题.

方法 3.使用 CSS 为 WordPress 中的嵌入设置最大宽度

默认情况下，WordPress 会自动将 CSS 类添加到帖子和页面的不同区域.

它还添加了几个 CSS 类来嵌入块.这些 CSS 类可用于为 WordPress 网站上的嵌入设置最大宽度.

要找出您需要定位的 CSS 类，只需在帖子或页面中嵌入内容，然后在浏览器中预览即可.将鼠标移到嵌入的内容上右键单击，然后选择检查工具.

Finding CSS classes for embed blocks

您将能够看到添加到嵌入元素的所有 CSS 类.您可以使用这些类为此类嵌入设置最大宽度.

例如，如果您想为所有嵌入设置最大宽度，那么您可以使用以下自定义 CSS.

.wp-block-embed {
    max-width: 900px!important;
}

您还可以使用 .wp-block-embed-providername 类来定位特定的 oEmbed 提供程序.例如，如果您只想为 Pinterest 嵌入设置最大宽度，那么您可以使用以下自定义 CSS.

.wp-block-embed-pinterest {
    max-width: 900px!important;
}

方法 4.使用 WordPress 过滤器设置 oEmbed 最大宽度

最后一种方法要求您向 WordPress 网站添加自定义代码.如果您以前没有这样做过，请查看我们的指南，了解如何在 WordPress 中轻松添加自定义代码片段.

对于这种方法，我们将自己的代码添加到 WordPress 中以设置 oEmbeds 的默认宽度.只需将以下代码添加到主题的 functions.php 文件或代码片段插件中.

add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' );
 
function wpbeginner_embed_defaults() {
    return array(
        'width'  => 400, 
        'height' => 280
    );
}

不要忘记根据自己的要求调整高度和宽度属性.

此方法的问题在于，它仅在嵌入内容未定义"宽度"时才应用宽度属性.如果嵌入代码已经包含宽度，则此方法可能不起作用.

额外提示

如果您经常将社交媒体平台的内容嵌入到您的 WordPress 网站，那么您应该开始使用 Smash Balloon.

Smash Balloon

它是 WordPress 最好的社交媒体插件，允许您轻松地在 WordPress 中嵌入自定义社交媒体提要.

它支持流行的社交媒体嵌入，如 YouTube、Twitter 等.它还允许您嵌入 WordPress 不支持的 Facebook 和 Instagram 内容.

更重要的是，所有社交媒体源都是移动响应式的，并且适用于任何 WordPress 主题.

我们希望本文能帮助您了解如何在 WordPress 中设置 oEmbed 最大宽度.您可能还想查看我们完整的社交媒体备忘单或我们对适合小型企业的最佳实时聊天软件的专家比较.

oembed(2)PR(132)WordPress(893)
♥赞0

相关文章

发表回复