So passen Sie ein WordPress-Theme mit CSS an

Wussten Sie, dass Sie mit Ihrer WordPress-Site experimentieren und ihr Aussehen mit CSS ändern können? Sie können kleine ästhetische Änderungen hinzufügen, Farben hinzufügen, das Layout ändern oder sogar Ihr WordPress-Theme komplett ändern.

Wenn Sie die Kontrolle über das Erscheinungsbild Ihrer Website haben, haben Sie die Möglichkeit, sie so zu gestalten, wie Sie es möchten.

Sie können der Website Ihrer Marke Ihre persönliche Note verleihen, wodurch sie sich deutlich von anderen Personen oder Unternehmen unterscheidet, die dasselbe WordPress-Theme verwenden!

Lassen Sie uns in diesem Beitrag einen genaueren Blick darauf werfen, wie Sie ein WordPress-Theme mit CSS anpassen können.

Was ist CSS?

CSS oder Cascading Style Sheets ist eine Websprache, die zur Darstellung von Webseiten verwendet wird. Mit CSS können Sie das Layout, die Farben, die Schriftart, den Hintergrund und andere Elemente festlegen, die unsere Webseiten für die Benutzer präsentabel machen können. Aus diesem Grund nennen wir die clientseitige CSS-Frontend-Sprache, da sie auf der Benutzerseite ausgeführt wird. CSS wird in Kombination mit HTML und Javascript verwendet, um die Websites responsive zu machen. Wenn Sie denken, dass Sie ein Hardcore-Programmierer sein müssen, um CSS zu lernen und zu implementieren, ist das nicht wahr. Sie können CSS leicht lernen und es verwenden, um die Präsentation Ihrer Website zu ändern, selbst wenn Sie vorher keine Programmierkenntnisse haben.

Was ist WordPress?

WordPress ist der beliebteste und einfachste Weg, um Ihre Website oder Ihren Blog zu starten. Technisch gesehen ist WordPress ein Open-Source-Content-Management-System. Es behandelt alle wichtigen Aspekte einer Website wie Inhalt, Layout, Sicherheit usw. Mit WordPress können Sie jede Art von Website erstellen. Zum Beispiel Business-Websites, E-Commerce-Websites, Portfolios, Lebensläufe, soziale Netzwerke usw. WordPress kann kostenlos verwendet werden und wird mit verschiedenen Themen und Plugins geliefert. Man kann das Aussehen und Verhalten seiner WordPress-Seite mit CSS ändern.

CSS und WordPress

Um mit der Bearbeitung Ihres WordPress-Themes zu beginnen, müssen Sie zunächst einige Dinge verstehen – Vorlagendateien, Vorlagen-Tags und CSS-Stylesheet. Vorlagendateien steuern Ihr WordPress-Theme. Möglicherweise sehen Sie verschiedene Dateien wie header.php, archive.php. Dies sind Vorlagendateien, die Ihr WordPress-Theme steuern. Vorlagen-Tags werden verwendet, um diese Dateien und andere Datenbankelemente zu steuern. CSS-Stylesheet oder style.css ist die Datei, nach der Sie suchen müssen, um das Aussehen Ihrer Website zu ändern. Sie werden den Code in style.css bearbeiten, um Ihr WordPress-Design anzupassen.

So passen Sie ein WordPress-Theme mit CSS an

Zunächst müssen Sie verstehen, dass Sie, wenn Sie Ihr WordPress-Theme mit CSS anpassen möchten, entweder bestimmten Code hinzufügen oder den bereits geschriebenen Code bearbeiten müssen. Ich würde Ihnen empfehlen, zumindest einige Grundlagen von CSS, HTML, JavaScript und PHP zu lernen, bevor Sie mit der Bearbeitung Ihres Designs beginnen.

