Möchten Sie die Farben oder Schriftarten Ihrer WordPress-Website ändern, aber befürchten, etwas zu beschädigen? Viele Anfänger gehen davon aus, dass dies die Bearbeitung von Theme-Dateien erfordert, wo selbst ein kleiner Fehler große Probleme verursachen kann.
In den frühen Tagen von WordPress war der einzige Weg, benutzerdefiniertes CSS hinzuzufügen, die direkte Bearbeitung dieser Dateien. Wir erinnern uns, wie stressig das war und wie ein falsch platziertes Zeichen eine ganze Website zum Absturz bringen konnte.
Glücklicherweise ist das nicht mehr der Fall. WordPress bietet jetzt sichere, anfängerfreundliche Möglichkeiten, benutzerdefiniertes CSS über den Theme Customizer, den Full Site Editor (FSE) oder ein Plugin wie WPCode hinzuzufügen.
In diesem Leitfaden führen wir Sie Schritt für Schritt durch drei einfache Methoden, um benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzuzufügen. 🙌
Warum benutzerdefiniertes CSS in WordPress hinzufügen?
Sie fügen benutzerdefiniertes CSS in WordPress hinzu, um mehr Kontrolle über das Design Ihrer Website zu erhalten, als die Theme-Einstellungen zulassen. Sie können zum Beispiel Schriftgrößen anpassen, Schaltflächenfarben ändern oder bestimmten Abschnitten zusätzlichen Abstand hinzufügen.
CSS (Cascading Style Sheets) ist die Sprache, die Ihre Website gestaltet und Dinge wie Farben, Schriftarten, Abstände und Layouts regelt. Indem Sie Ihr eigenes CSS schreiben, können Sie das Erscheinungsbild Ihrer Website feinabstimmen, ohne Themes zu ändern oder zusätzliche Plugins zu installieren.
Diese Flexibilität bedeutet, dass Sie einzelne Beiträge personalisieren, Produktkategorien gestalten oder sogar optimieren können, wie Ihre Website auf Mobilgeräten im Vergleich zu Desktops aussieht.
In diesem Leitfaden zeigen wir Ihnen die verschiedenen Möglichkeiten, benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzuzufügen.
Sie können auf den Link unten klicken, um zu jedem Abschnitt zu springen, der Sie interessiert:
- Methode 1: Benutzerdefiniertes CSS über den Theme Customizer hinzufügen (klassische Themes)
- Methode 2: Hinzufügen von benutzerdefiniertem CSS mit dem WPCode-Plugin (Alle Themes)
- Methode 3: Zusätzliches CSS mit dem Full Site Editor (Block Themes) hinzufügen
- Bonustipp: Verwendung eines benutzerdefinierten CSS-Plugins vs. Hinzufügen von CSS im Theme Customizer
- FAQs: Benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzufügen
- Weitere CSS-Tipps und Tricks für Ihre WordPress-Site
Bereit? Legen wir los.
Methode 1: Benutzerdefiniertes CSS über den Theme Customizer hinzufügen (klassische Themes)
Seit WordPress 4.7 können Benutzer benutzerdefiniertes CSS jetzt direkt aus dem WordPress-Adminbereich hinzufügen. Das ist super einfach und Sie können Ihre Änderungen sofort mit einer Live-Vorschau sehen.
Hinweis: Diese Methode ist nur für klassische Themes gedacht. Wenn Sie ein Block-Theme verwenden, müssen Sie eine der anderen Methoden wählen.
Zuerst müssen Sie zur Seite Darstellung » Anpassen in Ihrem WordPress-Dashboard navigieren.
Dies startet die Benutzeroberfläche des WordPress Theme Customizer.
Auf dieser Seite sehen Sie die Live-Vorschau Ihrer Website mit einer Reihe von Anpassungsoptionen im linken Bereich. Abhängig von Ihrem WordPress-Theme kann das Layout dieses Menüs leicht variieren. In unserem Beispiel verwenden wir das Sydney-Theme.
Suchen Sie einfach den Tab 'Zusätzliches CSS', um mit der Bearbeitung zu beginnen.
Der Tab wird verschoben, um Ihnen eine einfache Box anzuzeigen, in der Sie Ihr benutzerdefiniertes CSS hinzufügen können.
Sobald Sie eine gültige CSS-Regel hinzufügen, können Sie sehen, wie sie im Live-Vorschaufenster Ihrer Website angewendet wird.
Sie können weiterhin benutzerdefinierten CSS-Code hinzufügen, bis Sie mit dem Aussehen der Änderungen auf Ihrer Website zufrieden sind.
Vergessen Sie nicht, oben auf die Schaltfläche „Veröffentlichen“ zu klicken, wenn Sie fertig sind.
ℹ️ Hinweis: Jedes benutzerdefinierte CSS, das Sie über den Theme-Customizer hinzufügen, ist nur mit dem jeweiligen Theme verfügbar. Wenn Sie es mit anderen Themes verwenden möchten, müssen Sie es mit derselben Methode in Ihr neues Theme kopieren und einfügen.
Methode 2: Hinzufügen von benutzerdefiniertem CSS mit dem WPCode-Plugin (Alle Themes)
Die erste Methode erlaubt Ihnen nur, benutzerdefiniertes CSS für das aktuell aktive Theme zu speichern. Wenn Sie das Theme wechseln, müssen Sie möglicherweise Ihr benutzerdefiniertes CSS in das neue Theme kopieren und einfügen.
Wenn Ihr benutzerdefiniertes CSS angewendet werden soll, unabhängig davon, welches WordPress-Theme Sie verwenden, ist diese Methode für Sie.
WPCode ist das beste Plugin für benutzerdefinierte Code-Snippets auf dem Markt mit über 2 Millionen Nutzern. Neben der einfachen Hinzufügung von benutzerdefiniertem Code in WordPress bietet es Funktionen wie eine integrierte Code-Snippet-Bibliothek, bedingte Logik, Conversion-Pixel und mehr.
Wir verwenden WPCode zum Hinzufügen und Verwalten von Code-Snippets für einige Partner-Marken. Für einen detaillierten Einblick in seine Funktionen und Vorteile lesen Sie unsere vollständige WPCode-Bewertung.
Als Erstes müssen Sie das WPCode Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.
ℹ️ Hinweis: Dieses Tutorial funktioniert mit der kostenlosen Version des WPCode Plugins, sodass Sie sofort loslegen können. Wenn Sie sich für ein Upgrade auf WPCode Pro entscheiden, schalten Sie hilfreiche Funktionen wie geplante Snippets, vollständige Revisionshistorie und Zugriff auf die vollständige Bibliothek von gebrauchsfertigen, von Entwicklern genehmigten Snippets frei.
Nach der Aktivierung gehen Sie einfach im WordPress-Adminbereich zu Code Snippets » + Neu hinzufügen.
Dann können Sie mit der Maus über die Option „Add Your Custom Code (New Snippet)“ in der Code-Snippet-Bibliothek fahren und auf „Use snippet“ klicken.
Auf dem nächsten Bildschirm wählen Sie den Code-Typ für Ihren benutzerdefinierten CSS-Snippet aus.
Klicken Sie einfach auf „CSS-Snippet“ als Code-Typ.
Als Nächstes können Sie oben auf der Seite einen Titel für Ihren benutzerdefinierten CSS-Snippet hinzufügen. Dies kann alles sein, was Ihnen hilft, den Code zu identifizieren.
Sobald Sie einen Titel eingegeben haben, können Sie Ihr benutzerdefiniertes CSS in das Feld „Code-Vorschau“ schreiben oder einfügen.
Scrollen wir nun zum Abschnitt „Insertion“ und wählen Sie die Methode „Auto-Insert“, wenn Sie den Code auf Ihrer gesamten WordPress-Website ausführen möchten.
Wenn Sie den Code nur auf bestimmten Seiten oder Beiträgen ausführen möchten, können Sie die Methode 'Shortcode' wählen.
Nun möchten Sie wieder an den Anfang der Seite zurückkehren.
Dann schalten Sie einfach den Schalter auf „Aktiv“ und klicken Sie auf die Schaltfläche „Snippet speichern“.
Das ist es! Sie können Ihre WordPress-Website besuchen, um das benutzerdefinierte CSS in Aktion zu sehen.
Methode 3: Zusätzliches CSS mit dem Full Site Editor (Block Themes) hinzufügen
Wenn Sie ein modernes Block-Theme verwenden, ist der beste Ort, um Ihr benutzerdefiniertes CSS hinzuzufügen, direkt im Full Site Editor. Diese Methode behält Ihr CSS bei den Stileinstellungen Ihres Themes und ermöglicht Ihnen eine Live-Vorschau.
Zuerst müssen Sie in Ihrem WordPress-Dashboard zu Darstellung » Editor navigieren.
Dies öffnet den Full Site Editor.
Klicken Sie im linken Menü auf den Tab „Styles“.
Sie sollten nun das Bedienfeld 'Stile' für Ihre Website sowie die Vorschau Ihrer Seite sehen.
Von hier aus klicken wir auf die Vorschau, um den Block-Editor zu öffnen.
Klicken Sie im Inhaltseditor auf das Symbol „Stile“. Es sieht aus wie ein Kreis, der halb schwarz und halb weiß ist.
Danach wählen Sie „Zusätzliches CSS“ aus.
Im CSS-Schiebefenster finden Sie das Feld „Zusätzliches CSS“.
Sie können Ihr CSS hier eingeben und sehen die Änderungen sofort in der Live-Vorschau.
Wenn Sie mit allem zufrieden sind, vergessen Sie nicht, oben rechts auf „Speichern“ zu klicken, um Ihre Änderungen zu veröffentlichen.
Bonustipp: Verwendung eines benutzerdefinierten CSS-Plugins vs. Hinzufügen von CSS im Theme Customizer
Alle oben beschriebenen Methoden werden für Anfänger empfohlen. Fortgeschrittene Benutzer können benutzerdefiniertes CSS auch direkt zu ihren Themes hinzufügen.
Das Hinzufügen von benutzerdefinierten CSS-Snippets zu Ihrem übergeordneten Theme wird jedoch nicht empfohlen. Ihre CSS-Änderungen gehen verloren, wenn Sie das Theme versehentlich aktualisieren, ohne Ihre benutzerdefinierten Änderungen zu speichern.
Der beste Ansatz ist die Verwendung eines Child-Themes. Viele Anfänger scheuen sich jedoch davor, ein Child-Theme zu erstellen, da sie den Prozess einschüchternd finden. Außerdem fehlt Anfängern oft das Verständnis dafür, wie sie das Child-Theme über das Hinzufügen von benutzerdefiniertem CSS hinaus verwenden werden.
Die Verwendung eines benutzerdefinierten CSS-Plugins ermöglicht es Ihnen, Ihr benutzerdefiniertes CSS unabhängig von Ihrem Theme zu speichern. Auf diese Weise können Sie problemlos Themes wechseln, und Ihr benutzerdefiniertes CSS bleibt erhalten.
Eine weitere großartige Möglichkeit, benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung des Plugins CSS Hero. Dieses wunderbare Plugin ermöglicht es Ihnen, fast jeden CSS-Stil auf Ihrer WordPress-Website zu bearbeiten, ohne eine einzige Zeile Code zu schreiben.
Sie können auch benutzerdefiniertes CSS mit dem SeedProd Plugin hinzufügen, dem besten Drag-and-Drop WordPress Page Builder.
Mit SeedProd können Sie benutzerdefinierte WordPress-Themes und Landing Pages für Ihre WordPress-Website erstellen. Sie können die globalen CSS-Einstellungen einfach bearbeiten; es ist kein Code erforderlich.
Einige unserer Partner-Marken haben ihre gesamten Websites mit SeedProd gestaltet. Lesen Sie unbedingt unseren detaillierten SeedProd-Test, um zu sehen, warum es eine Top-Wahl für den Aufbau beeindruckender Websites ist.
FAQs: Benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzufügen
Möchten Sie Ihre WordPress-Website mit benutzerdefinierten Stilen wirklich zu Ihrer eigenen machen? Hier sind einige häufig gestellte Fragen zum sicheren Hinzufügen von benutzerdefiniertem CSS und wie Sie dies tun können, ohne Ihre Website zu beschädigen:
Ist das Hinzufügen von benutzerdefiniertem CSS riskant für meine Website?
Nicht, wenn Sie es richtig machen. Tools wie der WordPress Theme Customizer, WPCode oder SeedProd lassen Sie Ihre Änderungen in der Vorschau anzeigen, bevor Sie sie veröffentlichen. Dies hilft Ihnen, Fehler zu vermeiden und Ihre Website sicher zu halten.
Verschwinden meine CSS-Änderungen, wenn ich das Theme wechsle?
Wenn Sie das CSS über den Theme Customizer hinzugefügt haben, sind Ihre Änderungen an dieses spezielle Theme gebunden. In diesem Fall ja, Ihr zusätzliches CSS verschwindet, wenn Sie Ihr WordPress-Theme ändern.
Um Ihr CSS über alle Themes hinweg konsistent zu halten, können Sie ein Code-Snippet-Plugin wie WPCode verwenden. Es speichert Ihren Code separat, sodass er aktiv bleibt, auch wenn Sie die Themes wechseln.
Kann ich Änderungen rückgängig machen, wenn etwas schief geht?
Ja, besonders wenn Sie ein Code-Snippet-Plugin wie WPCode verwenden. Sie können jedes von Ihnen hinzugefügte Snippet einfach deaktivieren oder löschen. Es ist immer eine gute Idee, Ihre Änderungen zuerst in der Vorschau anzuzeigen oder sie auf einer Staging-Site zu testen, wenn Sie unsicher sind.
Was ist, wenn ich noch mehr Kontrolle über mein CSS haben möchte?
Für fortgeschrittenere Bearbeitungen können Sie ein Child-Theme erstellen. Dies gibt Ihnen die volle Kontrolle und hält Ihre Änderungen sicher während Theme-Updates. Es erfordert jedoch ein grundlegendes Verständnis davon, wie WordPress-Themes funktionieren.
Benötige ich Programmierkenntnisse, um benutzerdefiniertes CSS hinzuzufügen?
Sie müssen kein Entwickler sein, aber Sie müssen ein wenig CSS kennen, zumindest genug, um den richtigen Code zu kopieren und einzufügen oder einem Tutorial zu folgen.
Die gute Nachricht ist, dass es viele anfängerfreundliche Ressourcen gibt (wie WPBeginner!), die Ihnen helfen, einfache CSS-Anpassungen Schritt für Schritt zu erlernen. Mit den richtigen Werkzeugen kann das Hinzufügen von CSS immer noch überschaubar sein – eher wie das Umstellen von Möbeln als das Umbauen des Hauses.
Weitere CSS-Tipps und Tricks für Ihre WordPress-Site
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzufügen. Wenn Sie dies hilfreich fanden, möchten Sie vielleicht auch unsere Anleitungen zu folgenden Themen sehen:
- CSS/JavaScript-Dateien in WordPress minimieren
- Wie Sie die Auslieferung von WordPress CSS einfach optimieren
- So wenden Sie CSS für bestimmte Benutzerrollen in WordPress an
- Wie Sie das erste und letzte CSS zu WordPress-Menüpunkten hinzufügen
- Wie man ungenutztes CSS in WordPress entfernt (Der richtige Weg)
- So beheben Sie defektes CSS im WordPress Admin-Dashboard
- Standard-CSS-Cheat-Sheet für Anfänger, generiert von WordPress
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Mrteesurez
Basierend auf der Methode, die Sie beim Hinzufügen von benutzerdefiniertem CSS in einem Block-Site verwendet haben, stelle ich fest, dass die Site über den von Ihnen geteilten Link immer noch Elemente des klassischen Customizers verwendet?
Ich möchte fragen, ob man einfach ein klassisches Widget-Plugin auf einem Block-Theme installieren kann, um einfachen Zugriff auf den Customizer zum Hinzufügen von CSS und anderem zu haben, ohne einen benutzerdefinierten Link zu verwenden?
WPBeginner Support
Dies hängt stark von Ihrem spezifischen Theme ab. Wenn Ihr Theme die Option im Customizer nicht hat, empfehlen wir, eine der Alternativen aus diesem Artikel zu verwenden.
Admin
Mrteesurez
Nun, die meisten Themes haben die Option im Customizer, ich kenne keine Block-Themes. Danke.
Aber ich würde empfehlen, stattdessen einen Page Builder für volle Anpassungsfunktionen zu verwenden. Sobald ich gelernt habe, einen Page Builder zu verwenden, benutze ich selten benutzerdefiniertes CSS auf Seiten.
Dennis Muthomi
Nur zur Klarstellung – wenn Sie (in METHODE 1) erwähnen, dass das über den Customizer hinzugefügte CSS nur für das jeweilige Theme verfügbar ist, bedeutet das dann, dass der benutzerdefinierte CSS-Code tatsächlich in die Dateien des aktuellen Themes eingefügt wird?
Ich bin nicht sehr technisch versiert, daher möchte ich sicherstellen, dass ich es richtig verstehe, bevor ich loslege.
WPBeginner Kommentare
Anstatt die Theme-Dateien zu bearbeiten, speichert der Customizer die CSS-Daten in der Datenbank und ordnet sie dem Theme zu.
Mrteesurez
Das weiß ich nicht, danke. Das bedeutet, dass die hinzugefügten benutzerdefinierten CSS nicht in den Theme-Dateien, sondern in der Datenbank gespeichert werden. Warum müssen wir also den benutzerdefinierten CSS-Code kopieren und erneut einfügen, wenn wir das Theme wechseln, obwohl er eigentlich in der Datenbank liegt?
WPBeginner Support
Wenn Sie den CSS-Code hinzufügen, wird er beim Speichern mit dem Theme selbst verknüpft. Wenn Sie ein neues Theme laden, wird jegliches mit diesem Theme verknüpfte CSS geladen.
Jiří Vaněk
Vielen Dank, mrteesurez, für Ihre Frage, denn ich war genauso verwirrt wie Sie, und dank WPBeginner für die Erklärung, die mir geholfen hat zu verstehen, wie die hinzugefügte CSS mit dem Theme funktioniert. Ich dachte auch, die CSS-Codes würden nur im Theme gespeichert, aber jetzt verstehe ich endlich, wie es im Hintergrund funktioniert.
Qasim Saeed
Hallo, wenn ich benutzerdefiniertes CSS auf einer bestimmten Seite ohne Plugin hinzufügen möchte, was dann? Ich denke, wir fügen das über die Funktion hinzu? Können Sie mir bitte sagen, wie ich CSS über functions.php hinzufüge und was der beste und sicherste Weg ist, CSS für eine bestimmte Seite hinzuzufügen?
WPBeginner Support
Sie müssen keine Funktionen verwenden, um CSS zu bestimmten Seiten hinzuzufügen. Sie würden die spezifische Seite in Ihrem CSS-Selektor ansprechen, damit sie nur eine einzelne Seite auf Ihrer Website betrifft.
Admin
Jiří Vaněk
Ist es besser, eigenes CSS in WordPress über eine Vorlage oder über WPCode einzufügen?
WPBeginner Support
Beide Optionen sind gültige Wahlmöglichkeiten, es hängt von der persönlichen Vorliebe ab und davon, ob das Theme die Option im Editor bietet.
Admin
Jiří Vaněk
Danke für die Klärung, ich war mir nicht sicher, ob z. B. ein Snippet mit WPCode schneller für die Antwortzeit der Website wäre als die Integration in die Vorlage selbst. Wenn es also keinen Unterschied macht, werde ich mich wahrscheinlich an die Best Practices halten und es in die Vorlage integrieren.
Bavi
Das Hinzufügen von CSS ist für den kostenlosen Plan nicht mehr verfügbar, gibt es Alternativen??
WPBeginner Support
Unsere Tutorials sind für WordPress.org-Websites, wir haben im Moment keine spezifischen Informationen für WordPress.com. Wir empfehlen Ihnen, sich unseren Leitfaden unten anzusehen, der die beiden vergleicht, und wenn Sie Ihre Website von WordPress.com auf eine selbst gehostete WordPress.org-Website übertragen möchten.
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
Ben
Ich kannte den „Trick“ mit example.com/wp-admin/customize.php nicht. Danke! Hat wie am Schnürchen funktioniert!
WPBeginner Support
Glad we could share this trick with you!
Admin
Dani
Hallo,
Ich möchte benutzerdefiniertes CSS hinzufügen, aber wie kann ich es entfernen, wenn etwas schief geht?
Bogdan
Hey, dieser Artikel ist sehr gut. Eine Frage jedoch: Muss ich die HTML-Seite nicht sehen, um benutzerdefiniertes CSS hinzuzufügen? Wie füge ich benutzerdefiniertes CSS hinzu, wenn ich die Selektoren und all das nicht kenne?
WPBeginner Support
Wir haben einen Leitfaden zur Verwendung des Inspect-Elements, den Sie sich unten ansehen können, um die Selektoren zu finden:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
cymon
Ich bin ein neuer Blogger. Gibt es eine Möglichkeit, seiten-spezifischen CSS-Code hinzuzufügen?
WPBeginner Support
Sie müssten die Seiten-ID als Teil des CSS hinzufügen, aber ja, das können Sie.
Admin
Jitin Mishra
Toller Artikel, um benutzerdefiniertes CSS in WordPress-Websites hinzuzufügen. Wir freuen uns auf weitere informative Beiträge dieser Art.
WPBeginner Support
Glad you found our guide helpful
Admin
Mohsin
Ich möchte mein WordPress-Menü per Code in ein Mega-Menü ändern. Kann ich mein Website-Menü mit HTML, CSS und JS in ein Mega-Menü umwandeln? Ich möchte dafür kein Plugin verwenden. Wenn wir eine neue Funktionalität zu einer WordPress-Website mit benutzerdefiniertem Code hinzufügen, was sind die Best Practices, damit diese benutzerdefinierte Arbeit bei der Aktualisierung des Themes oder von WordPress nicht verloren geht. Danke!
WPBeginner Support
Sie möchten ein Child-Theme erstellen, um Ihre Änderungen zu sichern, aber Sie benötigen möglicherweise einige PHP-Kenntnisse. Wir haben eine Anleitung zur Erstellung eines Child-Themes, die Sie sich unten ansehen können:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Admin
vijay v
können wir eine externe CSS-Datei hinzufügen (indem wir benutzerdefiniertes CSS verschieben), um die Seitenladezeit zu erhöhen (nachdem ich benutzerdefiniertes CSS hinzugefügt habe, hat sich die Ladezeit verringert), wenn ja, wie geht das?
Danke im Voraus
WPBeginner Support
Wenn wir richtig verstehen, was Sie suchen, sollten Sie sich unseren Artikel unten ansehen:
https://www.wpbeginner.com/wp-tutorials/how-wordpress-plugins-affect-your-sites-load-time/
Admin
billy king
Ist „unorthodoxes“ CSS in einem Child-Theme oder Custom CSS erlaubt?
WPBeginner Support
Solange das CSS auf das abzielt, was sich auf Ihrer Website befindet, können Sie jedes beliebige CSS verwenden.
Admin
Latonya Moore
Das ist großartig, aber gibt es eine Möglichkeit, CSS nur auf einer Seite hinzuzufügen? Beispiel: Ich möchte nur beim Überfahren oder Mouseover auf einem Text anzeigen oder ausblenden.
WPBeginner Support
Sie müssten entweder eine CSS-Klasse zu dem spezifischen Objekt hinzufügen oder die Seiten-ID zu Ihrem CSS hinzufügen, um es auf diese spezielle Seite zu beschränken. Wie Sie diese Informationen finden, erfahren Sie in unserem Artikel unten, wie Sie das Element untersuchen:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Shiva
Ich habe einige Änderungen an meiner Website vorgenommen, indem ich einige CSS-Codes im Theme-Editor bearbeitet habe. Was passiert, wenn ich mein WordPress auf die nächste Version aktualisiere? Bekommt es einen Fehler oder wird es zum Basisthema zurückgesetzt, oder wird mein Code auch nach der Aktualisierung meines WordPress wie vor der Aktualisierung angezeigt?
WPBeginner Support
Wenn Sie Ihr CSS im Bereich Darstellung > Customizer > Zusätzliches CSS hinzugefügt haben, bleiben Ihre CSS-Änderungen bei der Aktualisierung Ihrer Website erhalten.
Admin
Jo
Ich habe meine Website noch nicht ganz fertig gebaut, aber von der kostenlosen Version aufgerüstet, damit ich CSS verwenden kann, um Änderungen vorzunehmen. Meine Website ist noch nicht live. Mit dem Upgrade auf die Premium-Version hat sich der Update-Button nun in Veröffentlichen geändert. Bedeutet das, dass wenn ich auf Veröffentlichen klicke, um Änderungen zu speichern, meine Website live geschaltet wird?
Außerdem kann ich mich nicht mehr erinnern, welches Theme ich verwendet habe, wie finde ich heraus, welches Theme ich verwende?
Danke
WPBeginner Support
Es klingt, als ob Sie sich auf WordPress.com befinden. Wenn Sie einen Beitrag veröffentlichen, ist er für diejenigen sichtbar, die Ihre Website sehen können. Mit WordPress.com für eine private Website sind Sie eingeschränkt auf: https://en.support.wordpress.com/settings/privacy-settings
Sie sollten das aktive Theme unter "Design" > "Themes" sehen können.
Admin
Bruce William Taylor
„Der Tab wird eingeblendet und zeigt Ihnen ein einfaches Feld, in das Sie Ihr benutzerdefiniertes CSS einfügen können. Sobald Sie eine gültige CSS-Regel hinzufügen, können Sie sehen, wie sie im Live-Vorschaufenster Ihrer Website angewendet wird.“
Ich weiß bereits, WO ich das CSS hinzufügen soll. Woher weiß ich, was für CSS ich hinzufügen soll? Woher weiß ich, was die „gültigen CSS-Regeln“ sind?
WPBeginner Support
Hallo Bruce,
Dafür müssen Sie etwas grundlegendes CSS lernen. Es gibt mehrere Websites, die Schritt-für-Schritt-CSS-Tutorials für Anfänger anbieten. Wir empfehlen w3schools, da Sie dort CSS mit einer Live-Testfunktion üben können.
Admin
Ali
Wo wird der benutzerdefinierte CSS-Code gespeichert, da ich ihn bei der Übertragung zu einem neuen Hoster verloren habe?
mahaveer
Ich möchte externes CSS hinzufügen und Bilder in CSS einfügen...
Muhammad Adil
Was war die Bonus-Methode?
Ist das ein Plugin, das habe ich nicht verstanden. Können Sie mich bitte fragen?
Danke
Aditya Khuteta
Hallo! Ich möchte die Größe des Preistextes auf meiner Website ändern, da der Preistext dort zu klein ist. Bitte leiten Sie mich an, wie ich das tun kann.
Danke
Frank Lurz
2 Fragen:
1. Nur damit ich es richtig verstehe: „Plugins“ sind ein Ersatz für das Schreiben von CSS, eine schwierige Aufgabe für diejenigen von uns, die nichts über CSS wissen – ist das richtig?
2. Plugins, die auf der WP-Plugins-Seite zum Download angeboten werden, sind nur für Abonnenten verfügbar, die für den „Business“-Plan bezahlt haben, ist das richtig?
WPBeginner Support
Hallo Frank,
1. Nein, Plugins sind kein Ersatz für das Schreiben von benutzerdefiniertem CSS. Sie können benutzerdefiniertes CSS schreiben, ohne Plugins zu installieren. Weitere Details finden Sie in unserem Leitfaden zu Was sind WordPress-Plugins und wie funktionieren sie.
2. WENN Sie WordPress.com verwenden, müssen Sie auf den Business-Plan upgraden. Bitte lesen Sie unseren Leitfaden über den Unterschied zwischen selbst gehostetem WordPress.org und kostenlosem WordPress.com Blog.
Admin
Annie Mitchell
Hallo,
Ich bin ein Anfänger, wenn es um den Aufbau und die Gestaltung von Websites geht, und habe keine Kenntnisse von CSS. Ich verwende das Sydney-Theme auf meiner Website – und es ist mir irgendwie gelungen, meine Absatzschrift weiß zu machen. Ich habe gegoogelt und bemerkt, dass ein Herr das gleiche Problem hatte. Er hat es behoben, indem er ein Plugin heruntergeladen und benutzerdefiniertes CSS verwendet hat, aber ich hatte keinen Erfolg.
Das von ihm empfohlene CSS ist –
.entry-page p, .entry-post p { color: black !important; margin: 0 !important; padding: 0 !important; }
aber ich bin mir nicht sicher, warum es bei mir nicht funktioniert. Jede Hilfe wäre sehr willkommen.
Danke,
Annie
WPBeginner Support
Hallo Annie,
Zuerst empfehlen wir Ihnen, alle Ihre WordPress-Plugins zu deaktivieren. Besuchen Sie danach Ihre Website, um zu sehen, ob dies Ihr Problem behoben hat. Wenn ja, bedeutet dies, dass eine Einstellung in einem Ihrer Plugins das Problem verursacht hat. Wenn das Problem nicht behoben wird, versuchen Sie, zu einem Standard-Theme wie Twenty Seventeen zu wechseln. Wenn dies Ihr Problem behebt, bedeutet dies, dass Sie irgendwo in Ihrem Theme die Schriftarteinstellungen geändert haben.
Wenn nichts funktioniert, können Sie dieses benutzerdefinierte CSS ausprobieren:
p { color:#000; }1-click Use in WordPress
Admin
Jose
Eines der Plugins (Simple Custom CSS) wurde seit 2 Jahren nicht mehr aktualisiert, was in der Welt der WordPress-Plugins eine sehr lange Zeit ist. Dies ist ein Sicherheitsrisiko, daher würde ich persönlich nach einer Alternative suchen.
Rebecca
Hallo
Entschuldigung, ich weiß nichts über CSS und versuche, ein Problem zu lösen, weil ich keine Plugins suchen kann, aber das ist eine andere Geschichte! Ich poste hier jetzt, weil ich diese Nachricht erhalte, wenn ich zu Darstellung / CSS bearbeiten / zusätzliches CSS gehe.
" Es gibt 1 Fehler, der behoben werden muss, bevor Sie speichern können.
Trotzdem aktualisieren, auch wenn dies Ihre Website beschädigen könnte?
Ist das etwas, worüber ich mir Sorgen machen sollte?
der Text in der Box darunter lautet …
und hier ist ein roter Punkt
Hoffe, jemand kann helfen.
Danke
WPBeginner Support
Hallo Rebecca,
Sie können den CSS-Code kopieren, in eine Textdatei einfügen und als Sicherung speichern. Löschen Sie nun alles im Feld Zusätzliches CSS und beginnen Sie, Ihren benutzerdefinierten CSS-Code eine Regel nach der anderen hinzuzufügen, bis der Fehler erneut auftritt. Dies hilft Ihnen, den Fehler zu lokalisieren und zu beheben.
Admin
James
Dies funktioniert für kostenlose Konten nicht mehr. Die CSS-Option ist nicht mehr vorhanden und Sie benötigen ein Business-Konto, um ein entsprechendes Plugin zu installieren.
WPBeginner Support
Hallo James,
Sie verwenden wahrscheinlich WordPress.com. Bitte lesen Sie unseren Leitfaden über den Unterschied zwischen selbst gehostetem WordPress.org vs. kostenlosem WordPress.com-Blog.
Admin
scott
Vor WP Version 4.9 konnte ich meine benutzerdefinierten CSS (aus dem WP Customizer) ausschneiden und in Windows Notepad einfügen (und es behielt die Formatierung. Das habe ich oft gemacht, um es als Backup zu speichern, wenn ich neue benutzerdefinierte CSS hinzugefügt habe – falls ich einen Fehler gemacht habe.
Wenn ich es jetzt in Notepad einfüge, werden alle CSS-Zeilen ohne zeilenweise Formatierung in Notepad zusammengeführt.
Haben Sie eine Idee, warum oder wie ich das beheben kann? Ich habe bereits den "Zeilenumbruch"-Modus in Notepad eingestellt.
Danke.
WPBeginner Support
Hallo Scott,
Sie können versuchen, den Code in anderen Texteditoren wie Notepad++ zu speichern. Wenn das Problem weiterhin besteht, versuchen Sie WordPress-Fehlerbehebungstipps.
Admin
Joe MacMillan
Diese Website ist wirklich gut. Meine Website hatte keine Linkfarben, also habe ich diesen Code verwendet /* unbesuchter Link blau */
a:link {
Farbe: #196380;
}
/* besuchter Link grün */
a:visited {
color: #248f24;
}
/* Maus über Link orange */
a:hover { color: #ff3300; }
/* ausgewählter Link rot*/
a:active { color: #cc0000; }
aber es hat Farben für alles aktiviert, was ein Link ist, wie z. B. Menüs, in einer Farbe.
Ich möchte nur die Farben für Links.
Ich wäre Ihnen für jede Hilfe dankbar. Danke
WPBeginner Support
Hallo Joe,
In Ihrem CSS haben Sie nicht definiert, welche Bereiche Links in diesen Farben haben sollen, wodurch sie auf den gesamten Körper angewendet werden. Um herauszufinden, welche Bereiche Sie ansprechen müssen, müssen Sie das Inspect Tool verwenden, um die CSS-Klasse zu finden, die Ihr Theme für den Inhaltsblock verwendet.
Nehmen wir an, der Inhaltsblock in Ihrem Theme hat eine CSS-Klasse site-content, dann verwenden Sie diese in Ihrem CSS wie folgt:
.site-content a:link { color: #196380; } .site-content a:visited { color: #248f24; } .site-content a:active { color: #cc0000; } .site-content a:hover { color: #ff3300; }1-click Use in WordPress
Hope this helps
Admin
Rob
Ich liebe Ihre Seite!
Danke für all die hilfreichen Artikel.
Ich habe eine Frage zu meinem WordPress Premium Plan.
Ich möchte das folgende Skript zu meiner Website hinzufügen.
var refTagger = { settings: { bibleVersion: “NKJV” }
Kann ich das zum benutzerdefinierten CSS hinzufügen?
Ich habe in diesem Plan keine Möglichkeit, auf den Header oder Footer zuzugreifen
Danke,
Rob
WPBeginner Support
Hallo Rob,
Nein, das können Sie nicht. Bitte lesen Sie unseren Leitfaden über den Unterschied zwischen selbst gehostetem WordPress.org vs. kostenlosem WordPress.com Blog.
Admin
sammy
Das ist wirklich ein toller Artikel, ich muss anfangen zu lernen, wie ich mein eigenes CSS für meine Website erstelle
Thomas
Hallo,
Diese Funktion ist für den Website-Administrator in einem Multisite-WordPress-Netzwerk nicht aktiv.
Glauben Sie, dass die Aktivierung für den Website-Administrator (zum Beispiel mit diesem Plugin:) ein Sicherheitsproblem darstellen würde?
Danke!
WPBeginner Support
Hallo Thomas,
Ja, Sie können ein Plugin verwenden, um benutzerdefiniertes CSS hinzuzufügen.
Admin
Thomas
Hallo,
ja, ich weiß (ich habe bereits das sehr gute Simple Custom CSS Plugin verwendet), aber ich würde die native Funktion bevorzugen, da sie in WordPress implementiert ist.
Diese Funktion ist jedoch nur für den Netzwerkadministrator und nicht für den Site-Administrator bei einer Multisite-Installation verfügbar.
Die Berechtigungen können leicht geändert werden, um dem Site-Administrator zu erlauben, eigenes benutzerdefiniertes CSS im Customizer hinzuzufügen (mit der nativen WP-Funktion) (siehe dieses Plugin: http://www.wordpress.org/plugins/multisite-custom-css/), und ich frage mich, ob dies ein Sicherheitsproblem darstellen würde (basierend auf der Annahme, dass ich dem Site-Administrator nicht vertrauen kann)?
WPBeginner Support
Hallo Thomas,
Sorry, we totally misunderstood your question
Wir stimmen zu, dass dies ein Problem sein wird, deshalb ist die Funktion deaktiviert. Wenn Sie sie aktivieren, können die Benutzer ungefiltertes CSS hinzufügen. Sie sollten sie deaktiviert lassen.
Brice
Ich kenne mich mit Code nicht gut aus, daher frage ich mich, ob es eine Möglichkeit gibt, den ursprünglichen Code wiederherzustellen, wenn ich Änderungen vornehme und auf „Speichern und Veröffentlichen“ klicke, falls mir die Änderungen nicht gefallen, oder muss ich den ursprünglichen Code kopieren und speichern, falls ich ihn wiederherstellen möchte?
Ruth Billheimer
This is probably really naive, I don’t know much about code, so bear with me.. In the customise additional css, can you put in different things? I mean I have already put something in there that will change some of the colours. Now I want to put in something that will change the width of the page. (I am getting these bits of code from very helpful people, I know nothing!)
So will both of these things work? Or can you only change one thing? It doesn’t look like the page width has changed
Jos Schuurmans
Hallo,
Früher war es möglich, style.css direkt im WP-Admin unter dem Menüpunkt „Design“ zu bearbeiten.
Bei WP Multisite erfolgte dies über das Menü Netzwerk-Themes. Wurde diese Funktion eingestellt?
Prost,
Jos
Judy
Toller Beitrag, danke!
Kann mir jemand damit helfen? Ich habe eine kleine Anpassung an meinem Logo mit CSS Hero vorgenommen. Dann habe ich diese exakt 9 Codezeilen in mein Simple Custom CSS Plugin kopiert, nachdem ich CSS Hero deaktiviert hatte. Ich dachte, ich könnte die gleiche CSS Hero-Anpassung an meinem Logo mit Simple Custom CSS reproduzieren, aber stattdessen funktioniert es nicht.
Ich habe die Seite neu geladen und den Cache geleert, aber die Anpassung wird immer noch nicht wirksam. Woran liegt das?
Danke,
Judy
Robin
Das ist alles, was auf meinem CSS-Stylesheet steht. /* Willkommen zu benutzerdefiniertem CSS
Um zu erfahren, wie das funktioniert, siehe
*/
Lösche ich seine und füge meinen neuen Schriftcode hinzu? Hilfe????
WPBeginner Support
Ja. Dies sind nur Kommentare, die neuen Benutzern den Einstieg erleichtern sollen.
Admin
Paul H.
HERAUSRAGENDES PLUGIN!!!
Ich habe viel Zeit damit verbracht, den integrierten WP-Editor zu verwenden, um meine benutzerdefinierte Seite zu „stylen“, ohne Erfolg...
Ich habe nach einem Plugin gesucht, um zu sehen, ob es eines gibt, und Ihres gefunden… innerhalb von Minuten hatte ich Ihr Plugin installiert und aktiviert, dann meine CSS eingegeben, auf Aktualisieren geklickt und dann meine benutzerdefinierte Seite aktualisiert… es ist perfekt!
A+++
Ian
Hallo Leute,
Ich habe das Simple Custom CSS Plugin installiert und aktiviert. Ich habe eine Tabelle auf einer meiner Webseiten erstellt, um die ich einen Rahmen haben wollte.
Als Ergebnis habe ich den folgenden Code zu meinem einfachen benutzerdefinierten CSS-Plugin hinzugefügt
table { border: 2px solid black; }
und das benutzerdefinierte CSS aktualisiert, aber nichts ist passiert – ich bekomme immer noch keinen Rahmen für meine Webseite-Tabelle.
Irgendwelche Vorschläge?
Mit freundlichen Grüßen
Ian
Molly Setzer
Hallo Ian,
Wahrscheinlich rufen Sie es nicht mit dem richtigen CSS-Selektor auf. Verwenden Sie den am besten definierten Selektor, um das Element zu erfassen. Wenn Ihre Tabelle beispielsweise eine Klasse namens „info“ hat, hilft Ihnen die spezifischere Angabe table.info, das Element zu erreichen. Prüfen Sie, ob es im HTML weitere Selektoren gibt.
ramneet
Danke fürs Teilen. Es ist eine wunderbare Art, WordPress zu lernen, das gefällt mir.
Estee Peter
Wie füge ich benutzerdefiniertes CSS über mein bestehendes spezifisches Website-Plugin hinzu?
dies ist der folgende Code
.mobileonly { display: none; }
@media screen and (max-width: 480px) {
.mobileonly {
display: inline;
}
}
.hidemobileonly { display: inline; }
@media screen and (max-width: 480px) { .hidemobileonly { display: none; } }
Gary Zielke
Funktioniert das Custom CSS Plugin auf einzelnen Seiten?
Ich meine, kann ich einer einzelnen Seite Stil hinzufügen und nicht dem gesamten Theme?
Danke
WPBeginner Support
Nein, es funktioniert nicht auf einzelnen Seiten.
Admin
Tori Tran
danke ^^
Russell Bruce
Wäre es nicht nützlich zu erklären, was CSS tut und warum es nützlich ist
Joey
Danke, ich wünschte, ich hätte das früher gewusst, denn ich habe alle meine CSS-Änderungen in der style.css-Datei vorgenommen, da ich die Änderungen lokal vornehme, aber sagen Sie damit, dass ich diese Änderungen verlieren werde, wenn Genesis aus irgendeinem Grund beschließt, das von mir verwendete Child-Theme zu aktualisieren? Ich weiß nicht, ob ich jemals gesehen habe, dass sie ihre Child-Themes aktualisieren, obwohl ich Genesis erst seit ein paar Monaten benutze, daher nehme ich an, es ist durchaus möglich, dass sie bestimmte hier und da aktualisieren. Ich denke, zukünftig werde ich meine Änderungen im Plugin vornehmen, besonders wenn die Website live ist.
suzie
Verwenden Sie das Theme, das Ihnen gefällt, und erstellen Sie ein 'Child Theme'.
Das Child Theme ist dann einzigartig für Ihre Website.
Nehmen Sie alle Änderungen nur an Ihrem Child Theme vor.
Der Theme-Designer kann sein Theme aktualisieren, aber Ihre Änderungen bleiben erhalten. (Abhängig vom Update des Designers müssen Sie Ihre Änderungen möglicherweise anpassen, aber das ist unwahrscheinlich).
Rodney
Toller Artikel.
Ich wollte hier nur noch hinzufügen. Es gibt hier viele Optionen, besonders für Websites, die mit WordPress laufen. Das Erstellen von benutzerdefiniertem CSS ist einfach. Die meisten WordPress-Themes unterstützen normalerweise das Hinzufügen von benutzerdefiniertem CSS, ohne zusätzliche Plugins erstellen oder hinzufügen zu müssen.
Ich stimme auch zu, und die beste Option hier ist die Verwendung eines Child-Themes.
danke