Gör inbäddade tweets i WordPress responsiva

WordPress låter dig bädda in tweets genom att klistra in tweets URL i dina inlägg. Du får ett fint kort med tweeten och alla relevanta detaljer. Tyvärr kommer det här kortet inte att fungera på responsiva webbplatser på grund av en fixbredd som tillämpas av Twitter. I det här inlägget kommer vi att se hur man tar bort det och även gör vår inbäddade tweet korrekt responsiv.

Översikt

Innan tweeten bearbetas för att visa kortet med författaren, Twitter-avatar, följknapp och annan metadata, visas den som ett vanligt HTML-element med blockcitat med attributet fast width, som som standard är 500px. Naturligtvis kommer denna fasta bredd att bryta vår responsiva layout, så i grund och botten måste vi ta bort det här attributet så att det behandlade tweetkortet visas utan fast bredd.

Efter att ha tagit bort det kommer vi att tillämpa en enkel CSS-stil så att den fungerar responsivt med resten av webbplatsens dimensioner.

WordPress oBädda in och filter

Vår tweet placeras med hjälp av oEmbed, en teknik som används av WordPress som gör att vi kan infoga innehåll från andra webbplatser bara genom att placera länken i vår inläggsredigerare. WordPress kommer automatiskt att fråga efter leverantörens webbplats (som inte bara kan vara Twitter, utan YouTube, Vimeo och andra) och få HTML-koden att infoga på vår webbplats.

HTML-koden som returneras av leverantörens webbplats kan bearbetas med ett av filtren WordPress tillhandahåller för att göra det och ändra uppmärkningen. Vi kommer att använda filtret oembed_result, som körs efter att ha hämtat HTML från oEmbed-leverantören och innan det sparas i cachen. Fördelen med detta är att filtret inte behöver köras varje gång webbplatsen besöks, vilket resulterar i snabbare svar och naturligtvis snabbare laddningstider.

Filtrerar tweeten

Denna kod bör placeras i functions.php-filen för ditt tema

Parametern $urlär länken till tweeten vi bäddar in. Vi kollar om det är från Twitter, eftersom vi annars inte vill köra det här. Vi använder str_replace för att leta efter strängen width="500"som ersätter den med en tom sträng.

Göra tweetkortet responsivt

Vi behöver fortfarande lägga till lite CSS för att göra den responsiv, så infoga följande i din stilmall för tema (eller plugin)

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

och bara med detta kommer dina inbäddade tweets att vara lyhörda.