Eine weitere zu beachtende Sache ist, dass, wenn Sie Änderungen im Stylesheet Ihres WordPress-Themas vornehmen, diese Änderungen entfernt werden, sobald Ihr Theme aktualisiert wird. Sie müssen also etwas über Child-Themes lernen und ein Child-Theme verwenden, um Änderungen mit style.css, functions.php oder anderen Theme-Vorlagendateien vorzunehmen. Ich habe später in diesem Artikel über untergeordnete Themen gesprochen.

Es gibt zwei Möglichkeiten, CSS zu deinem Design zu bearbeiten oder hinzuzufügen

1 Verwenden des Dashboards

Auf diese Weise können Sie Ihr WordPress-Theme direkt über das CSS-Stylesheet in Ihrem WordPress-Dashboard bearbeiten. Beachten Sie jedoch, dass große Änderungen, die hier vorgenommen wurden, möglicherweise nur schwer rückgängig gemacht werden können. Daher würde ich empfehlen, ein Backup des ursprünglichen CSS Ihres WordPress-Themes zu erstellen und dann Änderungen vorzunehmen. Ich würde Ihnen auch empfehlen, ein untergeordnetes Thema für Ihre Website zu erstellen. Wenn Sie nicht wissen, was das ist, lesen Sie einfach den nächsten Abschnitt und kommen Sie zurück.

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 „Ich verstehe“ und Sie gelangen in das Stylesheet. Wenn Sie Änderungen an Vorlagendateien wie header.php, functions.php usw. vornehmen möchten, müssen Sie zuerst PHP lernen und dann Ihre Programmierkenntnisse ausprobieren. Andernfalls bleiben Sie einfach bei der Bearbeitung des Stylesheets.

Was ist ein Child-Theme in WordPress?

Ein Child-Theme ist eine Nachbildung eines Original-Themes (auch bekannt als Parent-Theme). Das Child-Theme beinhaltet die Funktionalität und das Styling des Parent-Themes. Es wird empfohlen, ein untergeordnetes Thema zu verwenden, wenn Sie den ursprünglichen Code intakt halten möchten, während Sie Änderungen am Design Ihrer Website vornehmen. So können Sie neue, bessere Designs auf dem Child-Theme erstellen und die Funktionalität des Parent-Themes beibehalten. Einige Vorteile der Verwendung eines Child-Themes sind:

• Sie müssen sich keine Sorgen machen, mit dem Originalcode herumzuspielen, da das übergeordnete Thema sicher und unbearbeitet ist.
• Sie können Codierung verwenden, um die Funktionalität eines übergeordneten Designs zu erweitern, damit zu experimentieren und etwas Neues zu erstellen.
• Sie müssen kein Thema von Grund auf neu erstellen. Wenn Sie zufällig eine bestimmte Funktion oder Funktion vergessen, ist der Code des übergeordneten Themas für Sie da.

Bei der Verwendung von untergeordneten Themen müssen Sie jedoch sehr vorsichtig sein. Einer der Gründe ist, dass es Programmierkenntnisse und Erfahrung erfordern würde. Wenn Sie gerade erst mit CSS, HTML, JavaScript und PHP beginnen, nehmen Sie sich etwas Zeit, um zuerst ein Experte zu werden. Andernfalls könnte die Lernkurve ziemlich hoch sein.

Eine andere Sache, die Sie bei der Verwendung eines untergeordneten Themas beachten sollten, ist, dass Sie zuerst die Updates überprüfen müssen. Wenn Ihr übergeordnetes Design mit einer Funktion aktualisiert wird, die Sie nicht möchten, dürfen Sie Ihr WordPress-Design nicht aktualisieren, da es sich im Design Ihres untergeordneten Designs widerspiegeln würde. Wenn eine der Funktionen im Hauptdesign gelöscht wird und Sie es aktualisieren, kann es manchmal vorkommen, dass Ihr untergeordnetes Design betroffen ist. So erhöhen Sie Ihre Codierungsarbeit.

2 FTP-Server verwenden

Es besteht die Möglichkeit, dass Sie nicht direkt auf das Dashboard Ihres Themes zugreifen können. Manchmal deaktiviert die Verwendung von Plugins diese Funktion. Sie müssen 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.

