WordPress vous permet d’int\u00e9grer des tweets en collant l’URL du tweet dans vos publications. Vous obtenez une belle carte avec le tweet et tous les d\u00e9tails pertinents. Malheureusement, cette carte ne fonctionnera pas sur les sites r\u00e9actifs en raison d’une largeur fixe appliqu\u00e9e par Twitter. Dans cet article, nous verrons comment le supprimer et \u00e9galement rendre notre tweet int\u00e9gr\u00e9 correctement r\u00e9actif.<\/p>\n
Avant que le tweet ne soit trait\u00e9 pour afficher la carte avec l’auteur, l’avatar Twitter, le bouton de suivi et d’autres m\u00e9tadonn\u00e9es, il est affich\u00e9 sous la forme d’un \u00e9l\u00e9ment HTML de citation simple avec l’attribut de largeur fixe d\u00e9fini, qui par d\u00e9faut est de 500px. Bien s\u00fbr, cette largeur fixe cassera notre mise en page r\u00e9active, nous devons donc supprimer cet attribut pour que la carte de tweet trait\u00e9e apparaisse sans largeur fixe.<\/p>\n
Apr\u00e8s l’avoir supprim\u00e9, nous appliquerons un style CSS simple afin qu’il fonctionne de mani\u00e8re r\u00e9active avec le reste des dimensions du site.<\/p>\n
Notre tweet est plac\u00e9 \u00e0 l’aide d’oEmbed, une technologie utilis\u00e9e par WordPress qui nous permet d’ins\u00e9rer du contenu d’autres sites simplement en pla\u00e7ant le lien dans notre \u00e9diteur de publication. WordPress interrogera automatiquement le site du fournisseur (qui peut non seulement \u00eatre Twitter, mais YouTube, Vimeo et autres) et obtiendra le code HTML \u00e0 ins\u00e9rer dans notre site.<\/p>\n
Le code HTML renvoy\u00e9 par le site du fournisseur peut \u00eatre trait\u00e9 \u00e0 l’aide de l’un des filtres fournis par WordPress pour le faire et modifier le balisage. Nous allons utiliser le filtre oembed_result<\/strong>, qui est ex\u00e9cut\u00e9 apr\u00e8s avoir obtenu le code HTML du fournisseur oEmbed et avant qu’il ne soit enregistr\u00e9 dans le cache. L’avantage est que le filtre n’aura pas \u00e0 \u00eatre ex\u00e9cut\u00e9 \u00e0 chaque fois que le site est visit\u00e9, ce qui se traduit par une r\u00e9ponse plus rapide et, bien s\u00fbr, des temps de chargement plus rapides.<\/p>\n Ce code doit \u00eatre plac\u00e9 dans le fichier functions.php de votre th\u00e8me<\/p>\n Le Nous devons encore ajouter du CSS pour le rendre r\u00e9actif, alors ins\u00e9rez ce qui suit dans la feuille de style de votre th\u00e8me (ou plugin)<\/p>\n et juste avec cela, vos tweets int\u00e9gr\u00e9s seront r\u00e9actifs.<\/p>\nFiltrer le 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>param\u00e8tre est le lien vers le tweet que nous int\u00e9grons. Nous v\u00e9rifions si cela vient de Twitter, sinon nous ne voulons pas l’ex\u00e9cuter. Nous utilisons str_replace pour rechercher la cha\u00eene en la width=\"500\"<\/code><\/strong>rempla\u00e7ant par une cha\u00eene vide.<\/p>\nRendre la carte tweet responsive<\/h2>\n
#main .twitter-tweet-rendered, #main .twt-border {\n max-width: 100% !important; \n}<\/code><\/pre>\n