So fügen Sie CSS zu WordPress hinzu: 5 Methoden

Veröffentlicht: 2021-12-11

Möchten Sie CSS anwenden und den Stil Ihrer Website bearbeiten? Wenn ja, ist dieser Beitrag für Sie. In diesem Leitfaden zeigen wir Ihnen verschiedene Möglichkeiten, CSS zu WordPress hinzuzufügen, damit Sie Ihre Website anpassen und einen Eindruck bei Ihren Besuchern hinterlassen können.

Obwohl WordPress viele Designs und Vorlagen hat, die Sie verwenden können, werden Sie früher oder später CSS-Code hinzufügen, wenn Sie das Erscheinungsbild Ihrer Website ändern möchten.

Das Hinzufügen von CSS zu einer Website ist ganz einfach. Wir haben bereits gesehen, wie man CSS mit dem Browser-Entwicklertool anwendet, aber es gibt noch andere Möglichkeiten. All diese verschiedenen Methoden haben Vor- und Nachteile, daher kann es für Anfänger schwierig sein zu verstehen, wie CSS für ihre spezifische Situation am besten hinzugefügt werden kann. Aus diesem Grund zeigen wir Ihnen in diesem Leitfaden verschiedene Möglichkeiten, CSS-Stile zu einer WordPress-Website hinzuzufügen .

So fügen Sie CSS zu WordPress hinzu

Es gibt mehrere Möglichkeiten, den CSS-Stil auf eine WordPress-Site anzuwenden:

  1. Über den Theme Customizer
  2. Bearbeiten von Child-Theme-Dateien
  3. Hochladen Ihrer eigenen CSS-Datei
  4. Wenden Sie CSS mit Hooks auf den Header an
  5. Fügen Sie CSS zum Backend hinzu

Lassen Sie uns einen Blick auf jede Methode werfen, damit Sie die für Sie am besten geeignete auswählen können.

HINWEIS : Wir werden die Struktur von CSS in diesem Beitrag nicht im Detail erklären, daher empfehlen wir Ihnen, ein grundlegendes Verständnis von CSS zu haben, um dieser Anleitung ohne Probleme folgen zu können.

Als vorherigen Schritt zum Anwenden von CSS empfehlen wir Ihnen, das Browser-Entwicklertool zu verwenden, um bestimmte HTML-Elemente zu finden, die Sie ändern möchten. Wenn Sie sich nicht sicher sind, wie das geht, werfen Sie einen Blick auf unsere Anleitung zur Anwendung von CSS mit dem Browser-Entwicklertool.

1) Wenden Sie CSS mit dem Theme Customizer an

Der einfachste und schnellste Weg, benutzerdefinierten CSS-Code zu WordPress hinzuzufügen, besteht darin, ihn in den zusätzlichen CSS -Editor des Design-Anpassers einzufügen. Dies ist der eingebaute CSS-Editor von WordPress, der standardmäßig auf allen Websites vorhanden ist. Beachten Sie jedoch, dass einige Designs und Plugins diese Funktion möglicherweise deaktivieren.

Um Ihr CSS mit dem Design-Anpasser anzuwenden, gehen Sie zu Ihrem Dashboard und gehen Sie zu Aussehen > Anpassen > Zusätzliches CSS , um den CSS-Editor zu öffnen. Dort sehen Sie den CSS-Code Ihrer Website und können Ihren Code hinzufügen.

Wenden Sie Ihr benutzerdefiniertes CSS an, indem Sie es in den zusätzlichen CSS-Editor des Design-Anpassers einfügen.

Einer der größten Vorteile dieser Methode besteht darin, dass Sie das Ergebnis der CSS-Anpassung in Echtzeit auf der rechten Seite des Bildschirms anzeigen können.

Sobald Sie Ihren Code hinzugefügt haben, wird er in der Datenbank in der Tabelle *_posts unter dem Beitragstyp custom_css gespeichert . Obwohl Sie hier alle Arten von Anpassungen vornehmen können, ist dies aus Leistungsgründen keine empfohlene Vorgehensweise für eine große Liste von CSS-Regeln.

2) Bearbeiten von Child-Theme-Dateien

