W\u00e4hrend es eine Herausforderung sein kann, Ihr eigenes CSS von Grund auf neu zu schreiben, sollte das Hinzuf\u00fcgen vorgefertigter Snippets einfach sein.<\/p>\n
In diesem Tutorial lernen Sie den einfachsten und besten Ansatz kennen, um Ihrer Website benutzerdefiniertes CSS hinzuzuf\u00fcgen, damit Sie die Stile in Ihrem WordPress-Theme \u00e4ndern k\u00f6nnen.<\/p>\n
So f\u00fcgen Sie benutzerdefiniertes CSS hinzu<\/h2>\n
In der Vergangenheit habe ich das Simple Custom CSS-<\/a> Plugin empfohlen, aber Sie ben\u00f6tigen kein Plugin mehr, um CSS zu Ihrer Website hinzuzuf\u00fcgen.<\/p>\n Stattdessen k\u00f6nnen Sie den integrierten Abschnitt Additional CSS im Customizer verwenden. Um auf diese Funktion zuzugreifen, klicken Sie zun\u00e4chst auf das Men\u00fcelement Anpassen, das sich unter Darstellung befindet.<\/p>\n \u00d6ffnen Sie als N\u00e4chstes den Abschnitt Additional CSS, der sich am unteren Rand des Customizer-Panels befinden sollte.<\/p>\n Darin k\u00f6nnen Sie einfach das CSS einf\u00fcgen, das Sie zu Ihrer Website hinzuf\u00fcgen m\u00f6chten.<\/p>\n Das Tolle an der zus\u00e4tzlichen CSS-Funktion ist, dass Sie eine Live-Vorschau erhalten, wie sich dies auf Ihre Website auswirkt. Die Vorschau wird sofort aktualisiert und Besucher sehen Ihre \u00c4nderungen erst, wenn Sie oben auf die Schaltfl\u00e4che Ver\u00f6ffentlichen klicken.<\/p>\n Viele WordPress-Benutzer sind versucht, das Stylesheet des Themes direkt \u00fcber das Theme-Editor-Men\u00fc zu bearbeiten.<\/p>\n Tun Sie dies niemals.<\/strong><\/p>\n Das gr\u00f6\u00dfte Problem bei der Durchf\u00fchrung von \u00c4nderungen auf diese Weise besteht darin, dass all Ihre harte Arbeit verloren geht, wenn Sie das Thema aktualisieren. Wenn Sie beispielsweise Mission News<\/a> Version 1.38 verwenden und morgen 1.39 herauskommt, kopiert der Update-Prozess alle neuen Dateien \u00fcber die alten Dateien. Das Design enth\u00e4lt sicherlich nicht die gleichen Anpassungen, die Sie vorgenommen haben, und gehen daher dauerhaft verloren (es sei denn, Sie haben ein aktuelles Backup<\/a> ).<\/p>\n Dies kann durch die Verwendung des Abschnitts Additional CSS im Customizer vermieden werden, der von Theme-Updates nicht betroffen ist.<\/p>\n Die einzige Herausforderung der zus\u00e4tzlichen CSS-Funktion besteht darin, dass es manchmal etwas schwieriger sein kann, Ihr CSS zum Laufen zu bringen.<\/p>\n Ohne ins Unkraut zu geraten, verwendet CSS ein Spezifit\u00e4tssystem, um<\/a> zu entscheiden, welche Stilregeln sich gegenseitig \u00fcberschreiben.<\/p>\n Eine M\u00f6glichkeit, sicherzustellen, dass Ihre Stile die Stile des Themas \u00fcberschreiben, besteht darin, ein Nehmen Sie zum Beispiel dieses CSS-Snippet:<\/p>\n In all unseren Themes<\/a> w\u00fcrde dieser Code den Site-Titel 28px machen. Wenn Sie nach der Implementierung dieses Codes keine \u00c4nderungen sehen, versuchen Sie, das Mit diesem Update wird im Wesentlichen garantiert, dass der Code wirksam wird, solange er auf den richtigen Selektor abzielt. Versuchen Sie einfach, dies f\u00fcr besondere Anl\u00e4sse zu reservieren, da es in Ihrem Code dutzende Male in Ihrem Code verwendet werden kann, um Stile in Zukunft zu \u00fcberschreiben.<\/p>\n Ein h\u00e4ufiges Problem, mit dem Benutzer bei der Verwendung dieser Funktion konfrontiert sind, besteht darin, dass ihr Code funktioniert, w\u00e4hrend sie den Live Customizer verwenden, aber sobald sie die Site normal anzeigen, werden die \u00c4nderungen nicht angezeigt.<\/p>\n Dies ist fast immer auf das Caching zur\u00fcckzuf\u00fchren, und ich beschreibe die L\u00f6sung hier ausf\u00fchrlich:<\/p>\n So beheben Sie WordPress-\u00c4nderungen, die nicht angezeigt werden<\/a><\/p>\n Es sollte nur ein oder zwei Minuten dauern, um die Dinge zu kl\u00e4ren.<\/p>\n Auch wenn Sie keine Ahnung haben, wie Sie Ihr eigenes CSS schreiben, k\u00f6nnen Sie mit der zus\u00e4tzlichen CSS-Funktion ganz einfach Code in Ihre Website einf\u00fcgen.<\/p>\n Wenn Sie mehr \u00fcber das Anpassen von WordPress-Themes mit CSS erfahren m\u00f6chten, w\u00fcrde ich als<\/a> n\u00e4chstes meinen Leitfaden zum Finden von CSS-Selektoren<\/a> empfehlen .<\/p>\n Und wenn es Ihnen heute Spa\u00df gemacht hat, etwas Neues \u00fcber WordPress zu lernen, k\u00f6nnte Ihnen mein kostenloser E-Mail-Kurs gefallen:<\/p>\n![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4c6d6cd.png\")
<\/a><\/p>\n![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4f0f93d.png\")
<\/a><\/p>\n![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e510ba49.png\")
<\/a><\/p>\nWarum Sie style.css niemals bearbeiten sollten<\/h2>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e5335117.png\")
<\/a><\/p>\nTipps, damit Ihr benutzerdefiniertes CSS funktioniert<\/h3>\n
!important<\/code>Tag zu verwenden.<\/p>\n.site-title {\n font-size: 28px;\n}<\/code><\/pre>\n!important<\/code>Tag wie folgt hinzuzuf\u00fcgen :<\/p>\n.site-title {\n font-size: 28px !important;\n}<\/code><\/pre>\nWas ist, wenn es nur in der Live-Vorschau angezeigt wird?<\/h2>\n
Einfache Anpassung mit CSS<\/h2>\n