WordPress le permite incrustar tweets pegando la URL del tweet en sus publicaciones. Obtienes una bonita tarjeta con el tweet y todos los detalles relevantes. Lamentablemente, esta tarjeta no funcionar\u00e1 en sitios receptivos debido a un ancho de correcci\u00f3n aplicado por Twitter. En esta publicaci\u00f3n, veremos c\u00f3mo eliminarlo y tambi\u00e9n c\u00f3mo hacer que nuestro tweet incrustado responda correctamente.<\/p>\n
Antes de que el tweet se procese para mostrar la tarjeta con el autor, el avatar de Twitter, el bot\u00f3n de seguimiento y otros metadatos, se muestra como un elemento HTML de comillas en bloque simple con el conjunto de atributos de ancho fijo, que de forma predeterminada es 500 px. Por supuesto, este ancho fijo romper\u00e1 nuestro dise\u00f1o receptivo, por lo que b\u00e1sicamente debemos eliminar este atributo para que la tarjeta de tweet procesada aparezca sin ancho fijo.<\/p>\n
Despu\u00e9s de eliminarlo, aplicaremos un estilo CSS simple para que funcione de manera receptiva con el resto de las dimensiones del sitio.<\/p>\n
Nuestro tweet se coloca usando oEmbed, una tecnolog\u00eda utilizada por WordPress que nos permite insertar contenido de otros sitios con solo colocar el enlace en nuestro editor de publicaciones. WordPress consultar\u00e1 autom\u00e1ticamente el sitio del proveedor (que no solo puede ser Twitter, sino tambi\u00e9n YouTube, Vimeo y otros) y obtendr\u00e1 el HTML para insertarlo en nuestro sitio.<\/p>\n
El HTML devuelto por el sitio del proveedor se puede procesar utilizando uno de los filtros que proporciona WordPress para hacerlo y cambiar el marcado. Vamos a usar el filtro oembed_result<\/strong>, que se ejecuta despu\u00e9s de obtener el c\u00f3digo HTML del proveedor de oEmbed y antes de guardarlo en la memoria cach\u00e9. La ventaja de esto es que el filtro no tendr\u00e1 que ejecutarse cada vez que se visita el sitio, lo que resulta en una respuesta m\u00e1s r\u00e1pida y, por supuesto, tiempos de carga m\u00e1s r\u00e1pidos.<\/p>\n Este c\u00f3digo debe colocarse en el archivo functions.php de su tema<\/p>\n El Todav\u00eda necesitamos agregar algo de CSS para que responda, as\u00ed que inserte lo siguiente en la hoja de estilo de su tema (o complemento)<\/p>\n y solo con esto tus tweets incrustados ser\u00e1n responsivos.<\/p>\nFiltrando el tuit<\/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\u00e1metro es el enlace al tweet que estamos incrustando. Estamos comprobando si es de Twitter, ya que de lo contrario no queremos ejecutar esto. Estamos usando str_replace para buscar la cadena width=\"500\"<\/code><\/strong>reemplaz\u00e1ndola con una cadena vac\u00eda.<\/p>\nHacer que la tarjeta de tweet responda<\/h2>\n
#main .twitter-tweet-rendered, #main .twt-border {\n max-width: 100% !important; \n}<\/code><\/pre>\n