Eine andere Möglichkeit, CSS-Stil zu WordPress hinzuzufügen, besteht darin, die CSS-Dateien des untergeordneten Designs zu bearbeiten. Diese Methode hat eine bessere Leistung als das direkte Anwenden von Code aus dem Customizer, da sie geladen wird, ohne dass sie aus der Datenbank abgerufen werden muss.

Die meisten untergeordneten Themen haben eine style.css -Datei, sodass Sie dort einfach Ihr benutzerdefiniertes CSS hinzufügen können. Um die style.css -Datei Ihres Child-Themes zu finden, gehen Sie in Ihrem WordPress-Dashboard zu Aussehen > Theme-Editor . Drücken Sie dann auf das Dropdown-Menü oben rechts, wählen Sie Ihr untergeordnetes Design aus und klicken Sie auf die style.css -Datei, wie unten gezeigt.

Einfügen von CSS-Code direkt in die Child-Theme-Dateien

Wenn Ihr untergeordnetes Design keine style.css -Datei oder eine andere Datei mit der Erweiterung .css hat, können Sie sie erstellen und anwenden, wie im nächsten Abschnitt beschrieben.

Alternativ haben einige Child-Themes einen CSS-Ordner mit mehreren Dateien darin. Stellen Sie in diesem Fall sicher, dass Sie die richtige style.css -Datei bearbeiten.

3) Laden Sie Ihre eigene CSS-Datei hoch

Wenn Sie großen benutzerdefinierten CSS-Code zu WordPress hinzufügen möchten, empfiehlt es sich, ihn in einer separaten Datei zu haben und ihn in Ihre Website-Dateien auf dem Server hochzuladen. Mal sehen, wie es Schritt für Schritt geht.

3.1) Erstellen Sie die CSS-Datei mit einem Code-Editor

Dazu müssen Sie einen Code-Editor wie Visual Studio Code, Sublime Text oder einen anderen verwenden, der CSS-Dateien unterstützt.

Erstellen Sie eine neue Datei mit der CSS-Erweiterung und fügen Sie Ihren Code dort ein. In diesem Beispiel haben wir die Datei my-styles.css benannt .
Erstellen Sie die CSS-Datei mit einem Code-Editor

Nachdem Sie Ihren Code eingefügt haben, speichern Sie die Datei und fahren Sie mit dem nächsten Schritt fort.

3.2) Laden Sie die Datei in den Child-Theme-Ordner hoch

Wenn Ihr untergeordnetes Design ein CSS-Verzeichnis hat, kopieren Sie einfach Ihre Datei und fügen Sie sie dort ein. Alternativ können Sie es auch direkt in das Hauptverzeichnis des untergeordneten Themas hochladen. Machen Sie sich keine Gedanken über den Speicherort im untergeordneten Themenordner, wir werden im nächsten Schritt auf den Dateipfad abzielen.

Verwenden Sie nun das cPanel oder einen FTP-Client wie FileZilla, um die Datei hochzuladen.

Wenn Sie sich auf einem localhost-Server befinden, können Sie die Datei einfach kopieren und in den untergeordneten Themenordner einfügen, der sich im öffentlichen Ordner Ihres localhost-Servers befindet.

Nach unserem Beispiel fügen wir unsere my-styles.css- Datei in das Child-Theme ein.

Laden Sie die Datei in den Child-Theme-Ordner hoch.

3.3) Fügen Sie Ihre benutzerdefinierte .CSS-Datei in die Warteschlange ein

Jetzt müssen Sie Ihre benutzerdefinierte CSS-Datei in die Datei functions.php Ihres untergeordneten Designs einreihen, damit es funktioniert. Fügen Sie das folgende PHP-Skript nach jeglichem Code in der functions.php ein Datei.

 Funktion meine_Stile() {
wp_register_style( 'meine-stile', get_stylesheet_directory_uri() . '/meine-stile.css');
wp_enqueue_style( 'meine-stile');
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

Stellen Sie sicher, dass die neu erstellte Datei korrekt vom Pfad aufgerufen wird, je nachdem, wo sich die Datei im Themenverzeichnis befindet. Denken Sie auch daran, den Namen der Datei zu ändern (in diesem Beispiel my-styles.css ).

Sie können das folgende Snippet verwenden, um zu überprüfen, ob der Pfad korrekt ist oder nicht.

 add_action('wp_head',function(){
echo get_stylesheet_directory_uri() . '/my-styles.css';
});

Stellen Sie Ihre BENUTZERDEFINIERTE CSS-Datei in die Warteschlange

Das ist es! So können Sie CSS auf WordPress anwenden, indem Sie Ihre eigene CSS-Datei hochladen.

4) Wenden Sie CSS mit einem Hook auf den Header-Bereich an

