Inhaltsverzeichnis
Kommen wir heute zu einem sehr einfachen, aber auch sehr nützlichem kleinen Tipp für deine WordPress-Website. Oft arbeitet man Tweets in seine Blogposts mit ein. Dies hat zum einen inhaltliche Gründe und zum anderen sieht es auch gut aus und bringt Abwechslung mit rein!
Zwar blicken wir mit der drohenden Übernahme von Twitter durch Elon Musk und den damit eventuell verbundenen Gebühren für eingebettete Tweets einer unsicheren Zukunft entgegen, aber dennoch sollte dir dieser Beitrag bei deinem Problem helfen.
Gibt es einen Tipp, wie man eingebettete Tweets über WordPress bequem und ohne große Probleme zentrieren kann? Diese Frage beantworte ich dir 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 du das genauso machst. Der dafür verwendete Code sieht in etwa so aus.
<blockquote class="twitter-tweet" data-dnt="true" data-theme="dark">
<p lang="en" dir="ltr">Thank you for everything. My last ask is the same as my first. I'm asking you to believe—not in my ability to create change, but in yours.</p>— President Obama (@POTUS44) <a href="https://twitter.com/POTUS44/status/819044196371800065?ref_src=twsrc%5Etfw">January 11, 2017</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>Selbstverständlich gibt es auch die oEmbeds, allerdings verwenden viele Blogger lieber den HTML-Code, da man diesen auch optisch anpassen kann. Leider ist es über WordPress nicht ganz so einfach, diese Tweets dann auch zu zentrieren. Dies wiederum ist über die oEmbeds ganz einfach.
Jetzt könnte man zwar mit eigenem CSS-Code arbeiten, sodass man den Tweet in einem HTML-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 CSS-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ügst du im Code im <blockquote> Element einfach nach twitter-tweet mit einem Leerzeichen ein und baust ansonsten ganz normal den Code ein. Der Code sieht dann folgendermaßen aus.
<blockquote class="twitter-tweet tw-align-center" data-dnt="true" data-theme="dark">
<p lang="en" dir="ltr">Thank you for everything. My last ask is the same as my first. I'm asking you to believe—not in my ability to create change, but in yours.</p>— President Obama (@POTUS44) <a href="https://twitter.com/POTUS44/status/819044196371800065?ref_src=twsrc%5Etfw">January 11, 2017</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>Wenn ich den Tweet mit dieser extra CSS-Klasse nun im Quellcode meiner WordPress Website einbaue, ist der Tweet wie von Zauberhand ohne extra Code und ohne große Mühen zentriert.
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 einfache CSS-Klasse, die in das <blockquote> Element eingefügt wird, genügt, damit der Tweet zentriert in deinem Blogpost angezeigt wird.
Ich hoffe, dir hat dieser kurze Beitrag gefallen und du fandest ihn hilfreich. Bis zum nächsten Mal – dein Maurice!