Hacer tweets incrustados en WordPress responsivo

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á en sitios receptivos debido a un ancho de corrección aplicado por Twitter. En esta publicación, veremos cómo eliminarlo y también cómo hacer que nuestro tweet incrustado responda correctamente.

Visión general

Antes de que el tweet se procese para mostrar la tarjeta con el autor, el avatar de Twitter, el botón 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á nuestro diseño receptivo, por lo que básicamente debemos eliminar este atributo para que la tarjeta de tweet procesada aparezca sin ancho fijo.

Después de eliminarlo, aplicaremos un estilo CSS simple para que funcione de manera receptiva con el resto de las dimensiones del sitio.

WordPress oEmbed y filtros

Nuestro tweet se coloca usando oEmbed, una tecnología utilizada por WordPress que nos permite insertar contenido de otros sitios con solo colocar el enlace en nuestro editor de publicaciones. WordPress consultará automáticamente el sitio del proveedor (que no solo puede ser Twitter, sino también YouTube, Vimeo y otros) y obtendrá el HTML para insertarlo en nuestro sitio.

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, que se ejecuta después de obtener el código HTML del proveedor de oEmbed y antes de guardarlo en la memoria caché. La ventaja de esto es que el filtro no tendrá que ejecutarse cada vez que se visita el sitio, lo que resulta en una respuesta más rápida y, por supuesto, tiempos de carga más rápidos.

Filtrando el tuit

Este código debe colocarse en el archivo functions.php de su tema

El $urlparámetro 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"reemplazándola con una cadena vacía.

Hacer que la tarjeta de tweet responda

Todavía necesitamos agregar algo de CSS para que responda, así que inserte lo siguiente en la hoja de estilo de su tema (o complemento)

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

y solo con esto tus tweets incrustados serán responsivos.