O WordPress permite que voc\u00ea incorpore tweets colando o URL do tweet em suas postagens. Voc\u00ea recebe um belo cart\u00e3o com o tweet e todos os detalhes relevantes. Infelizmente, este cart\u00e3o n\u00e3o funcionar\u00e1 em sites responsivos devido a uma largura de corre\u00e7\u00e3o aplicada pelo Twitter. Neste post veremos como remov\u00ea-lo e tamb\u00e9m tornar nosso tweet incorporado adequadamente responsivo.<\/p>\n
Antes que o tweet seja processado para mostrar o cart\u00e3o com o autor, avatar do Twitter, bot\u00e3o seguir e outros metadados, ele \u00e9 exibido como um elemento HTML simples de cita\u00e7\u00e3o em bloco com o atributo de largura fixa definido, que por padr\u00e3o \u00e9 500px. Claro, essa largura fixa quebrar\u00e1 nosso layout responsivo, ent\u00e3o basicamente precisamos remover esse atributo para que o cart\u00e3o de tweet processado apare\u00e7a sem largura fixa.<\/p>\n
Ap\u00f3s remov\u00ea-lo, aplicaremos um estilo CSS simples para que funcione de forma responsiva com o restante das dimens\u00f5es do site.<\/p>\n
Nosso tweet \u00e9 colocado usando oEmbed, uma tecnologia usada pelo WordPress que nos permite inserir conte\u00fado de outros sites apenas colocando o link em nosso editor de posts. O WordPress ir\u00e1 consultar automaticamente o site do provedor (que pode n\u00e3o ser apenas Twitter, mas YouTube, Vimeo e outros) e obter\u00e1 o HTML para inserir em nosso site.<\/p>\n
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\u00e7\u00e3o. Vamos usar o filtro oembed_result<\/strong>, que \u00e9 executado ap\u00f3s obter o HTML do provedor oEmbed e antes de ser salvo no cache. A vantagem disso \u00e9 que o filtro n\u00e3o precisar\u00e1 ser executado toda vez que o site for visitado, resultando em uma resposta mais r\u00e1pida e, claro, tempos de carregamento mais r\u00e1pidos.<\/p>\n Este c\u00f3digo deve ser colocado no arquivo functions.php do seu tema<\/p>\n O Ainda precisamos adicionar algum CSS para torn\u00e1-lo responsivo, ent\u00e3o insira o seguinte na folha de estilo do seu tema (ou plugin)<\/p>\n e apenas com isso seus tweets incorporados ser\u00e3o responsivos.<\/p>\nFiltrando o tweet<\/h2>\n
<?php\n\/** Remove fixed width from embedded tweets. First step to make them responsive. \n * @param string $html HTML that should be used to embed \n * @param string $url The URL to the content that should be attempted to be embedded. \n * @param array $args Optional arguments. \n * @author Elio Rivero \n * @link https:\/\/startfunction.com \n *\/ \nfunction startfunction_oembed_result($html, $url, $args)\n{\n \/\/ Check if it's a tweet looking for 'twitter' in the url pasted in the post\n if (stripos($url, 'twitter')) {\n \/\/ Before the tweet is processed, it's displayed as a blockquote \/\/ with its width attribute set, so let's remove it. \n return preg_replace('#width=\"(.*)\"#', '', $html);\n }\n \/\/ Otherwise return the HTML as is. \n return $html;\n} \n\/\/ Filter the result of the oEmbed extraction. \nadd_filter('oembed_result', 'startfunction_oembed_result', 10, 3);\n<\/code><\/pre>\n$url<\/code>par\u00e2metro \u00e9 o link para o tweet que estamos incorporando. Estamos verificando se \u00e9 do Twitter, caso contr\u00e1rio n\u00e3o queremos executar isso. Estamos usando str_replace para procurar a string width=\"500\"<\/code><\/strong>substituindo-a por uma string vazia.<\/p>\nTornando o cart\u00e3o de tweet responsivo<\/h2>\n
#main .twitter-tweet-rendered, #main .twt-border {\n max-width: 100% !important; \n}<\/code><\/pre>\n