Linkfarbe des Themes ändern

Linkfarbe des Themes ändern
Die Farbe aller Links ändern

Du möchtest die Linkfarbe deines WordPress-Themes ändern?

  • Überprüfe zunächst via Design > Customizer, ob dein Theme diese Möglichkeit mitliefert. Falls ja,  ändere die Linkfarbe per Mausklick. Schau im Customizer nach Punkten wie Design oder Farben.
  • Meistens ist die Änderung der Linkfarbe über eine grafische Oberfläche nicht möglich. Auch Storefront, das Standardtheme von WooCommerce, macht keine Ausnahme. Du kannst zwar die Farbe der Beitragstitel per Knopfdruck ändern, aber nicht die Linkfarbe in den Menüleisten.

Aber es gibt ja noch zwei andere Wege:

  • Linkfarbe via Themes-Editor ändern – nicht mehr empfehlenswert
  • Linkfarbe via CSS-Box im Customizer ändern – empfehlenswert

Linkfarbe via Themes-Editor ändern

Anmerkung: Ich habe dieses Tutorial im November 2017 überarbeitet und diese veraltete Methode drin gelassen. Du kannst damit nachvollziehen, wie die CSS-Box im Customizer arbeitet.

Linkfarbe ändern
Die Linkfarbe kann via CSS-Datei im Editor geändert werden. Die ursprüngliche Linkfarbe wurde sicherheitshalber im Kommentar eingetragen.

Über Design > Editor wird ein Code-Editor aufgerufen. Der ist nicht zum Schreiben von Beiträgen da, sondern zum Ändern des Quellcodes. Standardmäßig öffnest du mit dem Editor die CSS-Datei deines Themes, das sogenannte Stylesheet. Du erkennst das Stylesheet an der Endung .css

Weile die CSS-Datei sehr umfangreich ist, musst du zu den Links ein wenig herunterscrollen. Kleine Hilfe: In einem guten Theme steht dazu ein hinweisender Kommentar, du erkennst ihn an dem Schrägstrichmit Sternchen. Beispiel für einen Kommentar, der auf die Links-Auszeichnung im Stylesheet hinweist:

/* Links */

Eine gute Idee ist es, diesen Kommentar durch die Angabe der ursprüngliche Linkfarbe zu ergänzen. Beispiel:

/* Links vorher: #b12930 */

Auf diese Weise lässt sich deine Änderung später wieder rückgängig machen! Nach dem Kommentar nimmst du die eigentlichen Codeänderungen vor. Beispiel:

  •  a (normale Linkfarbe) ändern von #b12930 zu #0645AF
  •  a:visited (besuchte Links)  ändern von #b12930 zu #0645AF
Onlineshops mit WordPress - das Buch ist da
Das Standardwerk für Onlinehändler: Onlineshops mit WordPress – das große Praxishandbuch

Linkfarbe via CSS-Box ändern

CSS im Customizer

Die zweite und bessere Möglichkeit zur Änderung der Linkfarbe führt über die CSS-Box im Customizer. Auch da musst du Code eingeben, allerdings „ausgelagert“ und nicht direkt in der CSS-Datei. So funktioniert es:

  • Gehe im Customizer auf Zusätzliches CSS
  • Gib in die CSS-Box zum Beispiel diesen Code ein:

 

a { color: #0645AD!important;}

So sollte deine CSS-Box jetzt aussehen:

CSS important
!important – der Zusatz garantiert, dass die Anweisung der originale CSS-Datei auch wirklich überschrieben wird

 

Das ! und das anschließende important (ohne Leerzeichen dazwischen) sorgen dafür, dass die in der CSS-Datei festgelegten Farben auch sicher überschrieben werden. Ob dieser Zusatz nötig ist, hängt von deinem Theme ab. Probiere es erstmal ohne, falls es nicht funktioniert, füge !important hinzu.

Die Farbänderung via CSS-Box hat drei Vorteile:

  • Das Risiko ist gering. Mit einem direkten Eingriff in den Quellcode kannst du dein Theme leicht zerschießen.
  • Du kannst eine Änderung schnell wieder rückgängig machen.
  • Bei einem Theme-Update werden deine Änderungen nicht überschrieben.

Falls du dich für die Farbänderung via CSS-Box entschieden hast, ist der Job erledigt. Falls du die CSS-Datei im Editor bearbeitet hast – denke über Child-Themes nach!

Wann Child-Themes nötig sind

Bei der Aktualisierung eines Themes werden Änderungen überschrieben
WordPress warnt: Bei der Aktualisierung eines Themes werden Änderungen überschrieben.

Mit jedem Update eines Themes werden direkte Änderungen im Code überschrieben – und müssen wieder neu eingegeben werden. Freundlicherweise warnt WordPress den Webmaster bei Theme-Updates vor:

Für die folgenden Themes liegen Aktualisierungen vor. Markiere diejenigen, die du aktualisieren möchtest und klicke auf „Themes aktualisieren“.

Beachte bitte: Alle Anpassungen, die du am Theme vorgenommen hast, werden verloren gehen. Ziehe in Erwägung, Child-Themes zu nutzen, um Modifikationen vorzunehmen.

Bei minimalen und gut dokumentierten Änderungen ist das kein Problem. Die Methode:

  • Vor dem Update die Änderungen per Copy & Paste herausfischen
  • Nachdem Update die Änderungen wieder einpflegen
Onlineshops mit WordPress
Onlineshops mit WordPress – mit allen Infos für StartUps

Hast du viele Änderungen im Quellcode vorgenommen, und nicht nur in der CSS-Datei? Dann verwende Child-Themes!

Eine Ausnahme ist drin, falls du nur die Datei functions.php ergänzt! Für Functions-Erweiterungen gibt es ein geniales kostenloses Plugin:  Code-Snippets