{"id":73508,"date":"2025-07-01T14:31:33","date_gmt":"2025-07-01T13:31:33","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=73508&#038;preview=true&#038;preview_id=73508"},"modified":"2025-07-02T14:37:16","modified_gmt":"2025-07-02T13:37:16","slug":"css-tipps-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/","title":{"rendered":"9 zeitsparende CSS-Tipps f\u00fcr WordPress-Nutzer"},"content":{"rendered":"<p>Egal, ob du <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-du-dein-wordpress-theme-anpasst\/\">ein Theme anpasst<\/a>, ein Plugin-lastiges Dashboard entr\u00fcmpeln willst oder einfach nur willst, dass dein Blog auf jedem Bildschirm gut aussieht, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">CSS<\/a> ist immer noch eine der schnellsten M\u00f6glichkeiten, um Dinge in <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-wordpress\/\">WordPress<\/a> zu erledigen, ohne ein <em>weiteres<\/em> Plugin zu installieren.<\/p>\n<p>Aber seien wir ehrlich: Nicht jeder WordPress-Benutzer hat die Zeit, sich durch Theme-Stylesheets zu w\u00fchlen oder die Eigenheiten <a href=\"https:\/\/www.youtube.com\/shorts\/yYcL3kUSGZA\">des Blockeditors<\/a> zu entschl\u00fcsseln. Deshalb haben wir diese Liste mit praktischen, zeitsparenden CSS-Tipps zusammengestellt, die speziell f\u00fcr WordPress entwickelt wurden.<\/p>\n<p>Das sind keine allgemeinen Tricks. Stattdessen k\u00f6nnen sie dir helfen, h\u00e4ufige Frustrationen von Bloggern, Website-Betreibern, <a href=\"https:\/\/kinsta.com\/de\/blog\/arten-von-entwicklern\/\">Entwicklern<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/beste-tools-fur-freelancer\/\">Freiberuflern<\/a> zu l\u00f6sen, die t\u00e4glich mit WordPress arbeiten.<\/p>\n<p>Dieser Leitfaden erkl\u00e4rt, wie du:<\/p>\n<ul>\n<li>Probleme mit sticky \u00dcberschriften mit Ankerlinks behebst<\/li>\n<li>Lange Beitragsraster mit modernen Layouttechniken beschleunigst<\/li>\n<li>Den Anmeldebildschirm ohne Plugin anpasst<\/li>\n<li>Aufgebl\u00e4hte Plugin-UI-Elemente ausblendest<\/li>\n<li>Und mehr&#8230;<\/li>\n<\/ul>\n<p>Egal, ob du ein <a href=\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/\">klassisches Theme<\/a>, ein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-theme-erstellung\/\">blockbasiertes Theme<\/a> oder einen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/\">Builder<\/a> verwendest, diese Tipps k\u00f6nnen dir helfen, deinen Workflow zu optimieren und die Leistung zu verbessern &#8211; und das alles mit ein paar Zeilen <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a>.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>1. Ankerlink-Probleme mit Sticky Headers beheben<\/h2>\n<p>Hast du schon einmal auf einen Link geklickt, der zu einem bestimmten Abschnitt einer Seite f\u00fchrt, nur um festzustellen, dass die Ziel\u00fcberschrift hinter deiner <a href=\"https:\/\/kinsta.com\/de\/blog\/sticky-header\/\">Sticky-Navbar<\/a> versteckt ist? Das ist ein h\u00e4ufiges Problem in WordPress. Es tritt normalerweise bei langen Beitr\u00e4gen auf, die ein Inhaltsverzeichnis-Plugin verwenden.<\/p>\n<p>Die meisten Themes verwenden <code>position: sticky<\/code> oder <code>fixed<\/code> f\u00fcr Navigationsleisten, die den oberen Teil der Seite \u00fcberlappen. Wenn ein Nutzer auf einen Ankerlink (wie <code>#faq<\/code> oder <code>#pricing<\/code>) klickt, scrollt der Browser diesen Abschnitt ganz nach oben, direkt unter die Navigationsleiste.<\/p>\n<p>Du kannst dies mit der CSS-Eigenschaft <code>scroll-margin-top<\/code> beheben. Sie f\u00fcgt Platz \u00fcber der \u00dcberschrift hinzu, damit sie nicht unter der Sticky-Navbar stecken bleibt.<\/p>\n<pre><code class=\"language-css\">h2, h3 {\n  scroll-margin-top: 80px;\n}<\/code><\/pre>\n<p>Am besten passt du den Wert an die H\u00f6he deiner \u00dcberschrift an. Wenn deine Sticky Navbar 64px hoch ist, nimm <code>scroll-margin-top: 64px<\/code> oder etwas mehr. Wende ihn auf die \u00dcberschriftenebenen an, die du in Ankerlinks verwendest &#8211; normalerweise <code>h2<\/code> oder <code>h3<\/code>.<\/p>\n<h2>2. Bestimmte WordPress-Admin-Bildschirme mit &lt;body&gt;-Klassen ansprechen<\/h2>\n<p>Viele WordPress-Plugins \u00fcberladen die Verwaltungsoberfl\u00e4che mit Upsell-Hinweisen, Bannern oder ungestylten Elementen. Es ist jedoch nicht immer praktisch, diese Elemente zu entfernen oder auf der gesamten Website anzupassen, vor allem, wenn du nur auf einem bestimmten Bildschirm \u00c4nderungen vornehmen willst, z. B. in den <a href=\"https:\/\/kinsta.com\/de\/blog\/woocommerce-tutorial\/\">WooCommerce-Einstellungen<\/a> oder im Editor f\u00fcr <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-benutzerdefinierte-beitragstypen\/\">benutzerdefinierte Beitr\u00e4ge<\/a>.<\/p>\n<p>WordPress f\u00fcgt automatisch kontextabh\u00e4ngige Klassen zum <code>&lt;body&gt;<\/code> Tag auf Verwaltungsseiten hinzu. Dazu geh\u00f6ren Seiten-Slugs, Beitragstypen und Verweise auf Men\u00fcpunkte &#8211; und sie sind unglaublich n\u00fctzlich, um CSS zu schreiben, das nur dort angewendet wird, wo es ben\u00f6tigt wird.<\/p>\n<p>Nehmen wir zum Beispiel an, dass du Hinweise nur auf der Seite mit den WooCommerce-Einstellungen ausblenden m\u00f6chtest.<\/p>\n<pre><code class=\"language-css\">body.toplevel_page_woocommerce .notice {\n  display: none;\n}<\/code><\/pre>\n<p>Um diese Klassen zu finden, \u00f6ffne deinen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress-Admin<\/a>, klicke mit der rechten Maustaste und w\u00e4hle <strong>Inspect<\/strong> (oder dr\u00fccke <code>Cmd+Option+I<\/code> \/ <code>Ctrl+Shift+I<\/code>). Suche nach dem Tag <code>&lt;body&gt;<\/code> &#8211; er enth\u00e4lt mehrere n\u00fctzliche Klassen.<\/p>\n<p>Du k\u00f6nntest sie zum Beispiel von einem Dashboard-Bildschirm abrufen:<\/p>\n<pre><code class=\"language-css\">&lt;body class=\"wp-admin wp-core-ui index-php wp-dashboard theme-astra ...\"&gt;<\/code><\/pre>\n<p>Einige g\u00e4ngige Klassen, die du sehen k\u00f6nntest:<\/p>\n<ul>\n<li><code>post-type-product<\/code>: WooCommerce Produkt-Editor<\/li>\n<li><code>edit-tags-php<\/code>: Kategorie-\/Tag-Verwaltung<\/li>\n<li><code>settings_page_yoast<\/code>: Yoast SEO-Einstellungen<\/li>\n<li><code>toplevel_page_woocommerce<\/code>: Hauptseite der WooCommerce-Einstellungen<\/li>\n<\/ul>\n<p>Um diese in deinem CSS zu verwenden, musst du ein benutzerdefiniertes Admin-Stylesheet <a href=\"https:\/\/kinsta.com\/de\/blog\/wp-enqueue-scripts\/\">einrichten<\/a>. Du kannst sie nicht \u00fcber den Customizer hinzuf\u00fcgen &#8211; das betrifft nur das Frontend.<\/p>\n<p>F\u00fcge dieses Stylesheet zu deinem Theme hinzu: <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_admin_styles() {\n  wp_enqueue_style(\n    'my-admin-css',\n    get_stylesheet_directory_uri() . '\/admin.css'\n  );\n}\nadd_action('admin_enqueue_scripts', 'my_custom_admin_styles');<\/code><\/pre>\n<p>Erstelle dann eine Datei namens <code>admin.css<\/code> in deinem Theme-Ordner und f\u00fcge dort deine Scoped Styles hinzu.<\/p>\n<h2>3. Responsive Grids ohne einen Page Builder erstellen<\/h2>\n<p>Seitenerstellungsprogramme machen das Layout einfach, aber sie machen es auch un\u00fcbersichtlich. Wenn du mit einem klassischen Theme (wie <a href=\"https:\/\/kinsta.com\/de\/blog\/generatepress-vs-astra\/\">Astra oder GeneratePress<\/a>) arbeitest oder sogar dein eigenes <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-vorlagen\/\">Block-Template<\/a> erstellst, kannst du mit CSS-Gittern schneller und sauberer ein responsives Layout erstellen.<\/p>\n<p>Das ist besonders n\u00fctzlich f\u00fcr:<\/p>\n<ul>\n<li>Blog-Beitragsraster auf Start- oder Archivseiten<\/li>\n<li>Benutzerdefinierte Beitragstypen wie Veranstaltungen, Teammitglieder oder Zeugnisse<\/li>\n<li>WooCommerce-Produktlayouts ohne \u00dcberschreibung von Vorlagendateien<\/li>\n<\/ul>\n<p>Du kannst dies einfach in das Stylesheet deines Child-Themes einf\u00fcgen (oder \u00fcber <code>functions.php<\/code> einbinden):<\/p>\n<pre><code class=\"language-css\">.post-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 1.5rem;\n}<\/code><\/pre>\n<p>Dann verpackst du deine Schleife in einen Container wie diesen:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"post-list\"&gt;\n  &lt;?php while (have_posts()) : the_post(); ?&gt;\n    &lt;div class=\"post-card\"&gt;\n      &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n      &lt;p&gt;&lt;?php the_excerpt(); ?&gt;&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;?php endwhile; ?&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Dieses CSS erstellt automatisch so viele Spalten, wie hineinpassen, stellt sicher, dass jedes Element mindestens 280px breit ist, und klappt auf kleineren Bildschirmen auf weniger Spalten zusammen &#8211; ohne <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/\">Media-Queries<\/a> oder Plugin.<\/p>\n<h2>4. Verwende clamp() f\u00fcr responsive Schriftgr\u00f6\u00dfen ohne Media-Queries<\/h2>\n<p>Die Anpassung an verschiedene Bildschirmgr\u00f6\u00dfen bedeutet oft, dass du mit Media-Queries mit den Schriftgr\u00f6\u00dfen jonglieren musst. Aber Media-Queries k\u00f6nnen un\u00fcbersichtlich werden, vor allem, wenn du mit mehreren Breakpoints arbeitest oder eine einheitliche Skalierung \u00fcber verschiedene Ger\u00e4te hinweg erreichen willst.<\/p>\n<p>An dieser Stelle stellt <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clamp\">clamp()<\/a><\/code> eine moderne CSS-Funktion dar, mit der du einen flie\u00dfenden Wert zwischen einer minimalen, bevorzugten und maximalen Gr\u00f6\u00dfe definieren kannst &#8211; und das alles in einer Zeile.<\/p>\n<p>Hier ist das grundlegende Format:<\/p>\n<pre><code class=\"language-css\">font-size: clamp(min, preferred, max);<\/code><\/pre>\n<p>Der Browser passt die Schriftgr\u00f6\u00dfe automatisch an die Breite des Viewports an, <em>ohne dass<\/em> separate Media-Queries erforderlich sind.<\/p>\n<p>Die meisten WordPress-Themes (vor allem Block-Themes) bieten ein fl\u00fcssiges Design. Aber <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">der Block-Editor von Gutenberg<\/a> gibt dir nicht immer die volle Kontrolle \u00fcber die Skalierung der Schrift, vor allem bei Dingen wie:<\/p>\n<ul>\n<li>\u00dcberschriften von Hero-Abschnitten<\/li>\n<li>Titel von Featured Posts<\/li>\n<li>Seiten-Layouts \u00fcber die gesamte Breite<\/li>\n<\/ul>\n<p>Anstatt mehrere Schriftgr\u00f6\u00dfen mit Media Queries hart zu kodieren, bietet <code>clamp()<\/code> standardm\u00e4\u00dfig saubereren Code, weniger Wiederholungen und eine bessere Reaktionsf\u00e4higkeit. Du kannst die Funktion f\u00fcr \u00dcberschriften, Schaltfl\u00e4chen, Blockquotes usw. innerhalb benutzerdefinierter Blockstile \u00fcber <code>theme.json<\/code> oder <code>editor-style.css<\/code> verwenden.<\/p>\n<pre><code class=\"language-css\">h1 {\n  font-size: clamp(1.8rem, 4vw + 1rem, 3rem);\n}<\/code><\/pre>\n<p><code>clamp()<\/code> wird in allen modernen Browsern unterst\u00fctzt. Du kannst sie in allen WordPress-Projekten verwenden, es sei denn, du hast es auf extrem veraltete Unternehmensbrowser abgesehen (z. B. Internet Explorer 11, den WordPress selbst nicht mehr unterst\u00fctzt).<\/p>\n<h2>5. Verbessere die Leistung auf langen Seiten mit Content-Visibility<\/h2>\n<p>Wenn deine Startseite Blogbeitr\u00e4ge auflistet, deine Shopseite Dutzende von Produkten l\u00e4dt oder du eine benutzerdefinierte Abfrage verwendest, um Erfahrungsberichte anzuzeigen, bist du wahrscheinlich auf Leistungsprobleme gesto\u00dfen, besonders auf mobilen Ger\u00e4ten. Die Verz\u00f6gerung, die beim Scrollen einer langen Liste auftritt? Sie r\u00fchrt daher, dass der Browser mehr Arbeit macht, als er m\u00fcsste.<\/p>\n<p>Die <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/content-visibility\">content-visibility<\/a><\/code> CSS-Eigenschaft kann helfen, indem sie dem Browser mitteillt: &#8222;Rendere dieses Element erst, wenn es gescrollt wird.&#8220;<\/p>\n<pre><code class=\"language-css\">.article-card {\n  content-visibility: auto;\n  contain-intrinsic-size: 400px;\n}<\/code><\/pre>\n<p>Das ist wie ein Lazy-Loading f\u00fcr HTML-Elemente, das die Layout- und Paintkosten f\u00fcr Inhalte au\u00dferhalb des Bildschirms reduziert. Die <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/contain-intrinsic-size\">contain-intrinsic-size<\/a><\/code> gibt dem Browser eine gesch\u00e4tzte H\u00f6he an, um Platz zu reservieren, damit sich das Layout nicht verschiebt, wenn der Inhalt geladen wird.<\/p>\n<p>Du kannst dies erreichen, indem du eine Klasse wie <code>.article-card<\/code> oder <code>.product-card<\/code> zu jedem Schleifen-Element hinzuf\u00fcgst, wenn du ein Theme bearbeitest, und dann das CSS in das Stylesheet deines <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\">Child-Themes<\/a> einf\u00fcgst oder es \u00fcber <code>functions.php<\/code> einreihst.<\/p>\n<p>Wenn du Gutenberg verwendest, kannst du dem Block eine benutzerdefinierte Klasse hinzuf\u00fcgen (in den <strong>erweiterten Einstellungen<\/strong>) und sie dann im Abschnitt <strong>Zus\u00e4tzliches CSS<\/strong> oder in deiner Themedatei festlegen.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Dieser Trick ersetzt kein gutes <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/caching\/\">Caching<\/a> oder ein <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-ein-cdn\/\">CDN<\/a> &#8211; aber er ist eine clevere, nur auf CSS basierende Methode, um die Leistung beim Rendern langer Listen von Inhalten zu verbessern. Er hilft nicht bei Bildern (die werden in modernem WordPress bereits &#8222;lazy-loaded&#8220;).<\/p>\n<\/aside>\n\n<h2>6. Verwende !important sparsam, aber klug, wenn du Plugin-Stile \u00fcberschreibst<\/h2>\n<p>In den meisten WordPress-Projekten versuchst du, etwas zu stylen, und nichts passiert. Du schreibst die Regel, \u00fcberpr\u00fcfst deinen Selektor, aktualisierst&#8230; und trotzdem werden die urspr\u00fcnglichen Stile des Plugins angezeigt.<\/p>\n<p>Das liegt daran, dass viele WordPress-Plugins Stile mit folgenden Eigenschaften hinzuf\u00fcgen:<\/p>\n<ul>\n<li>Hohe Spezifit\u00e4t (lange Klassenketten)<\/li>\n<li>Inline-Attributen <code>style<\/code><\/li>\n<li>Stylesheets, die nach deinen geladen werden<\/li>\n<\/ul>\n<p>Anstatt komplexe Selektoren zu verwenden, ist die sauberere L\u00f6sung oft die Verwendung von <code>!important<\/code>, wenn es gerechtfertigt ist.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/contact-form-7\/\">Contact Form 7<\/a> verwendet zum Beispiel spezielle Klassen wie <code>.wpcf7-form-control<\/code>, aber seine Standardstile k\u00f6nnen ohne <code>!important<\/code> nur schwer \u00fcberschrieben werden.<\/p>\n<p>So rundest du die Formulareingaben ab:<\/p>\n<pre><code class=\"language-css\">input.wpcf7-form-control {\n  border-radius: 6px !important;\n}<\/code><\/pre>\n<p>Es ist wichtig, dass du es vors\u00e4tzlich einsetzt. Anstatt <code>!important<\/code> \u00fcberall zu verstreuen, solltest du die \u00dcberschreibungen in einem eigenen Stylesheet f\u00fcr den Admin oder f\u00fcr Plugins isolieren. So bleibt dein CSS im Haupttheme sauber und du vermeidest sp\u00e4ter versehentliche Konflikte.<\/p>\n<p>Wenn du mit Kunden-Websites arbeitest, hilft dir dieser Ansatz, aggressive Plugin-Stile zu z\u00e4hmen<em>, ohne dass<\/em> du Templates abzweigen oder ein weiteres Plugin hinzuf\u00fcgen musst.<\/p>\n<h2>7. Nutze :where(), um Blockstile zu \u00fcberschreiben, ohne dass die Spezifit\u00e4t Kopfschmerzen bereitet<\/h2>\n<p>Wenn du schon einmal versucht hast, das Standard-Styling der <a href=\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/\">Gutenberg-Bl\u00f6cke<\/a> zu ver\u00e4ndern, wei\u00dft du, wie schwer das ist: WordPress Core und blockbasierte Themes werden oft mit extrem spezifischen Selektoren ausgeliefert. Selbst kleine \u00c4nderungen wie das Anpassen von Buttonr\u00e4ndern oder das Entfernen von Blockabst\u00e4nden erfordern entweder komplexe \u00dcberschreibungen oder eine Menge Ausprobieren.<\/p>\n<p>Du kannst das Problem l\u00f6sen, indem du die <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:where\">:where()<\/a><\/code> pseudoklasse, einem CSS-Selektor-Wrapper, der immer null Spezifit\u00e4t hat, egal, was du in ihn einf\u00fcgst.<\/p>\n<pre><code class=\"language-css\">:where(.wp-block-button) {\n  margin-bottom: 0;\n}<\/code><\/pre>\n<p>Er wendet einen Stil auf <code>.wp-block-button<\/code> an, aber im Gegensatz zu einem normalen Selektor &#8222;konkurriert&#8220; er nicht mit anderen CSS-Regeln, was ihn sicher und flexibel macht.<\/p>\n<p>Nehmen wir an, du arbeitest an einer Website mit einem Block-Theme (wie <a href=\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-four-theme\/\">Twenty Twenty-Four<\/a> oder dem Block-Starter von Astra). Du m\u00f6chtest den zus\u00e4tzlichen Rand unter den Schaltfl\u00e4chen entfernen:<\/p>\n<pre><code class=\"language-css\">.wp-block-button {\n  margin-bottom: 0;\n}<\/code><\/pre>\n<p>Aber das funktioniert vielleicht nicht, weil der WordPress-Kern oder das Theme eine spezifischere Regel hat, wie z. B.:<\/p>\n<pre><code class=\"language-css\">.entry-content .wp-block-button:not(.is-style-outline) {\n  margin-bottom: 1.5rem;\n}<\/code><\/pre>\n<p>Du kannst mehr Spezifit\u00e4t hinzuf\u00fcgen (fragil), <code>!important<\/code> verwenden (schwerf\u00e4llig) oder <code>:where()<\/code> verwenden, um wartungsfreundlicheres CSS zu schreiben, das mit dem Rest deines Codes harmoniert.<\/p>\n<h2>8. Den WordPress-Anmeldebildschirm ohne ein Plugin anpassen<\/h2>\n<p>Willst du dein Logo auf der Anmeldeseite einf\u00fcgen? Die Hintergrundfarbe \u00e4ndern? Die Schriftart oder den Stil der Schaltfl\u00e4chen anpassen? Daf\u00fcr brauchst du kein Plugin. WordPress macht es dir leicht, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-registrierungsformularen\/\">den Anmeldebildschirm mit deinem eigenen CSS anzupassen<\/a>. Alles, was du brauchst, ist ein Action Hook.<\/p>\n<p>Rufe einfach ein benutzerdefiniertes Stylesheet mit dem <code>login_enqueue_scripts<\/code> Hook auf:<\/p>\n<pre><code class=\"language-php\">function custom_login_styles() {\n  wp_enqueue_style(\n    'my-login-styles',\n    get_stylesheet_directory_uri() . '\/login.css'\n  );\n}\nadd_action('login_enqueue_scripts', 'custom_login_styles');<\/code><\/pre>\n<p>In deiner <code>login.css<\/code> Datei kannst du dann Stile wie diesen hinzuf\u00fcgen:<\/p>\n<pre><code class=\"language-css\">body.login {\n  background-color: #f9f9f9;\n}\n\n.login h1 a {\n  background-image: url('\/wp-content\/uploads\/your-logo.png');\n  background-size: contain;\n  width: 100%;\n  height: 80px;\n}\n\n.login #loginform {\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre>\n<p>Das gibt deiner Seite einen professionellen Touch und vermeidet ein weiteres Plugin, das nur eine Sache macht.<\/p>\n<h2>9. Verhindere, dass Bilder dein Layout zerst\u00f6ren<\/h2>\n<p>Das Hinzuf\u00fcgen eines Bildes, das zu breit f\u00fcr seinen Container ist, kann das WordPress-Layout zerst\u00f6ren, besonders bei klassischen Themes oder Seiten- und Beitragsinhalten. Wenn das Bild nicht durch CSS eingeschr\u00e4nkt wird, kann es \u00fcber sein \u00fcbergeordnetes Element hinauswachsen und horizontales Scrollen oder falsch ausgerichtete Abschnitte verursachen.<\/p>\n<p>Das passiert normalerweise, wenn:<\/p>\n<ul>\n<li>Ein Inhaltsredakteur f\u00fcgt ein Bild ein, ohne die Ausrichtung oder Gr\u00f6\u00dfe festzulegen<\/li>\n<li>Einem Theme fehlt die standardm\u00e4\u00dfige Handhabung von responsiven Bildern<\/li>\n<li>Du f\u00fcgst Bilder in benutzerdefinierte Bl\u00f6cke oder Legacy-Shortcodes ein<\/li>\n<\/ul>\n<p>Um dies zu beheben, musst du eine maximale Breite festlegen und das Layoutverhalten zur\u00fccksetzen:<\/p>\n<pre><code class=\"language-css\">img {\n  max-width: 100%;\n  height: auto;\n  display: block;\n}<\/code><\/pre>\n<p>So funktioniert das:<\/p>\n<ul>\n<li><code>max-width: 100%<\/code>: Stellt sicher, dass das Bild niemals seinen Container \u00fcberl\u00e4uft<\/li>\n<li><code>height: auto<\/code>: Beh\u00e4lt das urspr\u00fcngliche Seitenverh\u00e4ltnis bei<\/li>\n<li><code>display: block<\/code>: Entfernt unerwartete L\u00fccken unter Bildern, die durch Inline-Layout-Vorgaben verursacht werden<\/li>\n<\/ul>\n<p>Du kannst das gleiche Muster auch auf einschr\u00e4nkende Videos anwenden:<\/p>\n<pre><code class=\"language-css\">iframe {\n  max-width: 100%;\n  height: auto;\n  display: block;\n}<\/code><\/pre>\n<p>Oder verwende einen Wrapper mit <code>aspect-ratio<\/code>, wenn dein Theme modernes CSS unterst\u00fctzt.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>CSS mag f\u00fcr sich genommen keine gro\u00dfe Ver\u00e4nderung darstellen, aber in WordPress k\u00f6nnen ein paar gut platzierte Zeilen stundenlange Frustration ersparen.<\/p>\n<p>Egal, ob du Layouts anpasst, das Admin-Dashboard aufr\u00e4umst oder die Leistung des Frontends verbesserst &#8211; die Tipps in diesem Leitfaden sollen dir helfen, intelligenter und nicht h\u00e4rter zu arbeiten.<\/p>\n<p>Aber selbst das beste CSS kann nur bis zu einem bestimmten Punkt reichen. Damit deine Frontend-Verbesserungen wirklich mit schnell ladenden Seiten, stabilen Layouts und reibungsloser Interaktivit\u00e4t gl\u00e4nzen k\u00f6nnen, brauchst du auch eine <a href=\"https:\/\/kinsta.com\/de\/wordpress-hosting\/\">Hosting-Plattform, die auf Leistung ausgelegt ist<\/a>.<\/p>\n<p>Bei Kinsta ist <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-erste-schritte\/wordpress-infrastruktur\/\">unsere Infrastruktur<\/a> so konzipiert, dass sie diese Optimierungen erg\u00e4nzt, mit <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#image-optimization-1\">integrierter Bildoptimierung<\/a>, <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/caching\/edge-caching\/\">Edge-Caching<\/a>, <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-cdn\/\">CDN-Unterst\u00fctzung<\/a> und einer auf WordPress abgestimmten Serverleistung.<\/p>\n<p>W\u00e4hrend du also mit diesen CSS-Tricks das Aussehen und die Bedienung deiner Website selbst bestimmen kannst, sorgt Kinsta daf\u00fcr, dass sie so <em>l\u00e4dt<\/em> und <em>funktioniert<\/em>, wie deine Nutzer es erwarten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Egal, ob du ein Theme anpasst, ein Plugin-lastiges Dashboard entr\u00fcmpeln willst oder einfach nur willst, dass dein Blog auf jedem Bildschirm gut aussieht, CSS ist immer &#8230;<\/p>\n","protected":false},"author":287,"featured_media":73509,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1010],"class_list":["post-73508","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-tipps"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>9 CSS-Tipps, die WordPress-Nutzern Zeit sparen<\/title>\n<meta name=\"description\" content=\"Einfache CSS-Tipps, um h\u00e4ufige Probleme mit dem WordPress-Layout zu beheben, das Dashboard aufzur\u00e4umen und deine Website einfacher zu verwalten.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9 zeitsparende CSS-Tipps f\u00fcr WordPress-Nutzer\" \/>\n<meta property=\"og:description\" content=\"Einfache CSS-Tipps, um h\u00e4ufige Probleme mit dem WordPress-Layout zu beheben, das Dashboard aufzur\u00e4umen und deine Website einfacher zu verwalten.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-01T13:31:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-02T13:37:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Einfache CSS-Tipps, um h\u00e4ufige Probleme mit dem WordPress-Layout zu beheben, das Dashboard aufzur\u00e4umen und deine Website einfacher zu verwalten.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"11\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"9 zeitsparende CSS-Tipps f\u00fcr WordPress-Nutzer\",\"datePublished\":\"2025-07-01T13:31:33+00:00\",\"dateModified\":\"2025-07-02T13:37:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/\"},\"wordCount\":1953,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png\",\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/\",\"name\":\"9 CSS-Tipps, die WordPress-Nutzern Zeit sparen\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png\",\"datePublished\":\"2025-07-01T13:31:33+00:00\",\"dateModified\":\"2025-07-02T13:37:16+00:00\",\"description\":\"Einfache CSS-Tipps, um h\u00e4ufige Probleme mit dem WordPress-Layout zu beheben, das Dashboard aufzur\u00e4umen und deine Website einfacher zu verwalten.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Tipps\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-tipps\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"9 zeitsparende CSS-Tipps f\u00fcr WordPress-Nutzer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"9 CSS-Tipps, die WordPress-Nutzern Zeit sparen","description":"Einfache CSS-Tipps, um h\u00e4ufige Probleme mit dem WordPress-Layout zu beheben, das Dashboard aufzur\u00e4umen und deine Website einfacher zu verwalten.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/","og_locale":"de_DE","og_type":"article","og_title":"9 zeitsparende CSS-Tipps f\u00fcr WordPress-Nutzer","og_description":"Einfache CSS-Tipps, um h\u00e4ufige Probleme mit dem WordPress-Layout zu beheben, das Dashboard aufzur\u00e4umen und deine Website einfacher zu verwalten.","og_url":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2025-07-01T13:31:33+00:00","article_modified_time":"2025-07-02T13:37:16+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Einfache CSS-Tipps, um h\u00e4ufige Probleme mit dem WordPress-Layout zu beheben, das Dashboard aufzur\u00e4umen und deine Website einfacher zu verwalten.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"11\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"9 zeitsparende CSS-Tipps f\u00fcr WordPress-Nutzer","datePublished":"2025-07-01T13:31:33+00:00","dateModified":"2025-07-02T13:37:16+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/"},"wordCount":1953,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png","inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/","url":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/","name":"9 CSS-Tipps, die WordPress-Nutzern Zeit sparen","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png","datePublished":"2025-07-01T13:31:33+00:00","dateModified":"2025-07-02T13:37:16+00:00","description":"Einfache CSS-Tipps, um h\u00e4ufige Probleme mit dem WordPress-Layout zu beheben, das Dashboard aufzur\u00e4umen und deine Website einfacher zu verwalten.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/css-tipps-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Tipps","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-tipps\/"},{"@type":"ListItem","position":3,"name":"9 zeitsparende CSS-Tipps f\u00fcr WordPress-Nutzer"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/73508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=73508"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/73508\/revisions"}],"predecessor-version":[{"id":73535,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/73508\/revisions\/73535"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73508\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73508\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73508\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73508\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73508\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73508\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73508\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73508\/translations\/jp"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/73508\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/73509"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=73508"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=73508"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=73508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}