Wenn es darum geht, eine Website auf der beliebten WordPress-Plattform zu erstellen, besteht eine der wichtigsten Aufgaben darin, das Aussehen Ihrer Website anzupassen. Möglicherweise müssen Sie jedoch einige zusätzliche CSS-Stile hinzufügen, um die visuelle Darstellung Ihres Inhalts zu verbessern. In diesem Artikel werden wir uns ansehen, wie man CSS-Stile in WordPress richtig einfügt.
Der erste Schritt besteht darin, eine separate CSS-Datei für Ihre Stile zu erstellen. Sie können einen beliebigen Texteditor zum Erstellen dieser Datei verwenden, es wird jedoch empfohlen, einen dedizierten Code-Editor wie Visual Studio Code oder Sublime Text zu verwenden.
Nachdem Sie die CSS-Datei erstellt haben, müssen Sie sie mit Ihrer WordPress-Website verbinden. Sie müssen die Datei functions öffnen.php im Ordner Ihres WordPress-Themas. In dieser Datei finden Sie die Funktion wp_enqueue_scripts, die für das Verbinden von Stilen und Skripten mit Ihrer Website verantwortlich ist. Sie müssen den folgenden Code hinzufügen:
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css');
In diesem Code ist 'custom-style' die ID Ihres Stils, die Sie selbst auswählen können, damit Sie später nicht verwirrt werden. 'get_stylesheet_directory_uri()' ist eine WordPress-Funktion, die die URL des aktuellen Themas zurückgibt, und '/custom.css' ist der Pfad zu Ihrer CSS-Datei.
Nachdem Sie diesen Code zur functions-Datei hinzugefügt haben.php, Ihre CSS-Stile sind erfolgreich mit Ihrer WordPress-Website verbunden. Jetzt können Sie Ihre CSS-Datei öffnen und Ihre eigenen Stile hinzufügen, um das Aussehen Ihrer WordPress-Website zu ändern.
Verbinden von CSS-Stilen in WordPress
Um Ihrer Website auf WordPress CSS-Stile hinzuzufügen, müssen Sie die Datei functions öffnen.php Ihres Themas.
Sie können dies tun, indem Sie zum WordPress-Dashboard gehen und "Aussehen" > "Design-Editor" wählen. Suchen und wählen Sie dann die Datei functions aus.php.
Innerhalb der functions-Datei.php Sie sollten die Funktion wp_enqueue_scripts() finden. Verwenden Sie diese Funktion, um Stildateien zu registrieren und zu verbinden.
Um Ihre CSS-Stylesheet-Datei hinzuzufügen, können Sie den folgenden Code verwenden:
| Kode | Die Beschreibung |
|---|---|
| wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom-css/style.css' ); | Registrieren und Verbinden einer Style-Datei.css aus dem Custom-CSS-Ordner Ihres Themas. |
Nachdem Sie diesen Code zur functions-Datei hinzugefügt haben.php, speichern Sie die Änderungen.
Jetzt wird Ihre Stylesheet-Datei automatisch mit Ihrer WordPress-Website verbunden. Wenn Sie neue Stile ändern oder hinzufügen möchten, können Sie Ihre CSS-Stylesheet-Datei bearbeiten.
Beachten Sie, dass Sie den richtigen Pfad zu Ihrer CSS-Stylesheet-Datei angeben müssen. Wenn sich Ihre Stildatei in einem anderen Ordner befindet, müssen Sie den Pfad im Code ändern.
Jetzt wissen Sie, wie Sie CSS-Stile in WordPress einbinden können. Dies ermöglicht es Ihnen, das Aussehen Ihrer Website leicht zu ändern und einzigartige Designs für Ihre Benutzer zu erstellen.
WordPress Theme installieren
Hier ist eine Schritt-für-Schritt-Anleitung, wie man ein WordPress-Theme installiert:
- Gehen Sie zum Admin-Panel Ihrer WordPress-Website.
- Wählen Sie in der Seitenleiste den Abschnitt "Aussehen" und dann "Themen" aus.
- Klicken Sie auf die Schaltfläche "Neues hinzufügen".
- Sie können ein Thema aus der WordPress-Themengalerie auswählen oder Ihr eigenes Thema herunterladen.
- Wenn Sie ein Thema aus der Galerie ausgewählt haben, klicken Sie einfach darauf und klicken Sie auf die Schaltfläche Installieren.
- Wenn Sie Ihr eigenes Thema herunterladen möchten, klicken Sie auf die Schaltfläche "Thema herunterladen" und wählen Sie eine Designdatei im Format aus .zip und klicken Sie auf die Schaltfläche Jetzt installieren.
- Nachdem Sie das Thema installiert haben, klicken Sie auf die Schaltfläche "Aktivieren", um das ausgewählte Thema auf Ihre Website anzuwenden.
Jetzt haben Sie ein neues WordPress-Theme! Sie können ihre Einstellungen und ihr Aussehen anpassen, um Ihre Website für Besucher einzigartig und attraktiv zu gestalten.
Konfigurieren Sie die functions-Datei.php
Um CSS-Stile in WordPress zu verbinden, müssen Sie die functions-Datei konfigurieren.php-Themen. Diese Datei enthält verschiedene Funktionen und Hooks, mit denen Sie das Verhalten und Aussehen von WordPress ändern können.
Um CSS-Stile zu verbinden, verwenden Sie die Funktion wp_enqueue_style(). Diese Funktion akzeptiert zwei Parameter: eine eindeutige Style-ID und einen Pfad zur Style-Datei.
Beispielcode zum Verbinden eines CSS-Stils:
- Fügen Sie der functions-Datei den folgenden Code hinzu.php:
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles' );
- In diesem Beispiel wird die Funktion get_template_directory_uri() verwendet, die den absoluten Pfad des Ordners mit dem aktuellen Thema zurückgibt.
- Erstellen Sie einen CSS-Ordner im Stammordner des Designs und legen Sie die Custom-Style-Datei ab.css in diesen Ordner.
- Die Funktion add_action() fügt dem wp_enqueue_scripts-Hook die Funktion enqueue_custom_styles() hinzu, damit die Stile auf der Seite angehängt werden.
Nachdem Sie die functions-Datei konfiguriert haben.php und verbinden Sie CSS-Stile in Wordpress, sie werden automatisch heruntergeladen und auf der Website angewendet.
Arbeiten mit Plugins zum Verbinden von CSS-Stilen
Es gibt mehrere Plugins in WordPress, die Ihnen helfen, den Prozess der Verbindung von CSS-Stilen mit Ihrer Website zu vereinfachen. Mit diesen Plugins können Sie Stile einfach hinzufügen und bearbeiten, ohne den Designcode bearbeiten oder ein untergeordnetes Thema verwenden zu müssen.
Eines dieser Plugins ist "Simple Custom CSS and JS". Damit können Sie Ihre eigenen CSS-Stile mit Ihrer Website verbinden. Nach der Installation und Aktivierung des Plugins steht Ihnen ein neues Menü "Einstellungen" in Ihrem WordPress-Admin-Panel zur Verfügung.
In diesem Menü finden Sie die Abschnitte "CSS" und "Javascript", in denen Sie Ihre eigenen Stile und Skripte hinzufügen können. Fügen Sie einfach Ihren CSS-Code in den entsprechenden Bereich ein und speichern Sie die Änderungen. Ihre Stile werden automatisch zu Ihrer Website hinzugefügt.
Ein weiteres beliebtes Plugin ist "WP Add Custom CSS". Es bietet auch eine einfache Möglichkeit, Ihrer WordPress-Website benutzerdefinierten CSS-Code hinzuzufügen. Nach der Installation und Aktivierung des Plugins steht Ihnen eine neue Option "Aussehen" im Admin-Panel zur Verfügung. In diesem Abschnitt können Sie Ihre eigenen CSS-Stile hinzufügen.
Wählen Sie das Plugin aus, das für Sie am bequemsten ist, und beginnen Sie damit. Denken Sie daran, dass es bei der Verwendung von Plugins immer eine gute Idee ist, Ihre Website zu reservieren und Änderungen zu überprüfen, bevor Sie sie auf einer Live-Site veröffentlichen.
Die Verwendung von Plugins zum Verbinden von CSS-Stilen ist eine bequeme Möglichkeit, Stile auf Ihrer WordPress-Website hinzuzufügen und anzupassen, ohne den Quellcode des Designs bearbeiten zu müssen.
Anmerkung: Wenn Sie mit Plugins arbeiten, sollten Sie vorsichtig sein und ihre Updates sorgfältig überwachen. Es kann zu Konflikten mit anderen Plugins oder neueren Versionen von WordPress kommen, daher sollten Sie regelmäßig nach Plugin-Updates suchen und Ihre Website sichern.
Manuelles Verbinden von CSS-Stilen in WordPress
WordPress bietet bequeme Möglichkeiten, CSS-Stile zu verbinden, aber manchmal kann es notwendig sein, Ihre Stile manuell zu Ihrem WordPress-Theme hinzuzufügen.
Um CSS-Stile manuell zu verknüpfen, müssen Sie die Datei functions öffnen.php Ihr WordPress-Theme. Es befindet sich im Ordner Ihres Designs, den Sie im Abschnitt "Aussehen" - "Designeditor" finden können.
Fügen Sie in der geöffneten Datei am Ende den folgenden Code hinzu:
function Stile laden()
wp_enqueue_style('Titel', 'Dateipfad.css');
add_action('wp_enqueue_scripts', 'Stile laden');
In diesem Code erstellen wir eine Funktion zum Laden von Stilen, die unsere CSS-Stile verbindet. In unserem Beispiel fügen wir einen Stil mit dem Namen "Titel" an, der den Pfad zur Datei angibt.css. Ersetzen Sie "Titel" durch den Namen Ihres Stils und "Pfad zu Datei".css" auf dem Pfad zu Ihrer Stylesheet-Datei.
Nachdem Sie den Code hinzugefügt haben, speichern Sie die functions-Datei.php. Jetzt werden Ihre Stile automatisch auf Ihre WordPress-Website hochgeladen.
Beachten Sie, dass eine falsche Änderung der Datei zu Fehlern auf Ihrer Website führen kann. Stellen Sie sicher, dass Sie eine Sicherungskopie erstellen, bevor Sie Änderungen vornehmen, und haben Sie FTP-Zugriff, um die alte Version der Datei bei Bedarf wiederherzustellen.
