Twenty Twenty-One Child

Bild: (c) Horst Scheuer
Bild: (c) Horst Scheuer

Viele werden es bemerkt haben. Ich habe das Theme dieser Website geändert. Nach einigen Jahren Harrison von ThemeZee nun das letztjährige WordPress-Theme Twenty Twenty-One. Warum? Weil ich einfach Lust auf etwas Neues hatte. Bei dem neuen Theme bleibe ich meiner Vorliebe nach einem schlichten, klassischen Blog-Aussehen treu. Allerdings habe ich einiges an Twenty Twenty-One geändert.

Child Theme

Hier werkelt ein Child-Theme. Eigentlich ist diese Technik ein klein wenig „old-school“. FSE, oder Block-Themen sind im Kommen. Von der Theorie her braucht man bei diesen Themen an den Skripten und Dateien nix mehr zu basteln. Alle Änderungen werden in Gutenberg vorgenommen. Einige dieser Themen kann man schon in freier Wildbahn begutachten. Wie zum Beispiel bei Boris Stumpf oder auch bei Thomas Weichselbaumer. Ich selbst stehe noch immer auf Kriegsfuß mit dieser neuen Technik und setze auf die guten alten Themen.

Größte Änderung dieses Child-Themes ist die neue Schrift. Im Original werden Systemschriften genutzt. Ich setze hier auf die Schrift „Open Sans“. Durch das Theme Meola von Elmastudio wurde ich auf „Open Sans“ aufmerksam. Ansonsten, neben anderen Kleinigkeiten, wurde die Breite des Inhalts geändert. Eigentlich ist das Theme 610 Pixels breit. Ich habe diesen Wert auf 750 Pixel geändert.

functions.php

Diese Version der functions.php deaktiviert zuerst das Originalstylesheet und bindet es anschließend zusammen mit einer CSS für die Schrift „Open Sans“ und dem Child-CSS wieder ein. Auch im Backend werden 3 Stylesheets geladen.

<?php
/**
 * Twenty Twenty-One lite Theme Functions and Definitions
 * 
 * @package Twenty Twenty-One lite
 * @author  Horst Scheuer
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU Public License
 * 
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @link https://codex.wordpress.org/Theme_Development
 * @link https://codex.wordpress.org/Child_Themes
 */

/*******************************************************************************
 * Child Theme Funktionen
 *******************************************************************************/

/**
 * Theme Stylesheet
 * ----------------
 */ 

add_action( 'wp_print_styles', function() { 
  wp_deregister_style( 'twenty-twenty-one-style' ); wp_dequeue_style( 'twenty-twenty-one-style' );
}, 11 ); 
 
add_action( 'wp_enqueue_scripts', function() { 
  wp_enqueue_style( 'twenty-twenty-one-fonts-style', get_stylesheet_directory_uri() . '/assets/css/theme-fonts.css', false, wp_get_theme('twentytwentyone-lite')->get( 'Version' ) ); 
} );
 
add_action( 'wp_enqueue_scripts', function() { 
  wp_enqueue_style( 'twenty-twenty-one-parent-style', get_template_directory_uri() . '/style.css', false, wp_get_theme('twentytwentyone')->get( 'Version' ) ); 
} );
 
add_action( 'wp_enqueue_scripts', function() { 
  wp_enqueue_style( 'twenty-twenty-one-child-style', get_stylesheet_directory_uri() . '/style.css', false, wp_get_theme('twentytwentyone-lite')->get( 'Version' ) ); 
} );

/**
* Admin & Editor Stylesheet
* -------------------------
*/

add_action('admin_enqueue_scripts', function() { 
  wp_enqueue_style( 'twenty-twenty-one-admin-styles', get_stylesheet_directory_uri() . '/assets/css/admin-style.css', wp_get_theme('twentytwentyone-lite')->get( 'Version' ) ); 
}, 11 );

add_action( 'enqueue_block_editor_assets', function() { 
  wp_enqueue_style( 'twenty-twenty-one-fonts-styles', get_theme_file_uri( 'assets/css/theme-fonts.css' ), false, wp_get_theme('twentytwentyone-lite')->get( 'Version' ) ); 
}, 13 );

add_action( 'enqueue_block_editor_assets', function() { 
  wp_enqueue_style( 'twenty-twenty-one-editor-styles', get_theme_file_uri( 'assets/css/editor-style.css' ), false, wp_get_theme('twentytwentyone-lite')->get( 'Version' ) ); 
}, 13 );

styles.css

In dieser Datei geht es, neben der Änderungen an einigen Links, hauptsächlich um die neue Schrift. Die Theme-Macher haben sehr vieles in Variablen gepackt, was die Änderung sehr einfach macht. Ich weiß nicht, ob meine Art der Änderung richtig ist, es funktioniert aber. Den passenden Code zum Einbinden dieser Schrift und die Schrift selbst gibts hier.

/**
 * Theme Name:   Twenty Twenty-One lite
 * Description:  meine Version des WordPress Themes
 * Author:       Horst Scheuer
 * Author URI:   https://horstscheuer.eu/
 * Template:     twentytwentyone
 * Version:      0.53
 * Version Date: 11.04.2022
 * License:      GNU General Public License v2 or later
 * License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 */
 
/* -----------------------------------------------------------------------------
 * Schrift 'Open Sans' 
 * -----------------------------------------------------------------------------*/
 
:root {
  /* Font Family */
  --global--font-primary: var( --font-headings, -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif) !important;
  --global--font-secondary: var( --font-base, -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif) !important;
  
  /* Font Size */
  --global--font-size-base: 1.1rem !important;
  --global--font-size-xs: 0.9rem !important;
  --global--font-size-sm: 1rem !important;
  --global--font-size-md: 1.1rem !important;
  --global--font-size-lg: 1.35rem !important;
  --global--font-size-xl: 2.1rem !important;
  --global--font-size-xxl: 4rem !important;
  --global--font-size-xxxl: 5rem !important;
  
  /* Header */
  --branding--title--font-size: var(--global--font-size-xl) !important;
  --branding--title--font-size-mobile: var(--heading--font-size-h4) !important;
} 
 
/* -----------------------------------------------------------------------------
 * Inhaltsbreite
 * -----------------------------------------------------------------------------*/
 
@media only screen and (min-width: 482px) {
  :root {
    --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 750px);
  }
}

@media only screen and (min-width: 822px) {
  :root {
    --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 750px);
    --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
  }
} 
 

6 Kommentare

  1. Tatsächlich setze ich ebenfalls ein Child-Theme ein, das geht nach wie vor, auch bei den Block-orientierten Themes nach 20-21. Ich brauche es vor allem für eine functions.php, die ein paar Dinge steuert.

    Aber das 20-21 war/ist wirklich ein feines Theme, ich hatte das ja auch einige Zeit im Einsatz.

  2. Info, auf meinem 15.6 Zoll Laptop hab ich hier unten eine waagerechte Scroll-Leiste … vielleicht könntest du das mal prüfen, wenn du Lust und Zeit hast-

  3. @Su: Danke! Auf dem Notebook meiner Frau sehe ich das jetzt auch. Ich vermute das hängt mit dem Code-Schnipsel zusammen. Werde ich ändern

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.