Machen Sie eingebettete Tweets in WordPress responsiv

Mit WordPress können Sie Tweets einbetten, indem Sie die Tweet-URL in Ihre Posts einfügen. Sie erhalten eine schöne Karte mit dem Tweet und allen relevanten Details. Leider funktioniert diese Karte aufgrund einer von Twitter angewendeten festen Breite nicht auf responsiven Websites. In diesem Beitrag werden wir sehen, wie man es entfernt und auch unseren eingebetteten Tweet richtig responsiv macht.

Überblick

Bevor der Tweet verarbeitet wird, um die Karte mit dem Autor, dem Twitter-Avatar, der Schaltfläche „Folgen” und anderen Metadaten anzuzeigen, wird er als einfaches Blockquote-HTML-Element mit dem festgelegten Attribut „Feste Breite” angezeigt, das standardmäßig 500 Pixel beträgt. Natürlich wird diese feste Breite unser responsives Layout stören, also müssen wir dieses Attribut im Grunde entfernen, damit die verarbeitete Tweet-Karte ohne feste Breite erscheint.

Nach dem Entfernen wenden wir einen einfachen CSS-Stil an, damit er reaktionsschnell mit den restlichen Website-Dimensionen funktioniert.

WordPress oEmbed und Filter

Unser Tweet wird mit oEmbed platziert, einer von WordPress verwendeten Technologie, mit der wir Inhalte von anderen Websites einfügen können, indem wir einfach den Link in unserem Post-Editor platzieren. WordPress fragt automatisch die Website des Anbieters ab (was nicht nur Twitter, sondern auch YouTube, Vimeo und andere sein können) und ruft den HTML-Code ab, der in unsere Website eingefügt werden soll.

Das von der Anbieterseite zurückgegebene HTML kann mit einem der von WordPress bereitgestellten Filter verarbeitet und das Markup geändert werden. Wir verwenden den Filter oembed_result, der ausgeführt wird, nachdem der HTML-Code vom oEmbed-Anbieter abgerufen wurde und bevor er im Cache gespeichert wird. Dies hat den Vorteil, dass der Filter nicht bei jedem Besuch der Seite ausgeführt werden muss, was zu einer schnelleren Reaktion und natürlich zu schnelleren Ladezeiten führt.

Filtern des Tweets

Dieser Code sollte in die Datei functions.php Ihres Designs eingefügt werden

Der $urlParameter ist der Link zu dem Tweet, den wir einbetten. Wir prüfen, ob es von Twitter stammt, da wir dies sonst nicht ausführen möchten. Wir verwenden str_replace, um nach der Zeichenfolge zu suchen, die width="500"sie durch eine leere Zeichenfolge ersetzt.

Die Tweet-Karte responsiv machen

Wir müssen noch etwas CSS hinzufügen, um es reaktionsfähig zu machen, also fügen Sie Folgendes in Ihr Design- (oder Plugin-) Stylesheet ein

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

und nur damit reagieren Ihre eingebetteten Tweets.