WordPress l\u00e5ter dig b\u00e4dda in tweets genom att klistra in tweets URL i dina inl\u00e4gg. Du f\u00e5r ett fint kort med tweeten och alla relevanta detaljer. Tyv\u00e4rr kommer det h\u00e4r kortet inte att fungera p\u00e5 responsiva webbplatser p\u00e5 grund av en fixbredd som till\u00e4mpas av Twitter. I det h\u00e4r inl\u00e4gget kommer vi att se hur man tar bort det och \u00e4ven g\u00f6r v\u00e5r inb\u00e4ddade tweet korrekt responsiv.<\/p>\n
Innan tweeten bearbetas f\u00f6r att visa kortet med f\u00f6rfattaren, Twitter-avatar, f\u00f6ljknapp och annan metadata, visas den som ett vanligt HTML-element med blockcitat med attributet fast width, som som standard \u00e4r 500px. Naturligtvis kommer denna fasta bredd att bryta v\u00e5r responsiva layout, s\u00e5 i grund och botten m\u00e5ste vi ta bort det h\u00e4r attributet s\u00e5 att det behandlade tweetkortet visas utan fast bredd.<\/p>\n
Efter att ha tagit bort det kommer vi att till\u00e4mpa en enkel CSS-stil s\u00e5 att den fungerar responsivt med resten av webbplatsens dimensioner.<\/p>\n
V\u00e5r tweet placeras med hj\u00e4lp av oEmbed, en teknik som anv\u00e4nds av WordPress som g\u00f6r att vi kan infoga inneh\u00e5ll fr\u00e5n andra webbplatser bara genom att placera l\u00e4nken i v\u00e5r inl\u00e4ggsredigerare. WordPress kommer automatiskt att fr\u00e5ga efter leverant\u00f6rens webbplats (som inte bara kan vara Twitter, utan YouTube, Vimeo och andra) och f\u00e5 HTML-koden att infoga p\u00e5 v\u00e5r webbplats.<\/p>\n
HTML-koden som returneras av leverant\u00f6rens webbplats kan bearbetas med ett av filtren WordPress tillhandah\u00e5ller f\u00f6r att g\u00f6ra det och \u00e4ndra uppm\u00e4rkningen. Vi kommer att anv\u00e4nda filtret oembed_result<\/strong>, som k\u00f6rs efter att ha h\u00e4mtat HTML fr\u00e5n oEmbed-leverant\u00f6ren och innan det sparas i cachen. F\u00f6rdelen med detta \u00e4r att filtret inte beh\u00f6ver k\u00f6ras varje g\u00e5ng webbplatsen bes\u00f6ks, vilket resulterar i snabbare svar och naturligtvis snabbare laddningstider.<\/p>\n Denna kod b\u00f6r placeras i functions.php-filen f\u00f6r ditt tema<\/p>\n Parametern Vi beh\u00f6ver fortfarande l\u00e4gga till lite CSS f\u00f6r att g\u00f6ra den responsiv, s\u00e5 infoga f\u00f6ljande i din stilmall f\u00f6r tema (eller plugin)<\/p>\n och bara med detta kommer dina inb\u00e4ddade tweets att vara lyh\u00f6rda.<\/p>\nFiltrerar tweeten<\/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>\u00e4r l\u00e4nken till tweeten vi b\u00e4ddar in. Vi kollar om det \u00e4r fr\u00e5n Twitter, eftersom vi annars inte vill k\u00f6ra det h\u00e4r. Vi anv\u00e4nder str_replace f\u00f6r att leta efter str\u00e4ngen width=\"500\"<\/code><\/strong>som ers\u00e4tter den med en tom str\u00e4ng.<\/p>\nG\u00f6ra tweetkortet responsivt<\/h2>\n
#main .twitter-tweet-rendered, #main .twt-border {\n max-width: 100% !important; \n}<\/code><\/pre>\n