WordPress umo\u017cliwia osadzanie tweet\u00f3w, wklejaj\u0105c adres URL tweeta do swoich post\u00f3w. Otrzymasz \u0142adn\u0105 kartk\u0119 z tweetem i wszystkimi istotnymi szczeg\u00f3\u0142ami. Niestety ta karta nie b\u0119dzie dzia\u0142a\u0107 w responsywnych witrynach ze wzgl\u0119du na poprawn\u0105 szeroko\u015b\u0107 zastosowan\u0105 przez Twitter. W tym po\u015bcie zobaczymy, jak go usun\u0105\u0107, a tak\u017ce sprawi\u0107, by nasz osadzony tweet by\u0142 odpowiednio responsywny.<\/p>\n
Zanim tweet zostanie przetworzony w celu pokazania karty z autorem, awatarem Twittera, przyciskiem \u015bledzenia i innymi metadanymi, jest wy\u015bwietlany jako zwyk\u0142y element HTML z cytatem blokowym z ustawionym atrybutem sta\u0142ej szeroko\u015bci, kt\u00f3ry domy\u015blnie wynosi 500 pikseli. Oczywi\u015bcie ta sta\u0142a szeroko\u015b\u0107 zepsuje nasz responsywny uk\u0142ad, wi\u0119c zasadniczo musimy usun\u0105\u0107 ten atrybut, aby przetworzona karta tweetowa pojawi\u0142a si\u0119 bez ustalonej szeroko\u015bci.<\/p>\n
Po jego usuni\u0119ciu zastosujemy prosty styl CSS, aby dzia\u0142a\u0142 responsywnie z pozosta\u0142ymi wymiarami witryny.<\/p>\n
Nasz tweet jest umieszczany za pomoc\u0105 oEmbed, technologii u\u017cywanej przez WordPress, kt\u00f3ra pozwala nam wstawia\u0107 tre\u015bci z innych witryn, po prostu umieszczaj\u0105c link w naszym edytorze post\u00f3w. WordPress automatycznie prze\u015ble zapytanie do witryny dostawcy (kt\u00f3r\u0105 mo\u017ce by\u0107 nie tylko Twitter, ale tak\u017ce YouTube, Vimeo i inne) i pobierze kod HTML do wstawienia na naszej stronie.<\/p>\n
Kod HTML zwr\u00f3cony przez witryn\u0119 dostawcy mo\u017cna przetworzy\u0107 za pomoc\u0105 jednego z filtr\u00f3w zapewnianych przez WordPress, aby to zrobi\u0107 i zmieni\u0107 znaczniki. U\u017cyjemy filtru oembed_result<\/strong>, kt\u00f3ry jest uruchamiany po uzyskaniu kodu HTML od dostawcy oEmbed i przed zapisaniem go w pami\u0119ci podr\u0119cznej. Zalet\u0105 tego jest to, \u017ce filtr nie b\u0119dzie musia\u0142 by\u0107 wykonywany za ka\u017cdym razem, gdy odwiedzana jest strona, co skutkuje szybsz\u0105 odpowiedzi\u0105 i oczywi\u015bcie kr\u00f3tszym czasem \u0142adowania.<\/p>\n Ten kod nale\u017cy umie\u015bci\u0107 w pliku functions.php Twojego motywu<\/p>\n Parametr Nadal musimy doda\u0107 troch\u0119 kodu CSS, aby by\u0142 responsywny, wi\u0119c wstaw nast\u0119puj\u0105ce elementy w arkuszu styl\u00f3w motywu (lub wtyczki)<\/p>\n i w\u0142a\u015bnie dzi\u0119ki temu Twoje wbudowane tweety b\u0119d\u0105 responsywne.<\/p>\nFiltrowanie tweeta<\/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>to link do tweeta, kt\u00f3ry osadzamy. Sprawdzamy, czy jest z Twittera, bo inaczej nie chcemy tego uruchamia\u0107. U\u017cywamy str_replace do szukania ci\u0105gu width=\"500\"<\/code><\/strong>, kt\u00f3ry zast\u0119puje go pustym ci\u0105giem.<\/p>\nSprawianie, \u017ce karta tweet jest responsywna<\/h2>\n
#main .twitter-tweet-rendered, #main .twt-border {\n max-width: 100% !important; \n}<\/code><\/pre>\n