WordPress Theme Twenty Seventeen anpassen 2

Child-Theme Twenty Seventeen

Child-Theme Twenty Seventeen

So hundertprozentig bin ich mit dem guten, alten TinyMCE in WordPress noch nicht fertig. Ich habe die letzten Wochen den WordPress-Fork ClassicPress getestet. In diesem Zusammenhang ist ein Child-Theme von Twenty Seventeen entstanden. Hauptmerkmal: Der dicke, fette Header fehlt. Die Änderungen an dem WordPress-Theme beschreibe ich hier.

  1. Headerbild deaktivieren
    Über „Design“ => „Customizer“ => „Header-Medien“ das Headerbild entfernen. Eigentlich dachte ich der Header würde dann in weiß erstrahlen. Das ist so nicht. Er kommt in einem schicken Grau daher. Mir gefällt’s.
  2. Einspaltig
    Das hatte ich hier schon mal erklärt. Einfach alle Sidebar-Widgets löschen. Anschließend via „Design“ => „Customizer“ => „Startseiten-Einstellungen“ die Startseite temporär auf statische Seite umstellen. Man kann dann über den neuen Punkt „Theme-Optionen“ auf einspaltig umschalten. Betreibt man nur einen Blog muss die Startseite wieder Rückgängig gemacht werden. Zusammen mit dem Codeschnipsel aus dem alten Artikel sieht es dann so aus wie hier.
  3. andere Schrift
    Auch dieses Thema habe ich im alten Artikel erklärt. Allerdings setze ich hier neuerdings die Schrift „Nunito Sans Light“ ein. Die solltet ihr aus meinem anderen Blog schon kennen. Das ist die Schrift die auch das Theme „Atomic Blocks“ nutzt. Wie ihr zu der Schrift kommt steht hier.

Das sieht jetzt fast so aus wie Atomic Blocks und kommt auch ohne Google-Fonts aus. Außerdem kann ClassicPress mit den ganzen Gutenberg-Anpassungen dieses Themes sowieso nix anfangen.

style.css des Child-Themes

/*
  Theme Name: Twenty Seventeen Child
  Theme URI:
  Description: Mein einspaltiges Child Theme von Twenty Seventeen ohne Google-Fonts
  Author: Horst Scheuer
  Author URI: https://horstscheuer.net
  Template: twentyseventeen
  Version: 2018.11.22
  Source URL: https://kittpress.com/das-theme-beschleunigen-am-beispiel-von-twenty-seventeen
  https://wordpress.org/support/topic/increase-homepage-content-area-max-width
  https://wordpress.org/support/topic/forcing-one-column-format-on-all-pages               
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Tags: Eine Spalte, für Barrierefreiheit geeignet, individuelle Farben
*/

/* eine Spalte für alle Seiten -------------------------------------------------*/
@media screen and (min-width: 48em) {
  .blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, 
  .search:not(.has-sidebar) #primary article, .navigation.pagination, body.blog .site-content .page-header, 
  body.archive .site-content .page-header, body.search .site-content .page-header {
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 740px;
    width: auto;
  }
  
  .wrap {               
    max-width: 75% !important;
  }
  
  .site-footer {        
    font-size: 0.9em !important;
  }
}

/* eigene Schrift --------------------------------------------------------------*/
@font-face {
  font-family: 'Nunito Sans Light';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(/wp-content/themes/twentyseventeen-child/fonts/NunitoSans-Light.otf) format('opentype');
}

@font-face {
  font-family: 'Nunito Sans Light Italic';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Sans Light Italic'), local('NunitoSans-LightItalic'), url(/wp-content/themes/twentyseventeen-child/fonts/NunitoSans-LightItalic.otf) format('opentype');
}

@font-face {
  font-family: 'Nunito Sans Bold';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url(/wp-content/themes/twentyseventeen-child/fonts/NunitoSans-Bold.otf) format('opentype');
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(/wp-content/themes/twentyseventeen-child/fonts/SourceCodePro-Regular.otf) format('opentype');
}

body, button, input, select, textarea {
  font-family: "Nunito Sans Light", "Lucida Sans", "Lucida Grande", Monaco, Geneva, sans-serif !important; 
  font-size: 1.2rem !important;
  line-height: 1.5 !important;
}  