Während Sie die Anmeldeinformationen eingeben, erhalten Sie Zugriff auf style.css. Nehmen Sie nun Änderungen an der Datei vor, speichern Sie Ihre Änderungen und laden Sie sie wieder auf den Server hoch. Dies könnte eine ziemlich hektische Methode sein, CSS zu Ihrer Website hinzuzufügen, also verwenden Sie sie nur, wenn Sie keinen Zugriff auf Ihr Dashboard haben.

Einfache Möglichkeiten, CSS zu Ihrer WordPress-Site hinzuzufügen

Es gibt zwei einfache Methoden, mit denen Sie CSS zu Ihrer WordPress-Site hinzufügen können. Dazu gehört die Verwendung eines WordPress Customizers oder eines Plugins. Es wird viel einfacher sein, Ihren CSS-Code mit diesen Methoden hinzuzufügen. Das Hinzufügen von CSS mit einem WordPress Customizer oder einem Plugin würde Ihren Code auch nicht verschwinden lassen, sobald das Design aktualisiert wird. Ich würde Ihnen jedoch trotzdem empfehlen, eine Sicherungskopie des ursprünglichen Codes Ihrer Website aufzubewahren, falls etwas unbeabsichtigt passiert. Lassen Sie uns nun die zwei einfachen Möglichkeiten zum Hinzufügen von CSS zu Ihrer WordPress-Site überprüfen.

1 Bearbeitung über WordPress Customizer

Melden Sie sich einfach in Ihrem WordPress-Backend an. Klicken Sie auf Aussehen und dann auf Anpassen. Es öffnet 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üs oder anderen Widgets.

Auf der linken Seite des Bildschirms sehen Sie eine Option namens Zusätzliches CSS. Hier müssen Sie Ihre Magie versprühen. Wenn Sie auf das zusätzliche CSS klicken, wird eine neue Seite mit dem Code Ihrer Website darauf geöffnet. Jetzt können Sie Änderungen am Code vornehmen und wenn Sie ihn richtig geschrieben haben (keine Fehler!), werden die Änderungen in der Vorschau angezeigt.

Der CSS-Code, den Sie hier schreiben, würde sich nicht ändern oder verschwinden, sobald Ihr Design aktualisiert wird! Wenn Sie jedoch zu einem neuen Thema wechseln, wird der hier geschriebene Code gelöscht. Es wird daher empfohlen, dass Sie Ihr CSS sichern, bevor Sie das Design ändern.

2 Verwenden Sie ein Plugin

In diesem Abschnitt werde ich vier verschiedene Plugins besprechen, mit denen Sie CSS für Ihr WordPress-Theme bearbeiten können – Advanced CSS Editor, Modular Custom CSS, SiteOrigin CSS und CSS Hero. Wenn Sie es nicht wissen, WordPress-Plugins sind kleine Softwareteile, die an WordPress angehängt werden können, um seine Funktionalität zu erweitern. Einige Plugins sind kostenlos erhältlich, während Sie für einige etwas Geld bezahlen müssen, um sie zu Ihrer WordPress-Site hinzuzufügen. Plugins können Ihnen helfen, CSS mit nur wenigen Klicks zu bearbeiten oder zu Ihrer WordPress-Site hinzuzufügen!

Verwenden des Advanced CSS Editor-Plug-ins

Das erste Plugin, das ich empfehlen würde, heißt Advanced CSS Editor. Mit diesem Plugin können Sie CSS hinzufügen, um festzulegen, wie Ihre Website auf einem Desktop, Tablet und Mobiltelefon aussieht. Auf diese Weise können Sie Ihre Website für jedes Gerät 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ügen Sie das gewünschte benutzerdefinierte CSS hinzu und speichern Sie die Änderungen.

