Monat: September 2019

WordPress-Themes

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.

 

 

Web-Fonts richtig einbinden

Für eine gute Sichtbarkeit von Schriften auf der eigenen Webseite gib es einiges zu beachten.

Das Einbinden geht hierbei recht schnell und wenn man eine Font nutzt die ohnehin auf dem User-Client vorinstalliert ist, dann erweitert man den src-command mit local():

@font-face{
font-family: Roboto;
src: local("Roboto"), url(Roboto.woff) format("woff2"), url(Roboto.eot) format ("eot");
font-style: italic;
font-stretch: condensed;
font-weight: bold;
}

Veraltet hingegen sind Angaben wie -webkit-font-smoothing, -moz-osx-font-smoothing, text-rendering: optimizeLegibility, font-kerning.

Wichtig hier zu erwähnen ist die Tatsache, dass man zwar auch Online-Shriften wie Google-Fonts verwenden kann, aber dies ist im Sinne der Einhaltung zur DSGVO äußerst umstritten. Werden Online-Schriften durch Codeeingabe auf der eigenen Webseite so eingebunden, dass diese vom fremden Server gezogen werden und eben nicht local im eigenen Web vorliegt, dann fließen personenbezogene Daten in Form von IP im Fall von Google auf Server der USA. Letztlich ist dieses Verhalten nicht anders zu werten wie das Urteil über den Facebook „like-Button“.