CSS bearbeiten in WordPress [2024] 💥
Das Bearbeiten von CSS in WordPress kann manchmal notwendig sein und daher müssen wir wissen, wie. Meine bevorzugten Methoden sind die Verwendung der Option für benutzerdefiniertes CSS in Designs oder ein Pagebuilder wie Elementor. Ich werde jedoch noch viele weitere Möglichkeiten zeigen, wie Sie Ihr CSS bearbeiten können.
Anzeige
1. Bearbeiten von CSS in WordPress mit benutzerdefiniertem CSS in einem Theme
Der Design-Anpasser ermöglicht es Ihnen, CSS-Code zu Ihrem Design-Stylesheet hinzuzufügen, ohne die zentralen Designdateien ändern zu müssen. Navigieren Sie zu „Erscheinungsbild“ >> „Anpassen“. Suchen Sie als Nächstes nach einer Option mit einem Namen wie „Benutzerdefiniertes CSS“ oder „Zusätzliches CSS“. Dies ist normalerweise die letzte Option im Menü. Wenn Sie dort kein Feld finden, was heutzutage nicht sehr wahrscheinlich ist, gehen Sie zu den "Theme-Einstellungen" und es wird dort sein.
Der Weg dorthin
Zusätzliches CSS-Feld
Hier kann zusätzliches CSS geschrieben werden, oder es können Änderungen an vorhandenem CSS vorgenommen werden, indem es überschrieben wird. Für diese Methode ist es nicht erforderlich, ein untergeordnetes Thema zu verwenden.
2. Bearbeiten von CSS in WordPress mit Elementor
Das Elementor-Site-Einstellungsmenü wird verwendet. Der Pagebuilder Elementor bietet eine Vielzahl globaler Einstellungen, die denen in ähnlich sind WordPress-Customizer. Öffnen Sie eine beliebige Seite oder einen beliebigen Beitrag mit Elementor und klicken Sie auf das Hamburger-Menü in der oberen linken Ecke und dann auf „Site-Einstellungen“. Siehe Screenshot unten.
Hier finden Sie eine Vielzahl von Einstellungen, mit denen Sie das Aussehen Ihrer Website personalisieren können. Sie können dieses Menü auf jeder Seite Ihrer Website ändern. Die Registerkarte Custom CSS ist der einzige Abschnitt, an dem wir uns im Moment interessieren, er befindet sich am Ende des Menüs. Es öffnet sich und zeigt Ihnen ein Feld ähnlich den benutzerdefinierten CSS-Optionen für Abschnitte und Widgets, wie unten gezeigt.
Ihre gesamte Website wird von jedem benutzerdefinierten CSS beeinflusst, das Sie dieser Seite hinzufügen. Wir empfehlen, einen zielgerichteten Ansatz nur für ein Widget oder einen Abschnitt zu verwenden, wenn Sie möchten nur versuchen, bestimmte Elemente zu ändern. Die beste Funktion von Elementor ist die Möglichkeit, CSS-Code auf jeder Abschnitts-, Spalten- oder Widget-Ebene hinzuzufügen. Bewegen Sie den Mauszeiger über den Abschnitt, um das Menü „Abschnitt bearbeiten“ zu öffnen. Sie finden einen "benutzerdefinierten Bereich", wenn Sie im Menü "Bereich bearbeiten" auf die Registerkarte "Erweitert" gehen. Sie finden das Feld, mit dem Sie diesem Abschnitt Code hinzufügen können.
3. Laden eines benutzerdefinierten Stylesheets mit Elementor (nur Profis)
Sie können ein CSS-Stylesheet einrichten, das mit Elementor geladen wird. Dazu müssen Sie den Code unterhalb der WordPress-Datei functions.php hinzufügen. Stellen Sie mit Cpanel eine Verbindung zu Ihrer Website her, um auf die Datei functions.php zuzugreifen. Suchen Sie die Datei functions.php im Ordner und öffnen Sie sie zum Bearbeiten. Unnötig zu erwähnen, dass Sie ein untergeordnetes Thema erstellen und dort alles ausführen müssen.
add_action( 'elementor/frontend/before_enqueue_scripts', function() {
wp_enqueue_script(
'custom-stylesheet',
get_stylesheet_uri()
);
} );Dieser Code verwendet before_enqueue_scriptshook, um ein Stylesheet namens custom-stylesheet zu laden. Wir verwenden auch die Funktion get_stylesheet_uri, um auf den Speicherort des Stylesheets auf dem Server zu verweisen. Idealerweise fügen Sie das benutzerdefinierte Stylesheet in das Verzeichnis Ihres untergeordneten Designs oder in den Ordner „Designs“ ein. Sie können jeden Elementor-CSS-Code in das Stylesheet einfügen. Das hinzugefügte Stück Code zu functions.php stellt sicher, dass der Code nur geladen wird, wenn Elementor auf Ihrer Website aktiviert wurde.
4. Bearbeiten Sie CSS mit dem WordPress-Theme-Editor
Melden Sie sich bei Ihrem WordPress-Dashboard an. Klicken Sie auf „Erscheinungsbild“ >> „Theme-Editor“. Auf dieser Seite finden Sie dann das CSS-Stylesheet, das Sie für Ihr aktuelles Design benötigen. Sie können CSS-Code bearbeiten oder hinzufügen, indem Sie auf die Datei Style.CSS klicken. Um vorgenommene Änderungen zu speichern, klicken Sie auf die Schaltfläche „Datei aktualisieren“. Siehe Screenshot unten.
5. Bearbeiten Sie CSS in WP mit Cpanel oder FTP
Dieses Mal erreichen wir die Datei style.css mit Cpanel, direkter Zugriff auf den Server. In meinem Fall befindet sich die Datei unter public_html/wp-content/themes/phlox-pro/style.css. "Phlox-pro" ist der Name meines Themes und muss durch den Namen Ihres Themes ersetzt werden. Besser wäre es, zuerst ein untergeordnetes Thema zu erstellen, und das würde die URL public_html/wp-content/themes/phlox-pro-child/style.css machen. Der Screenshot unten zeigt die Datei style.css in ihrem Ordner.
6. Bearbeiten Sie CSS in WP mit einem Plugin
Es gibt viele Plugins, mit denen Sie benutzerdefiniertes CSS direkt zu Ihrer Website hinzufügen können, ohne den WP-Customizer oder Pagebuilder verwenden zu müssen. Einfaches CSS und JS ist mein Favorit von allen und kostenlos.
Installieren und aktivieren Sie das Plugin. Als Nächstes können Sie mit Simple Custom CSS oder JS Code zur Kopf- oder Fußzeile Ihres Designs hinzufügen. Gehen Sie zu Benutzerdefiniert „CSS und JS“ >> „Benutzerdefiniertes CSS hinzufügen“ und klicken Sie dann auf „CSS-Code hinzufügen“. Auf der linken Seite befindet sich ein einfacher CSS-Editor. Sie können CSS-Code von einem externen oder internen Stylesheet laden. Sie können auch wählen, ob der Code in der Kopf- oder Fußzeile stehen soll.
Anzeige