WordPressin avulla voit upottaa twiittej\u00e4 liitt\u00e4m\u00e4ll\u00e4 twiitin URL-osoitteen viesteihisi. Saat mukavan kortin, jossa on twiitti ja kaikki asiaankuuluvat tiedot. Valitettavasti t\u00e4m\u00e4 kortti ei toimi responsiivisilla sivustoilla Twitterin k\u00e4ytt\u00e4m\u00e4n korjausleveyden vuoksi. T\u00e4ss\u00e4 viestiss\u00e4 n\u00e4emme, kuinka se poistetaan ja kuinka upotettu twiittimme saadaan reagoimaan kunnolla.<\/p>\n
Ennen kuin twiitti k\u00e4sitell\u00e4\u00e4n niin, ett\u00e4 se n\u00e4ytt\u00e4\u00e4 kortin, jossa on kirjoittaja, Twitter-avatar, seurantapainike ja muut metatiedot, se n\u00e4ytet\u00e4\u00e4n pelkk\u00e4n\u00e4 blockquote-HTML-elementtin\u00e4 kiinte\u00e4n leveyden attribuutilla, joka on oletuksena 500 pikseli\u00e4. Tietenkin t\u00e4m\u00e4 kiinte\u00e4 leveys rikkoo reagoivan asettelumme, joten periaatteessa meid\u00e4n on poistettava t\u00e4m\u00e4 attribuutti, jotta k\u00e4sitelty twiittikortti n\u00e4kyy ilman kiinte\u00e4\u00e4 leveytt\u00e4.<\/p>\n
Sen poistamisen j\u00e4lkeen k\u00e4yt\u00e4mme yksinkertaista CSS-tyyli\u00e4, jotta se toimii responsiivisesti muiden sivuston mittojen kanssa.<\/p>\n
Tweetimme on sijoitettu k\u00e4ytt\u00e4m\u00e4ll\u00e4 oEmbedi\u00e4, WordPressin k\u00e4ytt\u00e4m\u00e4\u00e4 tekniikkaa, jonka avulla voimme lis\u00e4t\u00e4 sis\u00e4lt\u00f6\u00e4 muilta sivustoilta vain asettamalla linkin tekstieditoriin. WordPress tekee automaattisesti kyselyn palveluntarjoajan sivustolta (joka ei voi olla vain Twitter, vaan YouTube, Vimeo ja muut) ja saa HTML-koodin lis\u00e4tt\u00e4v\u00e4ksi sivustoomme.<\/p>\n
Palveluntarjoajan sivuston palauttama HTML voidaan k\u00e4sitell\u00e4 jollakin WordPressin tarjoamista suodattimista ja muuttaa merkint\u00f6j\u00e4. K\u00e4yt\u00e4mme suodatinta oembed_result<\/strong>, joka suoritetaan sen j\u00e4lkeen, kun HTML-koodi on hankittu oEmbed-palveluntarjoajalta ja ennen kuin se on tallennettu v\u00e4limuistiin. T\u00e4m\u00e4n etuna on, ett\u00e4 suodatinta ei tarvitse suorittaa joka kerta, kun sivustolla vieraillaan, mik\u00e4 johtaa nopeampaan reagointiin ja tietysti nopeampiin latausaikaan.<\/p>\n T\u00e4m\u00e4 koodi tulee sijoittaa teemasi functions.php-tiedostoon<\/p>\n Parametri Meid\u00e4n on viel\u00e4 lis\u00e4tt\u00e4v\u00e4 hieman CSS:\u00e4\u00e4, jotta se reagoisi, joten lis\u00e4\u00e4 seuraava teemasi (tai laajennuksen) tyylitaulukkoon<\/p>\n ja juuri t\u00e4m\u00e4n avulla upotetut twiittisi reagoivat.<\/p>\nTweetin suodatus<\/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>on linkki upotettavaan twiittiin. Tarkistamme, onko se Twitterist\u00e4, koska muuten emme halua suorittaa t\u00e4t\u00e4. K\u00e4yt\u00e4mme str_replacea etsim\u00e4\u00e4n merkkijonoa, width=\"500\"<\/code><\/strong>joka korvaa sen tyhj\u00e4ll\u00e4 merkkijonolla.<\/p>\nTweettikortin tekeminen reagoivaksi<\/h2>\n
#main .twitter-tweet-rendered, #main .twt-border {\n max-width: 100% !important; \n}<\/code><\/pre>\n