Como Alterar Dinamicamente a Largura e Altura do oEmbed no WordPress

Quer que seu conteúdo incorporado fique perfeito em seu site WordPress, não importa o tamanho da tela?

Por padrão, o WordPress faz um ótimo trabalho ao incorporar vídeos e outros oEmbeds em suas postagens e páginas. No entanto, com base em nossa experiência, às vezes você precisa de mais controle sobre o tamanho deles.

Ser capaz de alterar dinamicamente a largura e a altura dos embeds é importante para o design responsivo, garantindo que seu site fique ótimo em celulares, tablets e desktops. Também permite ajustar o layout do seu conteúdo para um visual mais polido. 

Neste artigo, mostraremos como alterar dinamicamente a largura e a altura do oEmbed no WordPress.

Por que definir largura e altura dinâmicas de oEmbed no WordPress

O WordPress facilita a incorporação de conteúdo de terceiros em suas postagens e páginas usando uma tecnologia chamada oEmbed.

Isso permite que você incorpore facilmente vídeos do YouTube, posts do Facebook, vídeos do TikTok, tweets e muito mais no WordPress. A melhor parte é que esse conteúdo não é hospedado no seu site WordPress, o que economiza os recursos do seu servidor e melhora o desempenho do WordPress.

Por padrão, o WordPress faz um ótimo trabalho ajustando automaticamente a altura e a largura do conteúdo incorporado para caber em suas postagens e páginas.

No entanto, alguns usuários podem querer alterar esse comportamento padrão. Por exemplo, você pode querer definir uma largura e altura de incorporação padrão diferentes para a página inicial e para artigos individuais.

Isso é útil quando você está usando um layout de página inicial personalizado ou trabalhando no design do seu próprio tema personalizado.

Dito isso, vamos dar uma olhada em como definir facilmente a largura e a altura dinâmicas para o conteúdo oEmbed no WordPress.

Mostraremos dois métodos diferentes, você pode usar os links rápidos abaixo para pular diretamente para o método de seu interesse.

Método 1. Definindo Largura e Altura de Incorporação Dinâmicas no WordPress

Este método exige que você adicione código personalizado ao seu site WordPress. Se você nunca fez isso antes, consulte nosso guia sobre como colar facilmente trechos da web no WordPress.

Para este método, usaremos tags condicionais do WordPress para detectar qual página do WordPress está sendo visualizada e, em seguida, alteraremos as larguras e alturas padrão do oEmbed de acordo.

Basta adicionar o seguinte código ao arquivo functions.php do seu tema, a um plugin específico do site ou a um plugin de trechos de código.

//Custom oEmbed Size
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');

Recomendamos adicionar este código usando o WPCode, o melhor plugin de trechos de código do WordPress. É a maneira mais fácil de adicionar código personalizado no WordPress sem editar o arquivo functions.php do seu tema.

Com este método, você não precisa se preocupar em quebrar seu site. Além disso, se você mudar seu tema do WordPress, poderá manter todas as suas personalizações.

Para começar, você precisa instalar e ativar o plugin gratuito WPCode. Para instruções passo a passo, consulte nosso guia sobre como instalar um plugin do WordPress.

Após ativar o plugin, vá para a página Snippets de Código » + Adicionar Snippet no painel de administração do seu WordPress.

Em seguida, encontre a opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clique no botão ‘+ Adicionar Snippet Personalizado’.

Em seguida, selecione ‘Snippet PHP’ como o tipo de código nas opções que aparecem na tela.

Depois disso, você pode adicionar um nome para o seu snippet personalizado, que pode ser qualquer coisa para ajudar você a se lembrar para que serve o código.

Em seguida, basta copiar e colar o snippet de código acima na caixa ‘Pré-visualização do Código’.

Quando isso for feito, simplesmente mude o seletor no topo da tela de ‘Inativo’ para ‘Ativo’ e clique no botão ‘Salvar Snippet’.

Você pode usar qualquer uma das tags condicionais do WordPress disponíveis para detectar diferentes cenários.

Aqui está outro exemplo onde alteramos a largura padrão do oEmbed para uma página de destino personalizada.

function wpb_oembed_defaults($embed_size) {
if( is_page( 42 ) ) {
        $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');

Como você pode ver, este código simplesmente define uma largura e altura padrão diferente para um ID de página específico.

Método 2. Usando CSS para Definir Largura e Altura Dinâmicas de oEmbed

O WordPress adiciona automaticamente classes CSS padrão a diferentes áreas do seu site.

Essas classes CSS podem então ser usadas para alterar a aparência de embeds em áreas específicas do seu site.

Por exemplo, você pode encontrar classes CSS como page-id, post-id, category, tag e muitas outras no seu tema WordPress. Você pode descobrir essas classes CSS usando a ferramenta Inspect.

Da mesma forma, o WordPress também adiciona classes CSS a blocos de embed em seus posts e páginas. Novamente, você usará a ferramenta Inspecionar elemento para descobrir quais classes são usadas pelo bloco de embed.

Depois de ter essas classes CSS, você pode usá-las para definir altura e largura dinâmicas para oEmbeds. Por exemplo, no seguinte código de exemplo, estamos definindo largura e altura dinâmicas para o bloco de incorporação do Pinterest em um ID de postagem específico.

article#post-79 .wp-block-embed-pinterest {
    max-width: 200px!important;
    max-height: 400px!important;
}

Você pode experimentar seu código CSS adicionando CSS personalizado no personalizador de temas. Assim que estiver satisfeito, não se esqueça de salvar e publicar suas alterações.

Esperamos que esses dois métodos tenham ajudado você a aprender como definir facilmente a largura e a altura dinâmicas do oEmbed no WordPress. Você também pode querer ver essas dicas, truques e hacks úteis do WordPress ou conferir nossa seleção dos melhores plugins de mídia social para WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.