h1,h2,h3,h4,h5,h6,h7,h8, strong, .site-title {
  font-family: "Nunito Sans Bold", "Lucida Sans", "Lucida Grande", Monaco, Geneva, sans-serif !important; 
}

em { 
  font-family: "Nunito Sans Light Italic", "Lucida Sans", "Lucida Grande", Monaco, Geneva, sans-serif !important; 
}

pre { 
  background-color: #EEEEEE !important;
  font-family: "Source Code Pro", "Courier New", Courier, mono !important; 	
}

code {  
  background-color: #EEEEEE !important;
  font-family: "Source Code Pro", "Courier New", Courier, mono !important; 
  padding: 3px !important;
}

.comment-body {
  font-size: 1em;
}

functions.php des Child-Themes

<?php
/**
 * Twenty Seventeen Child Theme Functions and Definitions
 * kittpress.com/das-theme-beschleunigen-am-beispiel-von-twenty-seventeen
 * kittpress.com/theme-support-fuer-gutenberg-funktionen-hinzufuegen/
 */

/* -----------------------------------------------------------------------------*/
/* Include the Parent Theme Stylesheet und Javascripts
/* -----------------------------------------------------------------------------*/

/* Stylesheets -----------------------------------------------------------------*/
function theme_enqueue_styles() {
/* -----------------------------------------------------------------------------*/
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

/* OnePager Scripte ------------------------------------------------------------*/
function child_theme_js() {
/* -----------------------------------------------------------------------------*/
  wp_enqueue_script( 'child-theme-js' , get_stylesheet_directory_uri() . '/js/child.theme.min.js' , array( 'twentyseventeen-global' ) , false , true );
  wp_enqueue_script( 'smooth-scroll', get_stylesheet_directory_uri() . '/js/smooth-scroll.js', array( 'jquery' ), '1.0.2', true );
  wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '2.1.2', true );
  wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '2.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'child_theme_js' ); 
 
/* -----------------------------------------------------------------------------*/
/* WordPress Theme Twenty Seventeen Tuning                                      */
/* -----------------------------------------------------------------------------*/

/* Gutenberg-Support -----------------------------------------------------------*/
function twentyseventeen_child_setup() {
/* -----------------------------------------------------------------------------*/  
  add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'twentyseventeen_child_setup' );

/* jQuery Migrate entfernen ----------------------------------------------------*/
function twentyseventeen_child_dequeue_jquery_migrate( $scripts ) {  
/* -----------------------------------------------------------------------------*/
  if ( ! is_admin() && ! empty( $scripts->registered['jquery'] ) ) {
    $jquery_dependencies = $scripts->registered['jquery']->deps;
    $scripts->registered['jquery']->deps = array_diff( $jquery_dependencies, array( 'jquery-migrate' ) );
  }
}
add_action( 'wp_default_scripts', 'twentyseventeen_child_dequeue_jquery_migrate' );

/* Google Schriften entfernen --------------------------------------------------*/
function twentyseventeen_child_dequeue_google_font() { 
/* -----------------------------------------------------------------------------*/
  wp_dequeue_style( 'twentyseventeen-fonts' );
  wp_deregister_style( 'twentyseventeen-fonts' );
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_dequeue_google_font', 100 );

/* JavaScript asynchron und verzögert laden ------------------------------------*/
function twentyseventeen_child_add_async_attribute( $tag, $handle ) { 
/* -----------------------------------------------------------------------------*/
  $defer_script_handles = array(
    'twentyseventeen-skip-link-focus-fix',
    'jquery-scrollto',
    'wp-embed'
    );
  
  if ( ! in_array( $handle, $defer_script_handles ) ) return $tag;
  
  return str_replace( ' src', ' async defer src', $tag );
}
add_filter( 'script_loader_tag', 'twentyseventeen_child_add_async_attribute', 10, 2 );

Schreibe einen Kommentar

Diese Kommentarfunktion sammelt die Daten die im Kommentar-Formular angezeigt werden. Außerdem werden Datum und Uhrzeit des Kommentars gespeichert.

Ich bin mit der Speicherung und Verarbeitung meiner Daten durch diese Seite einverstanden