Dieser Beitrag ist noch in Arbeit und dient mir vorerst mehr als Gedächtnisstütze.
Grundlagen
Als Default-Themes habe ich mich für „gatsby“ entschieden. Um an diesem arbeiten zu können, habe ich mir zuvor ein Child angelegt, so dass ich aller Änderungen besser nachvollziehen kann.
Im Themes kann man unter „Customizer->Farbe“ Hintergrund, Sekundär und Primärfarben einstellen. Hier stelle ich kurz vor wie man diese Farbenreihe erweitern kann, um diese auch im Backend steuern zu können.
In der originalen „functions.php“ kommentiert man die Funktion „function gatsby_scripts()“ und kopiert sich diese in die „funtions.php“ seines Childs. Danach erweitert man den Code der vorgegebenen Analogie.
- Zeile 13 hinzufügen: $third = esc_attr( get_theme_mod( ‚third_color‘, ‚#dd9933‘ ) );
- Zeile 46 Editieren und die Zeichen „; in eine neue Zeile umbrechen
- Nun die Zeile 47 umbrechen, so dass diese zu Zeile 48 wird. Vor der Zeile 48 fügt man nun den CSS-Code für „Third-Color“ ein: h4.widget-title {color: {$third};}
Damit ist die neue Farbe bereits auf der Webseite sichtbar. In diesem Beispiel färbt sich eine H4-Überschrift mit class=widget orange ein. Aber das ist nur die halbe Miete 😉
Leider erkannte das Theme keine Kopie aus /inc/ in meinem Child-Themes, so dass ich den nächsten Schritt direkt in der Original-Datei des Themes durchgeführt hatte.
In der customizer.php befindet sich eine Funktion namens „function gatsby_customize_register( $wp_customize )“ und dort sieht man zwei Blöcke für // Primary color setting und // Second color setting. Einen solchen Block kopieren wir und fügen den unter //second ein und passen bestimmte Zeilen wie folgt an:
// Third color setting $wp_customize->add_setting( 'third_color' , array( 'sanitize_callback' => 'gatsby_sanitize_hex_color', 'default' => '#dd9933', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'third_color', array( 'label' => __( 'Third Color', 'gatsby' ), 'section' => 'colors', 'settings' => 'third_color', ) ) );
Und ab jetzt kann man die Farbe der Überschriften in einem Widget über das Backend anpassen.