Torne os tweets incorporados no WordPress responsivos

O WordPress permite que você incorpore tweets colando o URL do tweet em suas postagens. Você recebe um belo cartão com o tweet e todos os detalhes relevantes. Infelizmente, este cartão não funcionará em sites responsivos devido a uma largura de correção aplicada pelo Twitter. Neste post veremos como removê-lo e também tornar nosso tweet incorporado adequadamente responsivo.

Visão geral

Antes que o tweet seja processado para mostrar o cartão com o autor, avatar do Twitter, botão seguir e outros metadados, ele é exibido como um elemento HTML simples de citação em bloco com o atributo de largura fixa definido, que por padrão é 500px. Claro, essa largura fixa quebrará nosso layout responsivo, então basicamente precisamos remover esse atributo para que o cartão de tweet processado apareça sem largura fixa.

Após removê-lo, aplicaremos um estilo CSS simples para que funcione de forma responsiva com o restante das dimensões do site.

WordPress oEmbed e filtros

Nosso tweet é colocado usando oEmbed, uma tecnologia usada pelo WordPress que nos permite inserir conteúdo de outros sites apenas colocando o link em nosso editor de posts. O WordPress irá consultar automaticamente o site do provedor (que pode não ser apenas Twitter, mas YouTube, Vimeo e outros) e obterá o HTML para inserir em nosso site.

O HTML retornado pelo site do provedor pode ser processado usando um dos filtros que o WordPress fornece para fazer isso e alterar a marcação. Vamos usar o filtro oembed_result, que é executado após obter o HTML do provedor oEmbed e antes de ser salvo no cache. A vantagem disso é que o filtro não precisará ser executado toda vez que o site for visitado, resultando em uma resposta mais rápida e, claro, tempos de carregamento mais rápidos.

Filtrando o tweet

Este código deve ser colocado no arquivo functions.php do seu tema

O $urlparâmetro é o link para o tweet que estamos incorporando. Estamos verificando se é do Twitter, caso contrário não queremos executar isso. Estamos usando str_replace para procurar a string width="500"substituindo-a por uma string vazia.

Tornando o cartão de tweet responsivo

Ainda precisamos adicionar algum CSS para torná-lo responsivo, então insira o seguinte na folha de estilo do seu tema (ou plugin)

#main .twitter-tweet-rendered, #main .twt-border {
    max-width: 100% !important; 
}

e apenas com isso seus tweets incorporados serão responsivos.