Rendre les tweets intégrés dans WordPress réactifs

WordPress vous permet d’intégrer des tweets en collant l’URL du tweet dans vos publications. Vous obtenez une belle carte avec le tweet et tous les détails pertinents. Malheureusement, cette carte ne fonctionnera pas sur les sites réactifs en raison d’une largeur fixe appliquée par Twitter. Dans cet article, nous verrons comment le supprimer et également rendre notre tweet intégré correctement réactif.

Aperçu

Avant que le tweet ne soit traité pour afficher la carte avec l’auteur, l’avatar Twitter, le bouton de suivi et d’autres métadonnées, il est affiché sous la forme d’un élément HTML de citation simple avec l’attribut de largeur fixe défini, qui par défaut est de 500px. Bien sûr, cette largeur fixe cassera notre mise en page réactive, nous devons donc supprimer cet attribut pour que la carte de tweet traitée apparaisse sans largeur fixe.

Après l’avoir supprimé, nous appliquerons un style CSS simple afin qu’il fonctionne de manière réactive avec le reste des dimensions du site.

WordPress oEmbed et filtres

Notre tweet est placé à l’aide d’oEmbed, une technologie utilisée par WordPress qui nous permet d’insérer du contenu d’autres sites simplement en plaçant le lien dans notre éditeur de publication. WordPress interrogera automatiquement le site du fournisseur (qui peut non seulement être Twitter, mais YouTube, Vimeo et autres) et obtiendra le code HTML à insérer dans notre site.

Le code HTML renvoyé par le site du fournisseur peut être traité à l’aide de l’un des filtres fournis par WordPress pour le faire et modifier le balisage. Nous allons utiliser le filtre oembed_result, qui est exécuté après avoir obtenu le code HTML du fournisseur oEmbed et avant qu’il ne soit enregistré dans le cache. L’avantage est que le filtre n’aura pas à être exécuté à chaque fois que le site est visité, ce qui se traduit par une réponse plus rapide et, bien sûr, des temps de chargement plus rapides.

Filtrer le tweet

Ce code doit être placé dans le fichier functions.php de votre thème

Le $urlparamètre est le lien vers le tweet que nous intégrons. Nous vérifions si cela vient de Twitter, sinon nous ne voulons pas l’exécuter. Nous utilisons str_replace pour rechercher la chaîne en la width="500"remplaçant par une chaîne vide.

Rendre la carte tweet responsive

Nous devons encore ajouter du CSS pour le rendre réactif, alors insérez ce qui suit dans la feuille de style de votre thème (ou plugin)

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

et juste avec cela, vos tweets intégrés seront réactifs.