Ein großer Vorteil der Verwendung dieses Plugins besteht darin, dass Sie steuern können, wie Ihre Website auf verschiedenen Geräten aussieht. Darüber hinaus können Sie immer noch die Technik verwenden, die ich in Punkt 1 beschrieben habe, um Ihr WordPress-Theme zu bearbeiten. Für einige Personen, die nicht an das Programmieren gewöhnt sind, kann es jedoch eine Menge Arbeit sein, Änderungen für jeden Gerätetyp vorzunehmen. Sie müssten erst lernen, CSS für jeden Gerätetyp zu schreiben.

Verwenden des modularen benutzerdefinierten CSS-Plugins

Das zweite Plugin, das ich empfehlen würde, ist Modular Custom CSS. Dieses Plugin hilft Ihnen, themenbezogene Änderungen an Ihrer WordPress-Site vorzunehmen. Wenn Sie beispielsweise derzeit ein Design verwenden und Änderungen an diesem Design mit Modular Custom CSS vornehmen. Dann entscheiden Sie sich für ein anderes Thema für Ihre Website. Die im ersten Thema vorgenommenen Änderungen würden also nicht gelöscht. Sie bleiben in diesem Plugin erhalten. Mit diesem Plugin können Sie auch globales CSS hinzufügen. Dieses CSS würde trotz Theme-Änderungen gleich bleiben.

Um dieses Plugin zu verwenden, laden Sie zunächst das Plugin herunter und fügen Sie es Ihrer WordPress-Site hinzu. Klicken Sie dann auf Darstellung -> Customizer -> Zusätzliches CSS. Der einzige Nachteil, den ich bei dieser Methode feststellen konnte, ist, dass das Hinzufügen von globalem CSS möglicherweise nicht immer die beste Idee ist. Manchmal funktioniert das globale CSS möglicherweise nicht mit einem Design und es kann ein Chaos entstehen.

Verwenden des SiteOrigin-CSS-Plugins

Das dritte Plugin, das ich empfehle, ist als SiteOrigin CSS bekannt. Dieses Plugin bietet Ihnen visuelle Steuerelemente, mit denen Sie das Erscheinungsbild Ihrer Website in Echtzeit bearbeiten können. Dieses Plugin ist sowohl für Anfänger als auch für fortgeschrittene CSS-Benutzer geeignet. Die Echtzeit-Vorschau und die visuellen Steuerelemente helfen Anfängern, während fortgeschrittene Benutzer mit der automatischen Code-Vervollständigungsfunktion dieses Plugins schnell programmieren können.

Dieses Plugin öffnet einen eigenständigen CSS-Editor für WordPress. Um auf dieses Plugin zuzugreifen, laden Sie zuerst das Plugin herunter und fügen Sie es Ihrer WordPress-Site hinzu. Klicken Sie dann auf Darstellung -> Benutzerdefiniertes CSS. Eine großartige Funktion dieses Plugins ist, dass Sie jedes Element auf Ihrer Website bearbeiten können, indem Sie einfach darauf klicken. Sie können einige einfache Elemente des Designs ändern, ohne CSS zu verwenden. Ein Nachteil einer solchen Funktionalität könnte jedoch sein, dass es schwierig sein kann, Änderungen an vielen verschiedenen Elementen eines Designs nachzuverfolgen.

Verwendung des CSS Hero-Plugins

Nun, das ist etwas Interessantes. Meine dritte Plugin-Empfehlung beinhaltet ein Plugin, mit dem Sie das CSS auf Ihrer WordPress-Seite per Drag & Drop bearbeiten können. Es ist als CSS Hero bekannt. Um CSS mit diesem Plugin zu bearbeiten, müssen Sie nur mit der Maus über das Element fahren, das Sie ändern möchten, und darauf klicken. Dann können Sie es nach Belieben anpassen. Hier sind ein paar erstaunliche Funktionen dieses Plugins:

