Springe zum Hauptinhalt

So fügen Sie Ihrem WordPress-Blog benutzerdefiniertes CSS hinzu

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Es gibt mehrere Möglichkeiten, einem WordPress-Blog benutzerdefinierten CSS-Code hinzuzufügen.

Heute werde ich die Stärken und Schwächen der beiden verschiedenen Methoden erläutern, die ich Ihnen vorschlage, damit Sie die für Sie am besten geeignete auswählen können.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

So finden Sie die Elemente, die Sie anpassen möchten

Sobald Sie den Teil von isoliert haben Ihr WordPress-Theme, das Sie ändern möchten (Zum Beispiel der Titel eines Artikels) müssen Sie CSS-Eigenschaften bestimmen angewendet, damit Sie die entsprechenden Änderungen vornehmen können. Glücklicherweise ist dieser Prozess nicht kompliziert.

Das CSS verwendet Selektoren, um zu bestimmen, welche Elemente die verschiedenen spezifischen Änderungen erfahren. In der Regel erfolgt dies durch Angabe eines " Klasse "Von einem Element (oder DOM-Element). CSS kann jedoch auch verwendet werden, um das Layout eines gesamten Elements zu definieren (zum Beispiel das Tag " "") oder unter Verwendung der Kennung des Tags.

Glücklicherweise können wir mit gängigen Browsern mit wenigen Klicks die verschiedenen Selektoren und Deklarationen anzeigen, die auf Seitenelemente angewendet werden. In Google Chrome müssen Sie beispielsweise nur einen bestimmten Teil des Dokuments markieren und dann mit der rechten Maustaste klicken, wie im folgenden Beispiel.

blogpascher-Inspektion

Mit einem Klick auf Untersuchen Sie das Element Im daraufhin angezeigten Dropdown-Menü wird der HTML-Code der Seite in einem neuen Fenster angezeigt, und das geprüfte Objekt wird im rechten Fenster hervorgehoben (oder darunter). Sie können unten ein Beispiel sehen.

blogpascher-Logo

Die Texte dieser Elemente (oder Attribute) Rot hervorgehoben zeigt Ihnen die verschiedenen Stile an, die für das Element gelten, das Sie durch Überprüfen des Codes hervorgehoben haben.

Lesen Sie auch: Wie ein Dropdown-Menü mit CSS in Ihrem Visual Editor hinzufügen

Zum Beispiel das Element " Schriftgröße Zeigt an, dass die im hervorgehobenen Element angezeigte Schriftart eine Größe von 13 Pixeln hat. Die Deskriptoren sind von geschweiften Klammern umgeben und mit Selektoren versehen. Der Name der entsprechenden Stylesheet-Datei wird rechts neben den Selektoren angezeigt.

Sobald Sie diese Informationen im Hinterkopf haben, wird das Ändern des Stils einfach. Wenn Sie beispielsweise die Schriftart von 13px in 14px ändern möchten, suchen Sie einfach nach Ihrer Stylesheet-Datei, der Auswahl, die der des hervorgehobenen Elements entspricht. Es ist in der Regel in dieser Form: (« # .block-plugin-Inhaltsinformationen"). Sie können dann die verschiedenen Werte der Attribute ändern.

Sie können dasselbe in Firefox tun, indem Sie einfach einen bestimmten Teil der Seite markieren, mit der rechten Maustaste auf das Element klicken und dann " Untersuchen Sie das Element Im angezeigten Menü.

Wie Wordpress und CSS arbeiten zusammen

Es ist eine Tatsache, dass WordPress-Themes anders erstellt werden. Denken Sie also daran, dass Ihr WordPress-Theme möglicherweise nicht 100% mit dem übereinstimmt, was Sie in den folgenden Abschnitten gelesen haben.

Das heißt, es ist mehr als wahrscheinlich, dass das in Ihrem WordPress-Blog verwendete CSS in einer Datei mit dem Namen " style.css "" Dies ist der gebräuchliche Name für ein Stylesheet für jede Art von Website, nicht nur für WordPress.

Siehe auch: Wie man Bilder Gravatar auf Wordpress die Größe

Jetzt ist es Zeit, die verschiedenen Bearbeitungsprozesse durchzugehen.

Methode # 1: Bearbeiten der Style-Datei Ihres WordPress-Themas

Es gibt zwei Möglichkeiten, auf die style.css-Datei Ihres Themas zuzugreifen.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Die erste Möglichkeit besteht darin, dies über Ihr WordPress-Dashboard zu tun. Wählen Sie im Menü auf der linken Seite das Menü " Apparence "Und dann" Herausgeber ".

Menü-Editor-in-Bild-edge

Sobald Sie sich auf der Editorseite befinden, sehen Sie eine Liste der Dateien in einer vertikalen Leiste auf der rechten Seite. Scrollen Sie durch die Liste der Dateien. Sie sehen eine Datei mit dem Namen " Style.css Stylesheet Am Ende der Seite.

Wenn Sie auf den Namen dieser Datei klicken, wird diese geladen und in der Mitte im Editor angezeigt. In diesem Bildschirm können Sie die Datei bearbeiten.

Menü-Wordpress-Editor-in-Code

Die andere Möglichkeit, das Stylesheet zu finden, besteht darin, durch das Betriebssystem Ihres Hosting-Anbieters zu navigieren und die Datei im Ordner des WordPress-Themas zu suchen (mit einem FTP-Client). Der genaue Standort hängt von Ihrem Hosting-Anbieter ab. In dem unten gezeigten Beispiel der Name der Website (in unserem Fall thecareIst) ein Ordner unter dem Ordner public_html.

Da WordPress installiert ist, können Sie den Ordner wp-content in "thecare" sehen. Der Unterordner wp-content ist ein weiterer Ordner mit dem Namen " wp-ThemenHier werden alle WordPress-Themes installiert.

Von dieser Website wird ein Thema namens " Newsletter »Die Style-Datei« style.css Befindet sich im Ordner " Übergeordnetes Newsletter ".

Newsletter Eltern-Ordner-800x401

Methode 2: Verwenden eines Plugins zum Ändern von CSS

Die vielleicht bequemste Möglichkeit, das CSS Ihres WordPress-Blogs zu bearbeiten, ist die Verwendung eines Plugins.

Einer der Hauptvorteile der Verwendung eines Plugins ähnelt dem von untergeordneten Themen. Ja Sie aktualisieren das WordPress-ThemeIhre Änderungen werden nicht überschrieben, da sie separat und nicht in den Themendateien gespeichert werden. Der andere Vorteil ist natürlich, dass Sie kein untergeordnetes Thema erstellen müssen.

Hier sind einige Premium-Plugins, mit denen Sie auch den CSS-Code Ihres WordPress-Themas ändern können:

1. Gelber Stift: Visual CSS Style Editor

Yellow Pencil ist ein visueller Stileditor, den Sie mit jedem Thema verwenden können, um Ihre Website in wenigen Minuten zu personalisieren (Schriftarten, Farben, Animationen und mehr…).YellowPencil Visual CSS Style Editor WordPress-Plugin

Dieses Premium-WordPress-Plugin erstellt CSS-Stile in Hintergrund während Sie mit den Farben spielen, als wäre es ein Spiel. Es wurde sowohl für Anfänger als auch für erfahrene Benutzer entwickelt.

Entdecken Sie auch unsere 5-Plugins WordPress Benachrichtigungen anzeigen

Es sind keine Codierungskenntnisse erforderlich. Das WordPress-Plugin hat jedoch einen guten CSS-Editor für diejenigen, die gerne programmieren. Mit diesem Editor können Sie live codieren und Ihr CSS anpassen.

Download | Demo | Web-Hosting

2. Custom JS und CSS für Gutenberg

Das Premium WordPress Plugin Custom JS und CSS für Gutenberg Mit dieser Option können Sie dem WYSIWYG-Editor eine unbegrenzte Anzahl benutzerdefinierter Stile für Ihre WordPress-Beiträge und -Seiten hinzufügen. Es ist voll kompatibel mit der Gutenberg-Version von WordPress.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Benutzerdefiniertes JS und CSS für Gutenberg WordPress Plugin

Mit einem benutzerfreundlichen CSS-Editor können Sie einfach einen neuen Stil erstellen. Dieses WordPress-Plugin erweitert die Funktionen von benutzerdefinierte Felder und bietet Ihnen die Möglichkeit, Ihre benutzerdefinierten Felder mit einem dynamischen und leistungsstarken Personalisierungsmodul zu ändern. und die Funktionalität von Echtzeitvorschau dieses WordPress-Plugins macht es sehr komfortabel und benutzerfreundlich.

Download | Demo | Web-Hosting

3. SiteOrigin CSS

Es ist bei weitem das WordPress-Plugin, das die meisten Optionen in dieser Liste bietet. Das Erstaunlichste an letzterem ist, dass es kostenlos ist. Dieses WordPress-Plugin ist das einzige, das im Customizer nicht gefunden werden kann.

SiteOrigin CSS - WordPress-Plugin

Nach der Installation und Aktivierung des Plugins müssen Sie zum folgenden Speicherort navigieren: " Darstellung> Benutzerdefiniertes CSS Zugriff auf die CSS-Edition des Plugins. Auf dieser Seite sehen Sie einen Texteditor, der keine Live-Vorschau bietet. 

Lesen Sie auch unseren Artikel über 10 WordPress Plugins zur Steigerung des Umsatzes Ihrer Website

Um auf Letzteres zuzugreifen, müssen Sie auf eine der beiden Schaltflächen links über dem Editor klicken. Über die Schaltfläche mit dem Augensymbol wird ein visueller CSS-Code-Editor angezeigt, den Enthusiasten zu schätzen wissen. Das Symbol mit den Erweiterungspfeilen zeigt einen Texteditor an, der die Beherrschung von CSS-Codes impliziert.

Download | Demo | Web-Hosting

4. Einfacher Benutzerdefinierte CSS

Einfacher Benutzerdefinierte CSS ist eines der beliebtesten Plugins.

Einfaches benutzerdefiniertes CSS - WordPress-Plugin WordPress.org

Entdecken Sie auch unsere So machen Sie Ihr Blog schnell: Verwalten von CSS- und JS-Dateien.

Es wurde über 100 Mal installiert und mit fünf Sternen bewertet.

Download | Demo | Web-Hosting

5. WP Hinzufügen von benutzerdefinierten CSS

WP Benutzerdefiniertes CSS hinzufügen ist ein Plugin, mit dem Sie Ändern Sie das Layout eines WordPress-Blogs ganze oder nur einzelne Artikel. Dies ist eine großartige Option, wenn Sie Flexibilität beim Anpassen von Elementen suchen.

wp-Add-custom

Das Plugin wurde über 10.000 Mal heruntergeladen und hat derzeit eine 4,3-Sterne-Bewertung.

Download | Demo | Web-Hosting

6. Theme Junkie Benutzerdefinierte CSS

Wenn Sie nach einer Lösung suchen, die eine Live-Vorschau Ihrer Änderungen bietet, können Sie diese verwenden Theme Junkie Benutzerdefiniertes CSS

Thema-Junkie-css

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Diese Lösung fügt Ihrem Dashboard einen benutzerdefinierten CSS-Manager hinzu, in dem Sie Ihre eigenen Stile hinzufügen können. Es bietet auch eine Alternative zu Verwenden eines untergeordneten Themas.

Download | Demo | Web-Hosting

Andere empfohlene Ressourcen

Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.

Fazit

Hier! Das war's für dieses Tutorial. Ich hoffe, Sie werden es schaffen, Ihrem WordPress-Blog auf zwei Arten benutzerdefinierten CSS-Code hinzuzufügen. Wenn Sie welche haben commentaires oder Vorschläge, zögern Sie nicht, uns in dem dafür vorgesehenen Bereich Bescheid zu geben.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Wenn Sie diesen Artikel mochten, nzögern Sie nicht zu Teilen Sie in Ihren bevorzugten sozialen Netzwerken

...  

Dieser Artikel enthält 1 Kommentar

  1. Vielen Dank für die verschiedenen Artikel auf Ihrer Website! Für einen Anfänger wie mich ist es immer sehr explizit und verständlich… Ich denke, ich werde sehr oft wiederkommen !!

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
4 Aktien
Aktie2
tweet
Registrieren2