Wenn Sie über Programmierkenntnisse verfügen, können Sie Ihrer Website auch CSS hinzufügen, indem Sie Hooks verwenden .

Der wp_head() ist sehr nützlich bei der Entwicklung von Websites. Obwohl es nicht empfohlen wird, es zum Einfügen eines Skripts in das HTML-Tag <head> zu verwenden, ermöglicht es Ihnen, schnelle Tests und Debugging durchzuführen.

Wenn Sie mit mehreren CSS-Stylesheets oder auf komplexen Websites arbeiten und etwas nicht wie erwartet funktioniert, können Sie Ihren CSS-Code mit diesem Hook direkt im Abschnitt <head> hinzufügen.

 add_Action('wp_head','my_head_css');
Funktion my_head_css(){
Echo "<Stil>
.site-branding{
    Hintergrund: rot;
    Breite: 200px;
    Polsterung: 11px;
    Randradius: 23px; }
</style>
";}

Mit diesem Skript ändern wir beispielsweise die Größe der Überschrift, die Hintergrundfarbe, den Rand und die Füllung.

Auf diese Weise können Sie sicherstellen, dass das CSS-Skript über jede andere CSS-Datei auf das Frontend angewendet oder auf andere Weise in die Website eingebunden wird.

5) Fügen Sie CSS zum Backend hinzu

Schließlich gibt es noch eine weitere Möglichkeit, CSS-Stil zu WordPress hinzuzufügen. Sie können benutzerdefiniertes CSS auf das Backend anwenden, indem Sie den admin_head() wie folgt verwenden:

 add_Action('admin_head', 'my_custom_fonts');
Funktion meine_benutzerdefinierten_Schriftarten() {
Echo '<Stil>
#adminmenu{
    Hintergrund: #602e93;}
</style>';
}

In diesem Beispiel ändern wir die Hintergrundfarbe (#602e93).

Methode 4 und 5 können sehr nützlich sein und Ihnen helfen, Zeit zu sparen, indem Sie ein CSS-Skript direkt in den HTML-Abschnitt <head> einfügen. Es wird jedoch nicht empfohlen, und Sie sollten diese Methode nicht zum dauerhaften Anwenden von Stilen verwenden.

Fazit

Alles in allem können Sie mit ein wenig CSS das Erscheinungsbild Ihrer Website anpassen. Das Hinzufügen von CSS ist einfach, aber es gibt mehrere Möglichkeiten, dies zu tun, sodass es schwierig sein kann, zu wissen, welche Methode Sie verwenden sollten.

In diesem Tutorial haben wir Ihnen fünf verschiedene Methoden gezeigt, um CSS zu Ihrer WordPress-Site hinzuzufügen:

  1. Über den Theme Customizer
  2. Bearbeiten von Child-Theme-Dateien
  3. Hochladen Ihrer eigenen CSS-Datei
  4. Wenden Sie CSS mit Hooks auf den Header an
  5. Fügen Sie CSS zum Backend hinzu

Jede Methode hat ihre Vor- und Nachteile. Das Hinzufügen von CSS aus dem Theme Customizer ist beispielsweise einfach und wird mit einer Echtzeitvorschau geliefert. Dies ist jedoch keine empfohlene Vorgehensweise für eine große Liste von CSS-Regeln. Alternativ kannst du die Dateien deines Child-Themes bearbeiten oder deine eigene CSS-Datei in dein Child-Theme hochladen.

Auch wenn dies nicht empfohlen wird, können Sie Hooks verwenden, um ein Skript in das HTML-Tag <head> einzufügen, um schnelle Tests durchzuführen und Ihre Site zu debuggen.

Haben Sie CSS zu Ihrer Website hinzugefügt? Welche Methode hast du verwendet? Kennen Sie eine andere Methode, die wir einbeziehen sollten? Lass es uns in den Kommentaren unten wissen!