[Neu] Cloud-Backups werden einfacher - Duplicator Cloud eliminiert Speicher von Drittanbietern
Joella Dunn
Joella Dunn
John Turner
John Turner
Haben Sie schon einmal auf Ihre WordPress-Website gestarrt und gedacht: "Sie ist so gut wie perfekt, aber die Schaltfläche hat den falschen Blauton" oder "Ich wünschte, ich könnte den Text ein bisschen größer machen"?
WordPress-Themes werden mit Anpassungsoptionen geliefert, aber manchmal können sie nicht alles abdecken, was Sie vielleicht ändern möchten.
Hier kommt CSS ins Spiel - es ist wie ein Zauberstab, mit dem Sie das Aussehen Ihrer Website genau nach Ihren Wünschen gestalten können.
In diesem Leitfaden zeige ich Ihnen, was CSS ist, wie Sie Ihre eigenen benutzerdefinierten Stile hinzufügen können und einige praktische Beispiele für den Einstieg.
Am Ende werden Sie sich wohler fühlen, wenn Sie die visuellen Anpassungen vornehmen, die Ihre Website von "fast fertig" zu "genau richtig" machen.
Stellen Sie sich Ihre WordPress-Website wie ein Haus vor. Der HTML-Code bildet die Struktur - die Wände, Räume und das Fundament. CSS (Cascading Style Sheets) sind alle Elemente der Inneneinrichtung: die Farben, die Anordnung der Möbel, die Beleuchtung und die dekorativen Elemente.
CSS gibt Ihrem Browser vor, wie der Inhalt Ihrer Seite dargestellt werden soll. Möchten Sie, dass Ihr gesamter Absatztext blau ist? Mit CSS ist das möglich.
Benötigen Sie mehr Platz zwischen Ihrer Überschrift und dem darunter liegenden Absatz? Auch das geht mit CSS.
Die Grundstruktur von CSS folgt diesem Muster:
selector { property: value; }
Der Selektor zielt auf bestimmte Elemente auf Ihrer Seite ab, und die Paare aus Eigenschaft und Wert definieren, wie diese Elemente aussehen sollen.
Zum Beispiel:
p { color: blue; }
Diese einfache Zeile weist den Browser an, den gesamten Absatztext blau darzustellen. Das ist schon alles!
Das Konzept von CSS ist zwar einfach, doch wird es mächtig, wenn Sie damit beginnen, verschiedene Selektoren und Eigenschaften zu kombinieren, um präzise Styling-Regeln für Ihre Website zu erstellen.
CSS in WordPress befindet sich nicht nur an einem Ort, sondern ist über die gesamte Website verteilt, weshalb es auch "kaskadierend" genannt wird. Wenn Sie diese Hierarchie verstehen, wissen Sie, wo Sie Änderungen vornehmen müssen.
Die Datei style.css Ihres Themes ist die Grundlage. Sie enthält alle grundlegenden Gestaltungsregeln, die Ihrem Thema sein unverwechselbares Aussehen verleihen. Betrachten Sie sie als das Standardpaket für die Inneneinrichtung.
Der WordPress Customizer bietet einen speziellen Abschnitt "Zusätzliches CSS", in dem Sie sicher Ihre eigenen Stile hinzufügen können. Diese setzen die Standardeinstellungen des Themas außer Kraft und überleben Aktualisierungen des Themas.
Wenn Sie umfangreiche Änderungen vornehmen, ist ein Child-Theme die beste Wahl. Seine style.css-Datei erbt alles vom übergeordneten Thema, aber alle Stile, die Sie hinzufügen, haben Vorrang.
Einige Plugins bringen ihr eigenes CSS mit, um ihre spezifischen Funktionen zu gestalten. Diese werden in der Regel nach den Theme-Styles geladen.
Der Block-Editor (Gutenberg) und der Full-Site-Editor bieten neue Möglichkeiten zum Hinzufügen von CSS, mit denen Sie bestimmte Blöcke oder Abschnitte gestalten können, ohne die gesamte Website zu beeinflussen.
Gelegentlich sieht man Inline-CSS - Stile, die mit dem style-Attribut direkt auf HTML-Elemente angewendet werden. Von diesem Ansatz wird im Allgemeinen für die seitenweite Gestaltung abgeraten, da er schwieriger zu pflegen ist.
Das Verständnis dieser Kaskade ist wichtig, denn wenn Stile miteinander in Konflikt geraten, gewinnt das spezifischere oder später ladende CSS. Deshalb können Sie das Styling Ihres Themes mit benutzerdefinierten CSS überschreiben.
Das Erlernen von CSS gibt Ihnen eine Kontrolle, die die Theme-Optionen allein nicht bieten können.
Viele WordPress-Benutzer stoßen auf eine frustrierende Mauer, wenn sie etwas am Erscheinungsbild ihrer Website nicht ändern können. Der Farbwähler hat nicht den richtigen Farbton. Die Abstände zwischen den Elementen sehen nicht gut aus. Die Schriftgröße sollte nur ein bisschen größer sein.
Selbst mit grundlegenden CSS-Kenntnissen können Sie diese genauen Anpassungen selbst vornehmen.
CSS ermöglicht es Ihnen, Ihre Website wirklich einzigartig zu gestalten. Ohne CSS sind Sie auf die Anpassungsoptionen beschränkt, die Ihr Themenentwickler vorgesehen hat. Mit CSS können Sie sich von diesen Beschränkungen befreien.
Wenn visuelle Störungen auftreten (und das werden sie), können Sie sie mit CSS schnell beheben. Vielleicht hat eine Plugin-Aktualisierung dazu geführt, dass sich Text überschneidet, oder eine Themenaktualisierung hat das Styling Ihrer Schaltflächen verändert. Ein paar Zeilen CSS können diese Probleme oft sofort lösen.
Vor allem aber bildet das Erlernen von CSS eine Grundlage für das Verständnis der Funktionsweise von WordPress-Themes. Wenn Sie einmal verstanden haben, wie CSS das Erscheinungsbild steuert, werden Sie besser verstehen, warum die Dinge so aussehen, wie sie aussehen - was die Fehlersuche erheblich beschleunigt.
Es gibt viele zugängliche Ressourcen, um CSS zu erlernen, viele davon kostenlos.
Mozilla Developer Network (MDN) Web Docs ist eine hervorragende Ressource für Webtechnologien, einschließlich CSS. In den Tutorials werden Konzepte mit praktischen Beispielen in verständliche Stücke zerlegt.
W3Schools bietet einsteigerfreundliche CSS-Lektionen mit interaktiven Beispielen, bei denen Sie den Code direkt in Ihrem Browser testen können. Durch diesen praxisnahen Ansatz wird das Lernen weniger abstrakt.
YouTube ist voll mit Tutorials speziell für WordPress-CSS. Zu sehen, wie jemand Änderungen in Echtzeit durchführt, kann helfen, Konzepte zu verstehen, wenn Texterklärungen nicht genug sind.
Viele Kursplattformen wie Coursera und Udemy bieten kostenlose (oder sehr günstige) CSS-Kurse an. Einige konzentrieren sich speziell auf WordPress und zeigen Ihnen genau, wie Sie Elemente des Themes gezielt einsetzen können.
Am effektivsten lernen Sie, wenn Sie tatsächlich üben. Richten Sie eine Testseite ein (experimentieren Sie nicht auf Ihrer Live-Seite!) und versuchen Sie, kleine Änderungen vorzunehmen. Sehen Sie, was passiert, wenn Sie Eigenschaften wie Farben, Ränder oder Schriftgrößen anpassen.
Denken Sie daran, dass Sie nicht jede CSS-Eigenschaft auswendig lernen müssen. Selbst professionelle Entwickler schlagen regelmäßig Dinge nach. Was zählt, ist das Verständnis der Kernkonzepte.
WordPress bietet mehrere Möglichkeiten, benutzerdefiniertes CSS hinzuzufügen. Jede hat ihre Vorteile, je nach Ihren Bedürfnissen und Ihrem Komfortniveau.
Der WordPress Customizer ist der sicherste Ort, um einfach CSS zu WordPress hinzuzufügen.
Navigieren Sie in Ihrem WordPress-Dashboard zu Erscheinungsbild " Anpassen " Zusätzliche CSS.
Es wird ein Code-Editor angezeigt, in den Sie Ihr CSS eingeben oder einfügen können.
Sie können Ihre Änderungen in Echtzeit überprüfen, bevor Sie sie veröffentlichen. Wenn etwas nicht richtig aussieht, können Sie Ihren Code anpassen und das Ergebnis sofort sehen.
Der Customizer ist perfekt für kleine bis mittlere Mengen an CSS. Wenn Sie Hunderte von Codezeilen hinzufügen möchten, sollten Sie vielleicht eine der anderen Methoden in Betracht ziehen.
WPCode (früher Insert Headers and Footers) ist ein beliebtes Plugin für Codeschnipsel. Es bietet eine besser organisierte Möglichkeit, Ihr benutzerdefiniertes CSS zu verwalten.
Navigieren Sie nach der Installation des Plugins zu Code Snippets " Snippet hinzufügen. Bewegen Sie den Mauszeiger über Add Your Custom Code und klicken Sie auf Add Custom Snippet.
Wählen Sie CSS Snippet als Codetyp, geben Sie ihm einen beschreibenden Namen und fügen Sie Ihren CSS-Code hinzu.
WPCode bietet mehrere Vorteile gegenüber dem Customizer. Sie können mehrere CSS-Snippets erstellen, die leichter zu verwalten sind als ein großer Codeblock.
Sie können auch genau steuern, wo und wann Snippets ausgeführt werden. Benötigen Sie CSS, das nur für Ihre Blogbeiträge gilt? WPCode kann das bedingte Laden übernehmen.
Das Plugin enthält Funktionen zur Fehlervermeidung, die helfen, Syntaxfehler zu erkennen, bevor sie sich auf Ihre Live-Site auswirken - ein hilfreiches Sicherheitsnetz, wenn Sie noch lernen.
Wenn Sie ein Block-Theme verwenden, haben Sie Zugriff auf den Full Site Editor und nicht auf den Customizer. Sie können jedoch immer noch benutzerdefinierte CSS zu Ihrer Website hinzufügen.
Rufen Sie diese URL auf und passen Sie sie an die Domain Ihrer Website an: https://example.com/wp-admin/customize.php
Dadurch wird eine eingeschränkte Version von FSE geöffnet. Sie werden sehen, dass es einen Abschnitt "Zusätzliche CSS" gibt, genau wie im Customizer.
Für umfangreiche Anpassungen müssen Sie möglicherweise CSS in den WordPress-Theme-Dateien direkt bearbeiten.
In Ihrem Dashboard können Sie unter Erscheinungsbild " Editor für Themendateiendie Datei style.css bearbeiten.
Dies ist jedoch mit einer wichtigen Warnung verbunden: Ich würde nicht empfehlen, die Dateien eines übergeordneten Themas direkt zu ändern.
Erstellen Sie stattdessen ein Child-Theme. Ein untergeordnetes Thema erbt alle Funktionen und das Design des übergeordneten Themas und ermöglicht es Ihnen, Änderungen vorzunehmen, die bei Aktualisierungen nicht überschrieben werden.
Sobald Sie ein Child-Theme aktiviert haben, können Sie die CSS-Dateien in Ihrem WordPress-Theme-Dateieditor bearbeiten. Sie können auch über FTP oder den Dateimanager Ihres Hosting-Anbieters auf Ihre Theme-Dateien zugreifen.
Sehen wir uns einige praktische Beispiele für einfache benutzerdefinierte CSS an, die häufige WordPress-Anpassungsanforderungen erfüllen.
Möchten Sie Ihre Zitatblöcke stärker hervorheben? Sie können sie mit CSS ausrichten:
.wp-block-quote {
background-color: #f9f9f9;
border-left: 4px solid #0073aa;
padding: 20px;
}Dadurch erhalten die Anführungszeichenblöcke einen hellgrauen Hintergrund, einen blauen linken Rand und etwas Polsterung, um Platz zu schaffen.
Vielleicht brauchen Ihre Seitenleisten-Widgets eine optische Trennung. Sie können Raum und Rahmen zwischen ihnen hinzufügen:
.widget {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eaeaea;
}Jedes Widget hat nun mehr Platz unter sich und eine feine Trennlinie.
Navigationsmenüs müssen oft stilistisch an das Design Ihrer Website angepasst werden:
.main-navigation li a {
color: #333333;
font-weight: 500;
text-transform: uppercase;
}
.main-navigation li a:hover {
color: #0073aa;
}Dadurch werden die Menülinks dunkelgrau, leicht fett, in Großbuchstaben und blau, wenn man mit dem Mauszeiger darüber fährt.
Die Typografie hat einen großen Einfluss auf die Persönlichkeit Ihrer Website. Hier ist ein Beispiel dafür, wie Sie die Schriftarten mit CSS anpassen können:
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}Denken Sie daran, dass Sie bei der Verwendung von Nicht-Standard-Schriften diese zunächst mit @font-face oder über eine Verknüpfung zu Google Fonts importieren müssen.
Das Ändern von Farben ist eine der häufigsten CSS-Aufgaben. Mit diesen wenigen Zeilen wird der Hintergrund Ihrer Website hellgrau und Links werden rosa, wenn man mit dem Mauszeiger darüberfährt, und erhalten einen dunkleren Farbton:
body {
background-color: #f5f5f5;
}
a {
color: #e94c89;
}
a:hover {
color: #c13872;
}Der Platz um und innerhalb von Elementen (Rand und Auffüllung) beeinflusst die Lesbarkeit erheblich. Dies fügt Raum unter Absätzen hinzu und schafft Polsterung um Ihren Hauptinhaltsbereich:
.entry-content p {
margin-bottom: 20px;
}
.site-content {
padding: 40px 20px;
}Formulare brauchen oft Hilfe beim Styling, damit sie zum Design Ihrer Website passen. Diese Stile schaffen saubere Formularfelder mit einer auffälligen Schaltfläche zum Absenden:
input[type="text"],
input[type="email"],
textarea {
border: 1px solid #ddd;
padding: 10px;
border-radius: 4px;
}
input[type="submit"] {
background-color: #0073aa;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
}Selbst erfahrene Entwickler stoßen auf CSS-Probleme. Hier sind einige häufige Probleme und wie man sie löst.
Sie haben neues CSS hinzugefügt, aber Ihre Website sieht genauso aus wie vorher. Bevor Sie in Panik geraten: Das liegt oft nur am Browser-Caching.
Browser speichern (cachen) CSS-Dateien, um Websites schneller zu laden. Das bedeutet, dass sie Ihnen möglicherweise alte CSS-Dateien anstelle Ihrer neuen Änderungen anzeigen.
Versuchen Sie es mit einem harten Refresh, indem Sie Strg+F5 (Windows) oder Cmd+Shift+R (Mac) drücken. Dadurch wird Ihr Browser gezwungen, neue Kopien aller Dateien abzurufen, anstatt gecachte Versionen zu verwenden.
Wenn Sie ein Caching-Plugin wie WP Super Cache oder W3 Total Cache verwenden, müssen Sie auch diesen Cache leeren, wenn Sie CSS-Änderungen vornehmen.
Suchen Sie in den Einstellungen Ihres Caching-Plugins nach einer Schaltfläche Cache löschen.
Solange Sie diesen Cache nicht löschen, sind Ihre Änderungen möglicherweise nur für Sie sichtbar (wenn Sie angemeldet sind), nicht aber für normale Besucher.
Wenn Ihr CSS nicht funktioniert, liegt das Problem oft am Selektor - Sie zielen auf das falsche Element.
CSS folgt einer Hierarchie der Spezifität. Spezifischere Selektoren haben Vorrang vor allgemeinen Selektoren. Zum Beispiel, #sidebar p (eine ID plus ein Element) überschreibt die Stile, die nur für p (ein Element).
Rechtschreibfehler sind leicht zu übersehen. War es .sidebar oder .side-bar? Ein Bindestrich macht den Unterschied aus.
Die Entwicklerwerkzeuge Ihres Browsers sind von unschätzbarem Wert für die Fehlersuche. Klicken Sie mit der rechten Maustaste auf das Element, das Sie gestalten möchten, und wählen Sie "Prüfen". Sie sehen dann alle derzeit angewendeten Stile und welche davon überschrieben werden.
Der !important Deklaration erzwingt die Anwendung eines Stils unabhängig von der Spezifität:
p { color: blue !important; }
Obwohl es verlockend ist, wenn man frustriert ist, bereitet !important langfristig Kopfschmerzen. Es unterbricht die natürliche Kaskadierung von CSS und führt zu "Spezifitätskriegen", bei denen Sie am Ende mehrere !important-Deklarationen benötigen.
Machen Sie stattdessen Ihre Selektoren spezifischer. Wenn .content p nicht funktioniert, versuchen Sie .content .entry-content p um genauer zu sein.
Ihre Website muss überall gut aussehen. Was auf Ihrem Laptop funktioniert, kann auf mobilen Bildschirmen nicht funktionieren.
Verwenden Sie die Entwicklerwerkzeuge Ihres Browsers, um verschiedene Bildschirmgrößen zu simulieren. Klicken Sie in Chrome mit der rechten Maustaste, wählen Sie "Prüfen" und suchen Sie nach dem Symbol für die Geräteumschaltung.
Bevor Sie CSS-Änderungen vornehmen, vor allem wenn es sich um umfangreiche Änderungen handelt, sollten Sie Ihre Website sichern. Das ist nicht nur ein guter Rat - es ist ein wichtiger Schutz.
Tools wie Duplicator machen Backups ganz einfach. Erstellen Sie einfach ein neues Backup und wählen Sie die Voreinstellung "Full Site".
Für zusätzlichen Schutz vor standortspezifischen Fehlern sende ich Backups immer in die Cloud. Wählen Sie bei der Erstellung des Backups eine der vielen Cloud-Speicher-Integrationen.
Dank dieses Sicherheitsnetzes können Sie freier experimentieren, denn Sie wissen, dass Sie alles wiederherstellen können, wenn etwas schief geht.
Eine fünfminütige Sicherung kann Ihnen Stunden der Fehlersuche ersparen. Wenn Sie einen CSS-Fehler bemerken, gehen Sie zu dieser Sicherung und klicken Sie auf Wiederherstellen.
Selbst wenn Ihr Backup in der Cloud gespeichert ist, lädt Duplicator es herunter und stellt es wieder her. Es wird so sein, als wäre der Fehler nie passiert!
CSS ist bereits in Ihrem WordPress-Theme integriert. Sie können Ihr eigenes benutzerdefiniertes CSS über den Customizer(Erscheinungsbild " Anpassen " Zusätzliches CSS), mit einem WordPress-Code-Plugin wie WPCode oder durch Erstellen eines Child-Theme und Bearbeiten seiner style.css-Datei hinzufügen.
WordPress verwendet beides. HTML erstellt die Struktur Ihrer Seiten und Beiträge, während CSS steuert, wie diese Struktur aussieht. WordPress generiert den HTML-Code automatisch auf der Grundlage Ihrer Inhalte, und Ihr Theme liefert das CSS für die Gestaltung.
Hier sind ein paar einfache Beispiele für benutzerdefinierte WordPress-CSS:
p { font-size: 18px; }.button { background-color: #ff6b6b; }.wp-block-image { margin-bottom: 30px; }.element-to-hide { display: none; }.special-text { font-weight: 700; }Sie brauchen CSS nicht zu lernen, wenn Sie mit den integrierten Optionen Ihres Themes zufrieden sind. Wenn Sie jedoch selbst grundlegende CSS-Kenntnisse erwerben, haben Sie viel mehr Kontrolle über das Erscheinungsbild Ihrer Website und können visuelle Probleme beheben, ohne auf Theme-Updates warten oder einen Entwickler bezahlen zu müssen.
Ja, CSS ist neben HTML und JavaScript eine der wichtigsten Technologien, die von allen Frontend-Webentwicklern verwendet werden. Es ist eine wesentliche Fähigkeit für jeden, der professionell Websites erstellt.
CSS ist kein mysteriöser Code, den nur professionelle Entwickler verstehen können. Es ist ein praktisches Werkzeug, mit dem Sie das Aussehen Ihrer WordPress-Website präzise steuern können.
Der Schlüssel ist, klein anzufangen - hier eine Farbe ändern, dort ein paar Abstände anpassen. Mit zunehmender Routine werden Sie in der Lage sein, komplexere Anpassungen vorzunehmen.
Denken Sie daran, dass jeder professionelle WordPress-Entwickler genau da angefangen hat, wo Sie jetzt sind. Sie haben gelernt, indem sie experimentiert, Fehler gemacht und ihre Fähigkeiten schrittweise ausgebaut haben.
Wenn Sie anfangen, halten Sie eine Sicherungskopie mit Duplicator bereit. Wenn also etwas nicht funktioniert, können Sie Ihre Änderungen jederzeit rückgängig machen und es erneut versuchen.
Wenn Sie schon einmal hier sind, werden Ihnen bestimmt auch diese anderen WordPress-Anleitungen gefallen:
Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, erhalten wir möglicherweise eine Provision. Wir empfehlen nur Produkte, von denen wir glauben, dass sie für unsere Leser einen Mehrwert darstellen.
