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.
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.
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
Fakt ist, dass die WordPress-Themes werden unterschiedlich erstellt. Denken Sie also daran, dass Ihre Wordpress-Theme stimmt möglicherweise nicht zu 100 % mit dem überein, was Sie in den folgenden Abschnitten lesen.
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.
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 ".
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.
Die andere Möglichkeit, das Stylesheet zu finden, besteht darin, das Betriebssystem Ihres Hosting-Providers zu durchsuchen und die Datei in der Datei zu suchen Wordpress-Theme (mit einem FTP-Client). Der genaue Standort hängt von Ihrem Hosting-Provider ab. Im unten gezeigten Beispiel ist 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-Themen“, wo alle WordPress-Themes sind installiert.
Von dieser Website wird ein Thema namens " Newsletter »Die Style-Datei« style.css Befindet sich im Ordner " Übergeordnetes Newsletter ".
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 Browsers ändern können Wordpress-Theme :
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…).
Ce WordPress Plugin Premium erstellt CSS-Stile von 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 Programmierkenntnisse erforderlich. Allerdings ist die WordPress Plugin hat einen guten CSS-Editor für diejenigen, die gerne programmieren. Sie können mit diesem Editor live programmieren und Ihr CSS anpassen.
Herunterladen | Demo | Web-Hosting
2. Custom JS und CSS für Gutenberg
Le WordPress Plugin Premium 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.
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.
Herunterladen | 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.
Nach der Installation und Aktivierung des Plugins müssen Sie zum folgenden Ort 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.
Herunterladen | Demo | Web-Hosting
4. Einfacher Benutzerdefinierte CSS
Einfacher Benutzerdefinierte CSS ist eines der beliebtesten Plugins.
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.
Herunterladen | 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.
Das Plugin wurde über 10.000 Mal heruntergeladen und hat derzeit eine 4,3-Sterne-Bewertung.
Herunterladen | 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.
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.
Herunterladen | 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.
- 10-WordPress-Plugins, die in sozialen Netzwerken gemeinsam genutzt werden
- Wie man benutzerdefinierte Felder aus der Schleife auf Wordpress anzeigen
- 5-WordPress-Plugins zur Monetarisierung Ihres Blogs mit Anzeigen
- Wie Sie Ihren Blog-Inhalte Schaber schützen
Zusammenfassung
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.
...
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 !!