17 zeitsparende CSS-Tipps für WordPress-Benutzer
Veröffentlicht: 2023-03-13WordPress bietet endlose Möglichkeiten zur Gestaltung und Anpassung Ihrer Website. In diesem Artikel geben wir einige praktische CSS-Tipps speziell für WordPress-Benutzer, von der Gestaltung Ihrer Kopfzeile bis hin zur Optimierung Ihrer Schriftarten.
Während WordPress viele vorgefertigte Themen und Vorlagen bietet, müssen Sie die Dinge manchmal selbst in die Hand nehmen und Anpassungen mit CSS vornehmen.
Wenn Sie sich bei der Arbeit an Ihrer WordPress-Site jemals eine dieser Fragen gestellt haben:
- "Wie entferne ich die Schaltfläche "Weiterlesen"?"
- „Wie kann ich die Farbe dieses Links ändern?“
- „Wie kann ich diesen Link nicht anklickbar machen, aber den Text auf der Seite behalten?“
… dann lesen Sie weiter, um einige wertvolle CSS-Tricks für Ihre Website zu lernen.
In diesem Tutorial behandeln wir Folgendes:
- CSS-Tipps für WordPress
- Zentrieren Sie ein Element horizontal und vertikal
- Ändern Sie die Linkfarbe
- Entfernen Sie einen Link
- Deaktivieren Sie einen Link (der Link bleibt sichtbar, aber Benutzer können nicht darauf klicken)
- Ändern Sie die Farbe der Links beim Hover
- Style-Links
- Gestalten Sie eine Schaltfläche
- Ändern Sie die Schriftart eines Abschnitts
- Erstellen Sie einen Sticky-Header
- Erstellen Sie einen klebrigen Header mit einem Schatteneffekt
- Fügen Sie einem Abschnitt eine Hintergrundfarbe hinzu
- Ändern Sie die Hintergrundfarbe des Körpers
- Ändern Sie die Farbe eines bestimmten Wortes oder Satzes
- Erstellen Sie einen Rahmen um ein Bild
- Erstellen Sie einen Hover-Effekt auf einem Bild
- Gestalten Sie ein Formular
- Erstellen Sie ein ansprechendes Layout
- Bringen Sie Ihre CSS-Fähigkeiten auf die nächste Stufe
CSS-Tipps für WordPress
Die einzigen zwei Dinge, die Sie wissen müssen, um diese Tipps umzusetzen, sind:
- Wie CSS funktioniert
- So fügen Sie CSS zu WordPress hinzu
Hinweis: CSS ist nicht riskant. Wenn Sie also einen Fehler machen, können Sie Ihren Code einfach löschen oder ändern ... es wird nichts kaputt gehen :)
Lassen Sie uns damit gleich zu einigen praktischen CSS-Tipps mit Beispielen übergehen, damit Sie es auf Ihrer eigenen WordPress-Site ausprobieren können:
Zentrieren Sie ein Element horizontal und vertikal
Um ein Element (z. B. ein Bild, Text oder ein div) sowohl horizontal als auch vertikal zu zentrieren, verwenden Sie den folgenden CSS-Code:
.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
In diesem Code wird die Eigenschaft position: relative verwendet, um das Element relativ zu seinem nächsten positionierten Vorfahren zu positionieren. Die Eigenschaften top: 50% und left: 50% verschieben das Element in die Mitte seines Containers. Schließlich zentriert die Eigenschaft transform: translate(-50%, -50%) das Element sowohl horizontal als auch vertikal, indem es um 50 % seiner eigenen Breite und Höhe nach hinten verschoben wird.
Ändern Sie die Linkfarbe
.item-class{
color : blue;
}
Sie können Farben wie Weiß, Schwarz, Blau, Rot … verwenden, aber vielleicht möchten Sie bestimmte Farben verwenden.
In diesem Fall können Sie es so machen:
.item-class{
color : #F7F7F7;
}
Wenn Sie eine Farbpalette für Ihr Website-Design erstellen möchten, versuchen Sie es mit dem Paletton-Tool. Es ist sehr hilfreich!
Hinweis: Wenn Sie Elemente kombinieren möchten, ist dies ziemlich einfach.
Angenommen, Sie möchten den Klick deaktivieren und den Link wieder schwarz darstellen.
Sie können diesen Code verwenden:
.item-class{
pointer-events : none;
color : black;
}
Entfernen Sie einen Link
.item-class{
display : none;
}
Hinweis: Manchmal müssen Sie möglicherweise ein a nach Ihrer Klasse setzen, damit es funktioniert, wie hier:
.item-class a{
display : none;
}
Versuchen Sie, das a hinzuzufügen oder ohne es zu experimentieren, um zu sehen, ob Ihr Code funktioniert oder nicht. Fügen Sie einfach Ihr CSS hinzu, speichern Sie und überprüfen Sie Ihr Frontend.
Deaktivieren Sie einen Link (der Link bleibt sichtbar, aber Benutzer können nicht darauf klicken)
Hinweis: Es ist immer besser, HTML zu ändern, um dies zu tun, aber wenn CSS einfacher oder die einzig mögliche Lösung ist, verwenden Sie diesen Code:
.item-class{
pointer-events: none;
}
Ändern Sie die Farbe der Links beim Hover
Sie können die Farbe von Links ändern, wenn ein Benutzer mit der Maus darüber fährt, indem Sie den folgenden CSS-Code verwenden:
a:hover {
color: red;
}
In diesem Code zielt der a:hover Selektor auf alle Links auf der Seite ab, über die der Benutzer gerade schwebt. Die Eigenschaft color: red ändert die Farbe des Textes auf Rot.
Style-Links
Um Links auf Ihrer Website zu gestalten, verwenden Sie den folgenden CSS-Code:
a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}
a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}
In diesem Code wird a Selektor verwendet, um alle Links auf der Seite zu formatieren. Die color Eigenschaft legt die Farbe der Links fest, und die text-decoration -Eigenschaft entfernt die standardmäßige Unterstreichung. Die Eigenschaft border-bottom fügt einen subtilen Unterstreichungseffekt hinzu. Die transition erzeugt einen sanften Übergangseffekt, wenn der Benutzer mit der Maus über den Link fährt. Der a:hover Selektor wird verwendet, um den Link zu gestalten, wenn der Benutzer den Mauszeiger darüber bewegt.
Gestalten Sie eine Schaltfläche
Verwenden Sie den folgenden Code, um eine Schaltfläche zu formatieren:
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
In diesem Code werden die verschiedenen Eigenschaften verwendet, um eine Schaltfläche zu formatieren, einschließlich der background-color und color für das Erscheinungsbild der Schaltfläche, die padding Eigenschaft für die Größe der Schaltfläche und die cursor Eigenschaft, um den Mauszeiger zu ändern, wenn der Mauszeiger über die Schaltfläche bewegt wird.
Ändern Sie die Schriftart eines Abschnitts
Ändern Sie die Schriftart eines Abschnitts Ihrer Website mit dem folgenden CSS-Code:
.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
In diesem Code legt die Eigenschaft font-family die Schriftart auf Arial oder eine ähnliche serifenlose Schriftart fest, die Eigenschaft font-size legt die Schriftgröße auf 16 Pixel fest und die Eigenschaft line-height legt den Abstand zwischen Textzeilen auf 1,5 fest mal die Schriftgröße.
Erstellen Sie einen Sticky-Header
Wenn Sie eine Kopfzeile erstellen möchten, die beim Scrollen des Benutzers oben auf der Seite fixiert bleibt, können Sie den folgenden CSS-Code verwenden:
.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}
In diesem Code fixiert die Eigenschaft position: fixed die Kopfzeile am oberen Rand des Ansichtsfensters, und die Eigenschaft top: 0 positioniert sie ganz oben auf der Seite. Die Eigenschaft width: 100% stellt sicher, dass sich die Kopfzeile über die gesamte Breite des Darstellungsbereichs erstreckt. Die background-color , color werden verwendet, um den Header zu formatieren, und die Eigenschaft z-index: 9999 stellt sicher, dass der Header über allen anderen Elementen auf der Seite angezeigt wird.
Erstellen Sie einen klebrigen Header mit einem Schatteneffekt
Verwenden Sie diesen CSS-Code, um eine klebrige Kopfzeile mit einem Schatteneffekt zu erstellen, der beim Scrollen des Benutzers oben auf der Seite fixiert bleibt:
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content {
padding-top: 100px;
}
In diesem Code wird die Eigenschaft position: fixed verwendet, um die Kopfzeile oben auf der Seite zu fixieren. Die Eigenschaften top: 0 und left: 0 positionieren die Kopfzeile in der oberen linken Ecke der Seite. Die Eigenschaft width: 100% legt die Breite der Kopfzeile auf die volle Breite der Seite fest. Die Eigenschaft background-color legt die Hintergrundfarbe der Kopfzeile fest, und die Eigenschaft z-index stellt sicher, dass die Kopfzeile über anderen Elementen auf der Seite angezeigt wird. Schließlich fügt die box-shadow Eigenschaft der Kopfzeile einen subtilen Schatteneffekt hinzu. Der .content Selektor wird verwendet, um oben auf der Seite Padding hinzuzufügen, damit der Inhalt nicht von der festen Kopfzeile verdeckt wird.
Fügen Sie einem Abschnitt eine Hintergrundfarbe hinzu
Möchten Sie einem Abschnitt Ihrer Website eine Hintergrundfarbe hinzufügen? Verwenden Sie dann den folgenden CSS-Code:
.section {
background-color: #f2f2f2;
padding: 20px;
}
In diesem Code legt die Eigenschaft background-color: #f2f2f2 die Hintergrundfarbe auf ein helles Grau fest, und die Eigenschaft padding: 20px fügt 20 Pixel Platz um den Inhalt innerhalb des Abschnitts hinzu.
Ändern Sie die Hintergrundfarbe des Körpers
Fügen Sie diesen Code hinzu, um die Hintergrundfarbe des Hauptteils Ihrer Website zu ändern:
body {
background-color: #f5f5f5;
}
In diesem Code legt die Eigenschaft background-color die Hintergrundfarbe auf ein helles Grau fest.
Ändern Sie die Farbe eines bestimmten Wortes oder Satzes
Um die Farbe eines bestimmten Wortes oder Ausdrucks innerhalb eines Textblocks zu ändern, können Sie den folgenden CSS-Code verwenden:
p span {
color: red;
}
In diesem Code zielt der p span Selektor auf jedes span Element ab, das innerhalb eines p Elements erscheint. Sie können dann das Wort oder den Satz, auf den Sie abzielen möchten, mit einem span Element in Ihrem HTML umschließen, wie folgt:
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Dadurch würde der Ausdruck „consectetur adipiscing elit“ rot erscheinen.
Erstellen Sie einen Rahmen um ein Bild
So fügen Sie einen Rahmen um ein Bild hinzu:
img {
border: 2px solid #ccc;
}
In diesem Code legt die Eigenschaft border die Breite, den Stil und die Farbe des Rahmens fest. Der Wert 2px legt die Breite des Rahmens auf 2 Pixel fest, solid setzt den Stil auf eine durchgezogene Linie und #ccc setzt die Farbe auf ein helles Grau.
Erstellen Sie einen Hover-Effekt auf einem Bild
Verwenden Sie dieses Code-Snippet, um einen Hover-Effekt auf einem Bild zu erstellen:
img:hover {
opacity: 0.8;
}
In diesem Code zielt der Selektor img:hover auf das Bild ab, wenn der Benutzer den Mauszeiger darüber bewegt. Die Eigenschaft opacity legt die Transparenz des Bildes fest. In diesem Fall wird der Wert auf 0,8 gesetzt, wodurch das Bild leicht transparent wird, wenn der Benutzer mit der Maus darüber fährt.
Gestalten Sie ein Formular
Gestalten Sie ein Formular auf Ihrer Website mit dem folgenden CSS-Code:
form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
form label {
display: block;
margin-bottom: 10px;
}
form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}
form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
In diesem Code werden die verschiedenen Eigenschaften verwendet, um ein Formular zu formatieren, einschließlich der Eigenschaften background-color , padding und border-radius für das Gesamterscheinungsbild des Formulars. Die form label wird verwendet, um die mit jedem Formularfeld verknüpften Beschriftungen zu gestalten. Der Selektor form input[type="text"], form input[type="email"], form textarea wird verwendet, um die verschiedenen Eingabefelder im Formular zu formatieren. Der form input[type="submit"] Selektor wird verwendet, um die Submit-Schaltfläche zu gestalten.
Erstellen Sie ein ansprechendes Layout
Wenn Sie ein responsives Layout erstellen möchten, das sich an verschiedene Bildschirmgrößen anpasst, verwenden Sie den folgenden CSS-Code:
@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}
.menu {
display: none;
}
.mobile-menu {
display: block;
}
}
@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}
.menu {
display: block;
}
.mobile-menu {
display: none;
}
}
In diesem Code wird die @media Regel verwendet, um unterschiedliche Stile für unterschiedliche Bildschirmgrößen anzugeben. Die erste @media Regel zielt auf Bildschirme mit einer maximalen Breite von 768 Pixel ab, und die zweite @media Regel zielt auf Bildschirme mit einer minimalen Breite von 769 Pixel ab. Die verschiedenen Selektoren innerhalb jeder @media Regel werden verwendet, um das Layout und Erscheinungsbild der Seite basierend auf der Bildschirmgröße anzupassen.
Noch ein CSS-Tipp…
Möglicherweise funktioniert Ihr Code nicht, obwohl Sie alles richtig gemacht haben. Dies kann daran liegen, dass bereits ein CSS-Code vorhanden ist, der etwas anderes als Ihr Code aussagt.
Um dies zu überschreiben, fügen Sie einfach !important wie folgt hinzu:
.item-class{
pointer-events: none !important;
}
Dies sind nur einige Beispiele für praktische Möglichkeiten, wie Sie CSS verwenden können, um Ihre WordPress-Website zu verbessern.
Mit CSS sind die Möglichkeiten zum Anpassen des Erscheinungsbilds Ihrer Website praktisch unbegrenzt. Indem Sie diese Tipps lernen und anwenden, können Sie eine Website erstellen, die nicht nur optisch ansprechend ist, sondern auch für eine bessere Benutzererfahrung optimiert ist.
Bringen Sie Ihre CSS-Fähigkeiten auf die nächste Stufe
Egal, ob Sie ein Anfänger oder ein erfahrener professioneller Webentwickler oder Webdesigner sind, wenn Sie tiefer in die Verwendung von CSS mit WordPress eintauchen möchten, helfen Ihnen diese zusätzlichen CSS-Tutorials dabei, Ihr Wissen und Ihre Fähigkeiten zu erweitern:
- 10 einfache Tipps zum Lernen von CSS für WordPress – Praktische Tipps für Anfänger, die CSS speziell für die Verwendung mit WordPress lernen möchten. Es deckt alles ab, vom Verständnis der CSS-Syntax bis zur Verwendung von CSS-Frameworks.
- Lernen und Referenzieren von CSS für WordPress – Ein umfassender Leitfaden zum Erlernen und Referenzieren von CSS speziell für die Verwendung mit WordPress. Es behandelt Themen wie die Verwendung des WordPress Customizer, das Verständnis von CSS-Selektoren und die Arbeit mit untergeordneten Themen.
- Die 7 besten Websites, um CSS-Snippets und Inspiration zu finden – Suchen Sie nach Inspiration für Ihren CSS-Code? Dieser Artikel listet sieben Websites auf, die CSS-Snippets und Beispiele anbieten, die Sie in Ihrer eigenen WordPress-Website verwenden können.
- So gestalten Sie Bilder auf Ihrer WordPress-Website mit CSS – Bilder sind ein wichtiger Bestandteil jeder Website, und dieser Artikel bietet Tipps, wie Sie sie mit CSS gestalten können. Sie erfahren, wie Sie Rahmen hinzufügen, Bildgröße und -ausrichtung ändern und vieles mehr.
- So fügen Sie Ihrer WordPress-Site benutzerdefiniertes CSS hinzu – Dieser Artikel führt Sie durch den Prozess des Hinzufügens von benutzerdefiniertem CSS zu Ihrer WordPress-Website, wobei sowohl der integrierte Customizer als auch Plugins verwendet werden.
- Kostenlose CSS-Plugins für die Live-Bearbeitung Ihrer WordPress-Site – Dieser Artikel listet einige kostenlose CSS-Plugins auf, mit denen Sie Ihre WordPress-Website live bearbeiten können, wodurch es einfacher wird, die Auswirkungen Ihrer CSS-Änderungen in Echtzeit zu sehen.
- 14 coole CSS-Animationstools für WordPress – Wenn Sie einige Animationen zu Ihrer WordPress-Website mit CSS hinzufügen möchten, listet dieser Artikel einige coole Tools auf, die Sie dafür verwenden können.
- Mauerwerks- und Rasterlayouts mithilfe von CSS zu Ihrer WordPress-Site hinzufügen – Dieser Artikel erklärt, wie Sie CSS verwenden, um Mauerwerks- und Rasterlayouts zu Ihrer WordPress-Website hinzuzufügen und so ein optisch ansprechenderes Design zu erstellen.
- 25 Expertentipps für sauberere CSS-Codierung für WordPress – Wenn Sie die Sauberkeit und Lesbarkeit Ihres CSS-Codes verbessern möchten, bietet dieser Artikel 25 Expertentipps dafür.
- 25 Profi-Tipps zur Verbesserung Ihres CSS-Workflows – Tipps zur Verbesserung Ihres CSS-Workflows, von der Verwendung von CSS-Präprozessoren bis zur Verwendung von Browser-Entwicklertools zum Debuggen Ihres Codes.
Klicken Sie auf die Links, um mehr zu erfahren und beginnen Sie noch heute mit der Verbesserung Ihrer WordPress-Website.
Mitwirkende
Vielen Dank an WPMU DEV-Mitglied Antoine von Incensy für den Beitrag zu der Idee für diesen Beitrag und einige der oben verwendeten CSS-Beispiele. Weitere Informationen finden Sie im Agenturpartnerprofil von Incensy.
***
Hinweis: Wir akzeptieren keine Artikel aus externen Quellen. WPMU DEV-Mitglieder können jedoch über das Blog XChange Ideen und Vorschläge für Tutorials und Artikel in unserem Blog einbringen.