In diesem Tutorial werden wir auf die Verwendung von CSS für WordPress eingehen. Lange Zeit war es nötig ein Child-Theme anzulegen oder ein separates WordPress Plugin zu installieren, um selbst geschriebenes CSS in WordPress einbringen zu können. Zum heutigen Datum ist dies nicht mehr nötig. WordPress bietet diese Möglichkeit nun Standardmäßig an.

Wie fügt man eigenes CSS in WordPress ein?

Um eigenes CSS unterzubringen, gibt es in WordPress nun ein extra Eingabefeld, welches ihr unter folgendem Reiter findet:

Design -> Customizer -> Zusätzliches CSS

In diesem Feld könnt Ihr euer eigenes CSS eintragen und selbst wenn Ihr euer Theme wechselt, wird das CSS bestehen bleiben.

Wieso sollte man eigenes CSS schreiben? Globale Überschriften

Durch CSS lassen sich viele fundamentale Design-Einstellungen kontrollieren, für die eigene Plugins überflüssig wären. Für was sich eigenes CSS super eignet ist z. Bsp. für die Erstellung des Style Guides einer Webseite.

Das Grundgerüst eines Style Guides für eine Webseite könnte z. Bsp. wie folgt aussehen:

/* style guide for headlines and paragraph text */
h1 {
font-size: 40px;
color: #0058cb;
font-weight: 600;
}

h2 {
font-size: 37px;
color: #0058cb;
font-weight: 600;
}

h3 {
font-size: 24px;
font-weight: 400;
color: #0058cb;
}

h4 {
font-size: 24px;
font-weight: 600;
color: #0058cb;
}

h5 {
font-size: 20px;
font-weight: 400;
color: #0058cb;
}

p {
font-size: 16px;
}

/* style guide for mobile headlines and paragraph text */
@media only screen and (max-width: 980px){
h1 {
font-size: 32px;
color: #0058cb;
font-weight: 600;
}

h2 {
font-size: 30px;;
color: #0058cb;
font-weight: 600;
}

h3 {
font-size: 22px;
color: #0058cb;
}

h4 {
font-size: 22px;
font-weight: 600;
color: #0058cb;
}

h5 {
font-size: 18px;
font-weight: 600;
color: #0058cb;
}

p {
font-size: 16px;
}
}

Dieser CSS-Code hilft einem die verschiedenen Überschrift-Arten zu vereinheitlichen. Man kann dadurch die Größe der H1 – H5 Überschrift global definieren und wird sich nie wieder damit befassen müssen, welche Schriftgröße wo verwendet wird. Man muss dann nur noch eine Überschrift zwischen H1 und H5 auswählen und kann sich sicher sein, dass überall auf der Seite der selbe Stil verwendet wird.

Globale Buttons und Divi Theme Anpassungen

Für den Fall, dass das Divi-Theme auf der Seite verwendet wird, gibt es ebenfalls einige sehr grundlegende CSS-Befehle, die auf jeder Divi-Seite verwendet werden sollten. Es macht Sinn bezüglich des Style Guides, Buttons global zu definieren, sodass man nicht jedesmal von neuem die Buttons designen muss. Durch CSS lassen sich die Buttons in Divi noch genauer definieren, als in den Divi-Einstellungen selbst.

Folgendes CSS sollte in ähnlicher Form in keinem Divi-Theme fehlen!

/*Global Button CSS*/
.et_pb_button {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3);
font-weight: 600;
color: #ffffff;
margin: 8px auto 0;
font-size: 20px;
padding: 8px 40px;
line-height: 1.7em;
cursor: pointer;
border-width: 2px;
border-color: #fb926b;
border-radius: 3px !important;
background-color: #fb926b;
}

/*Hide the default divi Footer*/
#footer-bottom {
display:none;
}

/*Extend the width on mobile to 90% of the screen*/
@media only screen and (max-width: 980px) {
.et_pb_row {
width: 90% !important;
}
.container {
width: 90%;
}}

Wie kann man kann CSS vom Theme überschreiben?

Die häufigste Anwendung von CSS innerhalb WordPress ist das Überschreiben von existierendem CSS. Häufig sieht man die Verwendung von !important um CSS zu überschreiben. Dies ist aber oft gar nicht nötig, CSS steht nämlich für Cascading Style Sheet (Stufenförmig), was bedeutet, dass mehrere CSS Regeln für das selbe Element durchaus gesetzt werden können, wobei der letzte Befehl die stärkste Gewichtung hat.

Das CSS, welches in dem zuvor genannten Eingabefeld eingegeben wird, wird als aller letztes geladen, was bedeutet, dass es die stärkste Wirkung hat. Somit muss das meiste CSS in diesem Feld nicht mit !important versehen werden. Jedoch gibt es hierzu Ausnahmen, weshalb es manchmal nötig ist, !important zu verwenden.

Wo kann man am einfachsten CSS lernen?

Wir sind nun über die Grundlagen für CSS in WordPress eingegangen. Um eine detaillierte Übersicht von CSS zu erhalten, empfehle ich durch den CSS Kurs von w3schools zu gehen. Dort kann man sehr einfach und interaktiv die Grundlagen von CSS lernen. Nachdem man sich ein bisschen durch die Grundlagen gearbeitet hat, kann man relativ schnell bereits sehr fortgeschrittenen CSS Code schreiben.

Das ist für Sie alles viel zu kompliziert? Sie brauchen Hilfe bei der Erstellung Ihrer Webseite? Wenden Sie sich an mich, wenn Sie Ihre Website erstellen lassen wollen.