\n So passen Sie ein WordPress-Theme mit CSS an\n<\/p>\n
\n Zun\u00e4chst m\u00fcssen Sie verstehen, dass Sie, wenn Sie Ihr WordPress-Theme mit CSS anpassen m\u00f6chten, entweder bestimmten Code hinzuf\u00fcgen oder den bereits geschriebenen Code bearbeiten m\u00fcssen. Ich w\u00fcrde Ihnen empfehlen, zumindest einige Grundlagen von CSS, HTML, JavaScript und PHP zu lernen, bevor Sie mit der Bearbeitung Ihres Designs beginnen.\n<\/p>\n
\n Eine weitere zu beachtende Sache ist, dass, wenn Sie \u00c4nderungen im Stylesheet Ihres WordPress-Themas vornehmen, diese \u00c4nderungen entfernt werden, sobald Ihr Theme aktualisiert wird. Sie m\u00fcssen also etwas \u00fcber Child-Themes lernen und ein Child-Theme verwenden, um \u00c4nderungen mit style.css, functions.php oder anderen Theme-Vorlagendateien vorzunehmen. Ich habe sp\u00e4ter in diesem Artikel \u00fcber untergeordnete Themen gesprochen.\n<\/p>\n
\n Es gibt zwei M\u00f6glichkeiten, CSS zu deinem Design zu bearbeiten oder hinzuzuf\u00fcgen
\n<\/h4>\n\n 1 Verwenden des Dashboards
\n<\/h5>\n
\n<\/h5>\n
\n Auf diese Weise k\u00f6nnen Sie Ihr WordPress-Theme direkt \u00fcber das CSS-Stylesheet in Ihrem WordPress-Dashboard bearbeiten. Beachten Sie jedoch, dass gro\u00dfe \u00c4nderungen, die hier vorgenommen wurden, m\u00f6glicherweise nur schwer r\u00fcckg\u00e4ngig gemacht werden k\u00f6nnen. Daher w\u00fcrde ich empfehlen, ein Backup des urspr\u00fcnglichen CSS Ihres WordPress-Themes zu erstellen und dann \u00c4nderungen vorzunehmen. Ich w\u00fcrde Ihnen auch empfehlen, ein untergeordnetes Thema f\u00fcr Ihre Website zu erstellen. Wenn Sie nicht wissen, was das ist, lesen Sie einfach den n\u00e4chsten Abschnitt und kommen Sie zur\u00fcck.\n<\/p>\n
\n Erstellen Sie ein untergeordnetes Thema und gehen Sie dann in diesem untergeordneten Thema zu Darstellung und dann zu Themen-Editor. Wenn Sie ein untergeordnetes Thema verwenden, wird ein Popup angezeigt, aber das ist kein Grund zur Sorge. Klicken Sie einfach auf \u201eIch verstehe“ und Sie gelangen in das Stylesheet. Wenn Sie \u00c4nderungen an Vorlagendateien wie header.php, functions.php usw. vornehmen m\u00f6chten, m\u00fcssen Sie zuerst PHP lernen und dann Ihre Programmierkenntnisse ausprobieren. Andernfalls bleiben Sie einfach bei der Bearbeitung des Stylesheets.\n<\/p>\n
\n Was ist ein Child-Theme in WordPress?\n<\/p>\n
\n Ein Child-Theme ist eine Nachbildung eines Original-Themes (auch bekannt als Parent-Theme). Das Child-Theme beinhaltet die Funktionalit\u00e4t und das Styling des Parent-Themes. Es wird empfohlen, ein untergeordnetes Thema zu verwenden, wenn Sie den urspr\u00fcnglichen Code intakt halten m\u00f6chten, w\u00e4hrend Sie \u00c4nderungen am Design Ihrer Website vornehmen. So k\u00f6nnen Sie neue, bessere Designs auf dem Child-Theme erstellen und die Funktionalit\u00e4t des Parent-Themes beibehalten. Einige Vorteile der Verwendung eines Child-Themes sind:\n<\/p>\n
- \n
- Sie m\u00fcssen sich keine Sorgen machen, mit dem Originalcode herumzuspielen, da das \u00fcbergeordnete Thema sicher und unbearbeitet ist.\n <\/li>\n
- Sie k\u00f6nnen Codierung verwenden, um die Funktionalit\u00e4t eines \u00fcbergeordneten Designs zu erweitern, damit zu experimentieren und etwas Neues zu erstellen.\n <\/li>\n
- Sie m\u00fcssen kein Thema von Grund auf neu erstellen. Wenn Sie zuf\u00e4llig eine bestimmte Funktion oder Funktion vergessen, ist der Code des \u00fcbergeordneten Themas f\u00fcr Sie da.\n <\/li>\n<\/ul>\n
\n Bei der Verwendung von untergeordneten Themen m\u00fcssen Sie jedoch sehr vorsichtig sein. Einer der Gr\u00fcnde ist, dass es Programmierkenntnisse und Erfahrung erfordern w\u00fcrde. Wenn Sie gerade erst mit CSS, HTML, JavaScript und PHP beginnen, nehmen Sie sich etwas Zeit, um zuerst ein Experte zu werden. Andernfalls k\u00f6nnte die Lernkurve ziemlich hoch sein.\n<\/p>\n
\n Eine andere Sache, die Sie bei der Verwendung eines untergeordneten Themas beachten sollten, ist, dass Sie zuerst die Updates \u00fcberpr\u00fcfen m\u00fcssen. Wenn Ihr \u00fcbergeordnetes Design mit einer Funktion aktualisiert wird, die Sie nicht m\u00f6chten, d\u00fcrfen Sie Ihr WordPress-Design nicht aktualisieren, da es sich im Design Ihres untergeordneten Designs widerspiegeln w\u00fcrde. Wenn eine der Funktionen im Hauptdesign gel\u00f6scht wird und Sie es aktualisieren, kann es manchmal vorkommen, dass Ihr untergeordnetes Design betroffen ist. So erh\u00f6hen Sie Ihre Codierungsarbeit.\n<\/p>\n
\n 2 FTP-Server verwenden
\n<\/h5>\n\n Es besteht die M\u00f6glichkeit, dass Sie nicht direkt auf das Dashboard Ihres Themes zugreifen k\u00f6nnen. Manchmal deaktiviert die Verwendung von Plugins diese Funktion. Sie m\u00fcssen also FTP oder File Transfer Protocol verwenden, um remote auf die Dateien Ihrer Site zuzugreifen. Beginnen Sie mit dem Herunterladen einer beliebigen FTP-Client-Anwendung. Wenden Sie sich an Ihren Host und fragen Sie nach Ihren FTP-Anmeldeinformationen.\n<\/p>\n
\n W\u00e4hrend Sie die Anmeldeinformationen eingeben, erhalten Sie Zugriff auf style.css. Nehmen Sie nun \u00c4nderungen an der Datei vor, speichern Sie Ihre \u00c4nderungen und laden Sie sie wieder auf den Server hoch. Dies k\u00f6nnte eine ziemlich hektische Methode sein, CSS zu Ihrer Website hinzuzuf\u00fcgen, also verwenden Sie sie nur, wenn Sie keinen Zugriff auf Ihr Dashboard haben.\n<\/p>\n
\n Einfache M\u00f6glichkeiten, CSS zu Ihrer WordPress-Site hinzuzuf\u00fcgen
\n<\/h4>\n\n Es gibt zwei einfache Methoden, mit denen Sie CSS zu Ihrer WordPress-Site hinzuf\u00fcgen k\u00f6nnen. Dazu geh\u00f6rt die Verwendung eines WordPress Customizers oder eines Plugins. Es wird viel einfacher sein, Ihren CSS-Code mit diesen Methoden hinzuzuf\u00fcgen. Das Hinzuf\u00fcgen von CSS mit einem WordPress Customizer oder einem Plugin w\u00fcrde Ihren Code auch nicht verschwinden lassen, sobald das Design aktualisiert wird. Ich w\u00fcrde Ihnen jedoch trotzdem empfehlen, eine Sicherungskopie des urspr\u00fcnglichen Codes Ihrer Website aufzubewahren, falls etwas unbeabsichtigt passiert. Lassen Sie uns nun die zwei einfachen M\u00f6glichkeiten zum Hinzuf\u00fcgen von CSS zu Ihrer WordPress-Site \u00fcberpr\u00fcfen.\n<\/p>\n
\n 1 Bearbeitung \u00fcber WordPress Customizer
\n<\/h5>\n\n Melden Sie sich einfach in Ihrem WordPress-Backend an. Klicken Sie auf Aussehen und dann auf Anpassen. Es \u00f6ffnet sich ein Anpassungsbildschirm. Dieser Bildschirm zeigt Ihnen in diesem Moment eine Vorschau Ihrer Website und auf der linken Seite des Bildschirms gibt es einige Optionen zum Anpassen von Elementen wie Farben, Men\u00fcs oder anderen Widgets.\n<\/p>\n
\n Auf der linken Seite des Bildschirms sehen Sie eine Option namens Zus\u00e4tzliches CSS. Hier m\u00fcssen Sie Ihre Magie verspr\u00fchen. Wenn Sie auf das zus\u00e4tzliche CSS klicken, wird eine neue Seite mit dem Code Ihrer Website darauf ge\u00f6ffnet. Jetzt k\u00f6nnen Sie \u00c4nderungen am Code vornehmen und wenn Sie ihn richtig geschrieben haben (keine Fehler!), werden die \u00c4nderungen in der Vorschau angezeigt.\n<\/p>\n
\n Der CSS-Code, den Sie hier schreiben, w\u00fcrde sich nicht \u00e4ndern oder verschwinden, sobald Ihr Design aktualisiert wird! Wenn Sie jedoch zu einem neuen Thema wechseln, wird der hier geschriebene Code gel\u00f6scht. Es wird daher empfohlen, dass Sie Ihr CSS sichern, bevor Sie das Design \u00e4ndern.\n<\/p>\n
\n 2 Verwenden Sie ein Plugin
\n<\/h5>\n\n In diesem Abschnitt werde ich vier verschiedene Plugins besprechen, mit denen Sie CSS f\u00fcr Ihr WordPress-Theme bearbeiten k\u00f6nnen \u2013 Advanced CSS Editor<\/strong>, Modular Custom CSS<\/strong>, SiteOrigin CSS<\/strong> und CSS Hero<\/strong>. Wenn Sie es nicht wissen, WordPress-Plugins sind kleine Softwareteile, die an WordPress angeh\u00e4ngt werden k\u00f6nnen, um seine Funktionalit\u00e4t zu erweitern. Einige Plugins sind kostenlos erh\u00e4ltlich, w\u00e4hrend Sie f\u00fcr einige etwas Geld bezahlen m\u00fcssen, um sie zu Ihrer WordPress-Site hinzuzuf\u00fcgen. Plugins k\u00f6nnen Ihnen helfen, CSS mit nur wenigen Klicks zu bearbeiten oder zu Ihrer WordPress-Site hinzuzuf\u00fcgen!\n<\/p>\n
\n Verwenden des Advanced CSS Editor-Plug-ins\n<\/p>\n
\n Das erste Plugin, das ich empfehlen w\u00fcrde, hei\u00dft Advanced CSS Editor. Mit diesem Plugin k\u00f6nnen Sie CSS hinzuf\u00fcgen, um festzulegen, wie Ihre Website auf einem Desktop, Tablet und Mobiltelefon aussieht. Auf diese Weise k\u00f6nnen Sie Ihre Website f\u00fcr jedes Ger\u00e4t optimieren. Installieren Sie das Plugin, um mit der Bearbeitung zu beginnen. Gehen Sie zu Ihrem WordPress-Dashboard, klicken Sie auf Aussehen und dann auf Customizer. Sie sehen eine neue Option namens Erweiterter CSS-Editor. F\u00fcgen Sie das gew\u00fcnschte benutzerdefinierte CSS hinzu und speichern Sie die \u00c4nderungen.\n<\/p>\n
\n Ein gro\u00dfer Vorteil der Verwendung dieses Plugins besteht darin, dass Sie steuern k\u00f6nnen, wie Ihre Website auf verschiedenen Ger\u00e4ten aussieht. Dar\u00fcber hinaus k\u00f6nnen Sie immer noch die Technik verwenden, die ich in Punkt 1 beschrieben habe, um Ihr WordPress-Theme zu bearbeiten. F\u00fcr einige Personen, die nicht an das Programmieren gew\u00f6hnt sind, kann es jedoch eine Menge Arbeit sein, \u00c4nderungen f\u00fcr jeden Ger\u00e4tetyp vorzunehmen. Sie m\u00fcssten erst lernen, CSS f\u00fcr jeden Ger\u00e4tetyp zu schreiben.\n<\/p>\n
\n Verwenden des modularen benutzerdefinierten CSS-Plugins\n<\/p>\n
\n Das zweite Plugin, das ich empfehlen w\u00fcrde, ist Modular Custom CSS. Dieses Plugin hilft Ihnen, themenbezogene \u00c4nderungen an Ihrer WordPress-Site vorzunehmen. Wenn Sie beispielsweise derzeit ein Design verwenden und \u00c4nderungen an diesem Design mit Modular Custom CSS vornehmen. Dann entscheiden Sie sich f\u00fcr ein anderes Thema f\u00fcr Ihre Website. Die im ersten Thema vorgenommenen \u00c4nderungen w\u00fcrden also nicht gel\u00f6scht. Sie bleiben in diesem Plugin erhalten. Mit diesem Plugin k\u00f6nnen Sie auch globales CSS hinzuf\u00fcgen. Dieses CSS w\u00fcrde trotz Theme-\u00c4nderungen gleich bleiben.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-323301-6383cdec124a5.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-323301-6383cdefbb9ad.webp\")
<\/a><\/p>\n