Sie haben wahrscheinlich bemerkt, dass fast jeder Block im aktuellen WordPress-Inhaltseditor benutzerdefinierte Text- und Hintergrundfarben haben kann. Im WordPress-Site-Editor können Sie sogar Farben für die gesamte Website auswählen.
Sie können diese Farben leicht in den Einstellungen ändern, aber es ist nicht bequem, nach bestimmten Farben in der Farbpalette zu suchen, wenn Sie sie einem anderen Block hinzufügen möchten.
Sie bauen eine benutzerdefinierte WordPress-Website, wissen aber nicht, wie Sie ihr Ihre eigenen Farben hinzufügen können? Glücklicherweise können Sie bei den meisten neuen WordPress-Themes ganz einfach Ihre eigene Farbpalette definieren. Dann können Sie die gleichen Farben auf der gesamten Website wiederverwenden, ohne sich Farbcodes merken zu müssen.
Heute zeige ich Ihnen, wie Sie in wenigen Minuten Ihre eigenen Farben zu WordPress-Themes für die Bearbeitung ganzer Websites hinzufügen können.
Wie man benutzerdefinierte Farben zu einem WordPress-Theme für die komplette Website-Bearbeitung hinzufügt
Themes für die Bearbeitung ganzer Websites haben bereits mindestens einige Farben standardmäßig definiert. Sie können also ganz einfach eine beliebige Farbe aus den Farbeinstellungen auswählen, ohne sich die genauen Farbcodes merken zu müssen. Wie dieses Beispiel im WordPress-Theme Twenty Twenty three:
Aber wie können Sie Ihre eigenen Farben definieren, damit sie im gleichen Farbfeld erscheinen? Das ist tatsächlich einfacher, als Sie vielleicht denken.
Erster Schritt – gehen Sie zu Tools >> Theme File Editor im WordPress Admin Menü. Wenn Sie dort sind, öffnen Sie die Datei theme.json auf der rechten Seite der Seite.
Suchen Sie nun nach den Farbeinstellungen im Code. Hier sehen Sie, wie es im Standard-WordPress-Theme aussieht:
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
...Wie Sie sehen, hat jede Farbe ihren eigenen Farbcode, Namen und Slug. Wir fügen eine weitere Farbe hinzu – rot (Code #ff0000), und nennen die Farbe ImakeITwork:
{
"color": "#FF0000",
"name": "ImakeITwork",
"slug": "imakeitwork"
}Wenn Sie nicht wissen, wo Sie die benötigten Farbcodes finden, können Sie den in WordPress eingebauten Farbwähler verwenden oder eine Website wie HTML Color Codes nutzen.
Hier sehen Sie, wie der Code in der aktuellen theme.json-Datei aussieht:
Sie können dort so viele Farben hinzufügen, wie Sie wollen – geben Sie ihnen einfach einen eindeutigen Namen und einen Slug und verwenden Sie ein Semikolon zwischen { }-Klammern, wie im obigen Beispiel zu sehen.
Sobald Sie auf Datei aktualisieren klicken, erscheinen die neuen Farben in jedem Farbwähler und in jedem WordPress-Block.
Das war’s – jetzt wissen Sie, wie Sie Ihre eigenen Farben in jedem WordPress-Theme zur Bearbeitung von Websites definieren können.
Möchten Sie erfahren, wie Sie eigene Schriftarten in WordPress hinzufügen können? Klicken Sie hier
