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, postagens do Facebook, vídeos do TikTok, tweets e muito mais no WordPress. A melhor parte é que esse conteúdo não é hospedado em seu site WordPress, o que economiza 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 em seu próprio design de 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
• Método 2. Usando CSS para Definir Largura e Altura Dinâmicas de oEmbed

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

Este método requer que você adicione código personalizado ao seu site WordPress. Se você nunca fez isso antes, confira nosso guia sobre como colar facilmente snippets 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 snippets 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 WPCode, o melhor plugin de snippets de código para 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ê alterar 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 landing page 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 Inspecionar elemento.

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.

Uma vez que você tenha 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 embed do Pinterest em um ID de post específico.

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

Você pode testar 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 de oEmbeds no WordPress. Você também pode querer ver estas dicas úteis de 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.