• Dieses Plugin beinhaltet eine einfache Bearbeitung von Schriftstilen und Topografie. Das Plugin unterstützt Google Fonts und TypeKit-Schriftarten.
• Sie können auch einen Farbwähler verwenden und mit einer Live-Farb- und Hintergrundänderung experimentieren. Sie können Ihre zuletzt verwendeten Farben leicht finden.
• Sie können einfach einen Schieberegler ziehen und sehen, wie die Ränder aussehen.
• Das Plugin unterstützt auch Website-Elemente wie Farbverlauf, Boxschatten, Textschatten und andere moderne CSS-Eigenschaften.
• Mit diesem Plugin können Sie Schnappschüsse Ihrer Bearbeitungen speichern. Sie müssen also nicht alles live machen. Arbeiten Sie einfach weiter und veröffentlichen Sie die endgültige Version.
• Dieses Plugin wirkt sich nicht auf Ihre Designdateien aus. Sie müssen sich also keine Sorgen machen, dass Updates Ihre Änderungen ruinieren.

Vergleich der verschiedenen Möglichkeiten zum Anpassen des WordPress-Themes mit CSS

Heute haben wir also 4 verschiedene Möglichkeiten kennengelernt, eine WordPress-Seite mit CSS anzupassen. Sie können CSS über das Dashboard zu Ihrem WordPress-Theme bearbeiten oder hinzufügen oder eine FTP-Anwendung verwenden. Sie können WordPress Customizer verwenden, um CSS hinzuzufügen oder zu bearbeiten, oder Sie können schließlich einige Plugins verwenden, um Ihr WordPress-Design mit CSS anzupassen.

• Wenn Sie mit WordPress und CSS ziemlich neu sind, würde ich Ihnen empfehlen, den WordPress Customizer zu verwenden, um CSS zu bearbeiten oder hinzuzufügen. Auf diese Weise können Sie die Änderungen in der Vorschau überprüfen und müssen sich keine Sorgen machen, dass Änderungen entfernt werden, sobald das Design aktualisiert wird.
• Wenn Sie etwas Erfahrung mit CSS und WordPress haben und bereits an Plugins gearbeitet haben, würde ich Ihnen empfehlen, eines der vier Plugins zu wählen, die ich Ihnen heute mitgeteilt habe. Die Plugins bieten bessere Optionen und Spielraum zur Verbesserung Ihrer Website.
• Wenn Sie ein CSS-Veteran sind. Sie haben Webseiten erstellt und wissen, wie CSS funktioniert. Dann würde ich Ihnen empfehlen, das Dashboard oder FTP zu verwenden, um Änderungen direkt im WordPress-Stylesheet vorzunehmen.

Es ist wichtig, wie Ihre Website aussieht

Das Design, Layout, Farben, Schriftarten oder Thema Ihrer Website ist sehr wichtig. Es hilft dabei, das Gefühl zu vermitteln, das der Benutzer über Ihr Unternehmen haben soll. Es kann ein einzigartiges Markenimage aufbauen und Ihre Identität definieren.

Das Design und Layout Ihrer Website spielen ebenfalls eine wichtige Rolle bei der Verbesserung der Benutzererfahrung. Wenn Ihr Design nicht so gut ist, Sie Anzeigen an den falschen Positionen platziert haben, die Farben Ihrer Website ziemlich ablenken, all dies könnte die Benutzererfahrung beeinträchtigen.

Ein großartiges Design und Layout können Ihnen helfen, zu steuern, wie die Nachricht an die Benutzer übermittelt wird. Sie können ihre Aufmerksamkeit zum richtigen Zeitpunkt erregen und sie auf einen Weg führen, der Ihre Ziele erfüllt. Das Ändern, Hinzufügen oder Bearbeiten des CSS Ihrer WordPress-Site liegt also in Ihrer Verantwortung. Die Verantwortung, Ihre Website für die Benutzer besser zu machen.

Ich hoffe, diese Tipps und Tricks zum Anpassen Ihres WordPress-Themes mit CSS helfen Ihnen dabei, Ihrer Website eine personalisierte Note zu verleihen. Wenn Sie einen von ihnen verwenden oder in der Vergangenheit verwendet haben, teilen Sie Ihre Erfahrungen im Kommentarbereich mit und verbreiten Sie die Nachricht!