Thumbnail

Kommen wir heute zu einem sehr einfachen aber auch sehr nützlichem kleinen Tipp für eure WordPress Website. Gibt es einen Tipp wie man eingebettete Tweets von Twitter über WordPress zentrieren kann? Diese Frage beantworte ich jetzt!

Vorwort

Twitter bietet uns die praktische Funktion, dass man Tweets auf seine Website per HTML-Code einbauen kann. Ich nutze diese Funktion öfters in meinen Beiträgen und ich bin mir sicher, dass ihr das genauso macht.

Leider ist es über WordPress nicht ganz so einfach diese Tweets dann auch zu zentrieren. Ich binde als Beispiel den letzten Tweet meines Twitter Accounts in diesen Beitrag ein.

Twitter

Mit dem Laden des Tweets akzeptieren Sie die Datenschutzerklärung von Twitter.
Mehr erfahren

Inhalt laden

Jetzt haben wir allerdings das Problem, dass das Design meines Blogs mittig zu breit ist, als das der Tweet automatisch in der Mitte angezeigt wird.

Normales zentrieren über Shift+Alt+C funktioniert genauso wenig wie einen extra Div Container anlegen und diesen versuchen über den Command zu zentrieren.

Jetzt könnte man zwar mit eigenem CSS Code arbeiten, sodass man den Tweet in einem Div Container einbetten könnte und diesem den CSS Code margin: auto; anhängen könnte, allerdings geht es auch wesentlich einfacher!

Die Klasse machts!

Was hältst du von einer Klasse? Twitter bietet uns nämlich die Möglichkeit die relativ unbekannte Klasse tw-align-center anzuhängen, sodass der Tweet sich automatisch zentriert.

Die Klasse fügt ihr im Code im <blockquote> Element einfach nach twitter-tweet mit einem Leerzeichen ein und baut ansonsten ganz normal den Code ein. Der Code sieht dann folgendermaßen aus.

<blockquote class="twitter-tweet tw-align-center" data-theme="light">
   <p lang="de" dir="ltr">Bin übrigens der Vollidiot der Woche! Habe wohl seit 3 Tagen (letztes Update der AMD Graka Treiber + Software) auf einer komplett anderen Res gezockt und es nicht mitbekommen, weil das Update wohl meine Custom-Res rausgeschmissen hat. ????</p>— Maurice Woitzyk (@Maurice_Woitzyk) <a href="https://twitter.com/Maurice_Woitzyk/status/1412714679722459137?ref_src=twsrc%5Etfw">July 7, 2021</a>
</blockquote> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Wenn ich den Tweet mit dieser extra Klasse nun im Quellcode meiner WordPress Website einbaue, ist der Tweet wie von Zauberhand ohne extra Code und ohne große Mühen zentriert.

Twitter

Mit dem Laden des Tweets akzeptieren Sie die Datenschutzerklärung von Twitter.
Mehr erfahren

Inhalt laden

Fazit

Wie wir festgestellt haben, hat das Zentrieren von eingebetteten Tweets über WordPress weder etwas mit Magie, noch mit wirklich viel Arbeit zu tun.

Eine einfach CSS Klasse die in das <blockquote> Element eingefügt wird genügt, damit der Tweet zentriert in deinem Blogpost angezeigt wird.

Ich hoffe, euch hat dieser kurze Beitrag gefallen und ihr fandet ihn hilfreich. Bis zum nächsten Mal!

Wie ist deine Meinung zu dem Artikel?

Aufgeregt
0
Glücklich
0
Verliebt
0
Geht so
0
Sehr gut
0
Maurice Woitzyk
Hallo! Ich bin Maurice. Ich komme aus dem wunderschönen Magdeburg und wenn ich nicht gerade in CS:GO verzweifle, vertreibe ich mir meine Zeit mit meinem Blog und Web Design/Web Development.

Leave a reply

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

You may also like