WordPress Twenty Seventeen anpassen

Das Theme Twenty Seventeen beschäftigt mich schon eine ganze Weile. In der Zwischenzeit habe ich es für alle meine Domains eingesetzt und auch schon öfters drüber berichtet. Dieser Artikel beschreibt die von mir genutzten Änderungen. Neues gibt es hier nicht zu lesen. Alles was hier steht habe ich bereits an anderer Stelle erklärt.

Twenty Seventeen einspaltig

Das WordPress Standardtheme kann ja eigentlich schon einspaltig. Es reicht alle Widgets der Sidebar zu löschen um Twenty Seventeen einspaltig zu machen. Leider, leider kommt auf der Startseite nix einspaltiges raus. Es sind noch immer zwei Spalten vorhanden. Die linke Spalte ist zwar fast leer aber trotzdem vorhanden. Das Theme quetscht in diesem Zustand den gesamten Inhalt in die rechte Spalte. Wie man es anstellt auf der Startseite das Aussehen der Artikelseite zu zaubern habe ich hier beschrieben. Seit mir nicht böse, aber ich erspare mir hier das alles zu wiederholen.

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 diefunction.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. Das Ergebnis seht ihr hier live.

Mit diesem Artikel werde ich das Thema hier beenden. Twenty Seventeen ist jetzt so wie ich es mir vorstelle.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.