Spraw, aby osadzone tweety w WordPressie były responsywne

WordPress umożliwia osadzanie tweetów, wklejając adres URL tweeta do swoich postów. Otrzymasz ładną kartkę z tweetem i wszystkimi istotnymi szczegółami. Niestety ta karta nie będzie działać w responsywnych witrynach ze względu na poprawną szerokość zastosowaną przez Twitter. W tym poście zobaczymy, jak go usunąć, a także sprawić, by nasz osadzony tweet był odpowiednio responsywny.

Przegląd

Zanim tweet zostanie przetworzony w celu pokazania karty z autorem, awatarem Twittera, przyciskiem śledzenia i innymi metadanymi, jest wyświetlany jako zwykły element HTML z cytatem blokowym z ustawionym atrybutem stałej szerokości, który domyślnie wynosi 500 pikseli. Oczywiście ta stała szerokość zepsuje nasz responsywny układ, więc zasadniczo musimy usunąć ten atrybut, aby przetworzona karta tweetowa pojawiła się bez ustalonej szerokości.

Po jego usunięciu zastosujemy prosty styl CSS, aby działał responsywnie z pozostałymi wymiarami witryny.

WordPress oEmbed i filtry

Nasz tweet jest umieszczany za pomocą oEmbed, technologii używanej przez WordPress, która pozwala nam wstawiać treści z innych witryn, po prostu umieszczając link w naszym edytorze postów. WordPress automatycznie prześle zapytanie do witryny dostawcy (którą może być nie tylko Twitter, ale także YouTube, Vimeo i inne) i pobierze kod HTML do wstawienia na naszej stronie.

Kod HTML zwrócony przez witrynę dostawcy można przetworzyć za pomocą jednego z filtrów zapewnianych przez WordPress, aby to zrobić i zmienić znaczniki. Użyjemy filtru oembed_result, który jest uruchamiany po uzyskaniu kodu HTML od dostawcy oEmbed i przed zapisaniem go w pamięci podręcznej. Zaletą tego jest to, że filtr nie będzie musiał być wykonywany za każdym razem, gdy odwiedzana jest strona, co skutkuje szybszą odpowiedzią i oczywiście krótszym czasem ładowania.

Filtrowanie tweeta

Ten kod należy umieścić w pliku functions.php Twojego motywu

Parametr $urlto link do tweeta, który osadzamy. Sprawdzamy, czy jest z Twittera, bo inaczej nie chcemy tego uruchamiać. Używamy str_replace do szukania ciągu width="500", który zastępuje go pustym ciągiem.

Sprawianie, że karta tweet jest responsywna

Nadal musimy dodać trochę kodu CSS, aby był responsywny, więc wstaw następujące elementy w arkuszu stylów motywu (lub wtyczki)

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

i właśnie dzięki temu Twoje wbudowane tweety będą responsywne.