WordPress Theme Twenty Seventeen anpassen

Titelbild simplu27 auf pixabax.com

Achtung: Das hier aktuelle Theme heißt Atomic Blocks und nicht Twenty Seventeen. Ich habe gewechselt da ich genug vom fetten Headerbild hatte.

Ich setze hier in meinem WordPress-Blog auf das Theme Twenty Seventeen weil es mir wirklich gut gefällt. Hauptsächlich das dicke, fette Headerbild hat es mir angetan. Außerdem kann man damit schöne OnePager basteln. Und weil mir nun mal dieses Theme gefällt und weil ich es einsetze will ich hier so einige Dinge und meine Änderungen hier erklären.


OnePager

OnePager das sind die etwas anderen Webseiten. Normalerweise muss man im Web immer von einer Seite zur anderen Seite klicken um alle relevanten Dinge zu lesen. Bei OnePager ist das anders. Da sind alle Infos auf einer Seite untergebracht. Hier muss man nur nach unten scrollen. Die einzelnen Inhalte sind auf solchen Seiten fast immer durch ein großes Bild getrennt. Und genau solche Seiten lassen sich mit dem WordPress-Theme basteln. Da gibt es nur ein kleines Problem. Normale Menschen finden dieses Feature nicht! In aktuellen WordPress-Installationen kommt man beim Anpassen seiner Seite um den Customizer nicht rum. Doch dort gibt es nix um einen OnePager zu basteln. Ich habe lange gebraucht bis ich die Lösung gefunden habe. Das Theme Twenty Seventeen wird auf dieser Seite beschrieben. Und dort ist auch die Lösung zu finden. Man muss in WordPress als Startseite eine statische Seite einstellen. Erst dann ist im Customizer der Menüpunkt „Theme-Optionen“ zu finden. In diesen Optionen kann man dann 4 Abschnitte definieren. Jeder dieser Abschnitte besteht aus einer Seite. Hinzu kommt noch die Startseite, sodass so ein OnePager aus maximal 5 Abschnitten besteht. Als Bild welches die einzelnen Abschnitte trennt dient das Beitragsbild der Seite.


Einspaltig

Seventeen kann einspaltig. Jedenfalls behaupten das die WordPress-Macher. Und tatsächlich, wenn man alle Widgets der Sidebar rausschmeisst kommt so was Ähnliches wie einspaltig raus. Ähnlich deshalb, weil die Startseite dann doch zwei Spalten besitzt. Die linke Spalte ist zwar leer, aber trotzdem vorhanden. Das Theme quetscht in dieser Ansicht den kompletten Inhalt in die rechte Spalte. Die eigentlichen Artikel sind dagegen wirklich einspaltig mit einer Spaltenbreite von 740 Pixel. Genau dieses Aussehen hätte ich gerne für meine Startseite. Und ich habe es mit nachfolgendem CSS-Schnipsel geschafft. Die Codezeilen stammen aus dem Forum. Ich habe sie als zusätzliches CSS via Customizer ins Theme eingefügt und es läuft wunderbar.

@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; 
  } 
}


andere Schriftart

Die original Schrift des Themes hat mir noch nie gefallen. Allerdings wusste ich bis vor ein paar Tagen auch nicht wie ich die Schrift des Themes ändere. Der Tipp zum Ändern fand ich dann im Artikel Das Theme beschleunigen am Beispiel von Twenty Seventeen von Matthias Kittsteiner. Der Artikel beschreibt wie man die genutzte Google-Schrift durch eine eigene ändert. Ich dachte es mir schon es ist nicht so leicht wie man denkt. Zuerst muss man die alte Schrift eliminieren. Das erreicht Matthias mit Hilfe einer Funktion für die function.php des Themes. Wobei ich diesen Codeschnipsel in eine eigenes Plugin ausgelagert habe.

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 );

Ich nutze hier die Schriftarten „SourceCodePro-Regular.otf“ und „SourceSansPro-Regular.otf“ (beide via Google ganz einfach zu finden) weil sie mir erstens sehr gut gefallen und zweitens ich dadurch das Stylesheet von Matthias fast unverändert abkupfern konnte. Einziger Unterschied ist der Ablageort. Da ich hier kein Childtheme nutze habe ich beide Dateien in den neu erzeugten Ordner fonts unter uploads abgelegt.

@font-face { 
  font-family: 'Source Sans Pro'; 
  font-style: normal; 
  font-weight: 400; 
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(/wp-content/uploads/fonts/SourceSansPro-Regular.otf) format('opentype'); 
  unicode-range: U0100-024F, U1E -1EFF, U20A -20AB, U20AD-20CF, U2C 58C 7F, UA720-A7FF; 
} 

@font-face { 
  font-family: 'Source Code Pro'; 
  font-style: normal; 
  font-weight: 400; 
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(/wp-content/uploads/fonts/SourceCodePro-Regular.otf) format('opentype'); 
  unicode-range: U0100-024F, U1E -1EFF, U20A -20AB, U20AD-20CF, U2C 58C 7F, UA720-A7FF; 
} 

body, button, input, select, textarea { 
  font-family: "Source Sans Pro", "Lucida Sans", "Lucida Grande", Monaco, Geneva, sans-serif; 
  font-size: 1.125rem; 
} 

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

Das obige Stylesheet habe ich ganz einfach via „Customizer“ in den Abschnitt „zusätzliches CSS“ gepackt. Das klappt wunderbar und ich brauche kein Cildtheme, bei dem ich wieder von vorne beginnen müsste.


Theme beschleunigen

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' );

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 );


Alle Codeschnipsel herunterladen

Ich mach es euch jetzt einfach. Ihr müsst obigen Code nicht kopieren. Es reicht dieses Archiv herunter zu laden. Es enthält das Stylesheet und auch das Plugin mit allen hier erwähnten Funktionen.

Bitte beachten: Ihr nutzt obige Codezeilen bzw. den Download auf eigene Gefahr. Ich habe alles hier im Blog getestet. Ob das auch bei euch klappt weiß ich nicht.

Update: So ganz stimmt diese Anleitung hier nicht mehr. Da ich gerne bastle habe ich schon wieder einiges geändert.

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