Seit gestern, dem Tag des eigentlich für den 12. November geplanten Wordpress Updates auf die Version 5.3, habe ich hier auch die offizielle Version des neuen Wordpress Themes „twenty twenty“ installiert.
Eine kleine Anpassung (Header) der Master-Version des Themes hatte ich in meinem Post von Anfang November erwähnt.
Bis zum Schluss wurde noch heftig am Theme gefeit. Das konnten wir bei Github verfolgen. Es war voraussehbar, dass meine Anpassungen über das Veröffentlichungsdatum hinaus nicht mehr funktionieren würden. ?
Zunächst habe ich Boris Rat befolgt und ein Childtheme erstellt. Damit der Zugriff auf die Gutenberg Blocks auch im Backend funktionieren, war der Aufruf der entsprechenden editor-style-block.css erforderlich.
So sehen deshalb meine Einträge am Anfang der functions.php aus:
<?php /* enqueue scripts and style from parent theme */
function twentytwenty_styles() {
wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');
// Add backend styles for Gutenberg.
add_action( 'enqueue_block_editor_assets', 'photographus_add_gutenberg_assets' );
/**
* Load Gutenberg stylesheet.
*/
function photographus_add_gutenberg_assets() {
// Load the theme styles within Gutenberg.
wp_enqueue_style( 'photographus-gutenberg', get_theme_file_uri( '/assets/css/editor-style-block.css' ), false );
}Meta-Zeile ergänzen
Daneben habe ich nach einer Möglichkeit gesucht, den Autoren Avatar und die üblich gewordene Lesedauer für den Beitrag in die Meta-Zeile einzufügen.
Die PHP – Schnipsel für beides lassen sich leicht im Internet finden.
Aufruf des Autoren Avatars:
<?php
echo get_avatar( get_the_author_email(), '60' );
?>Hinweis: Die Größe des Avatars wird über die in Hochkommas gesetzte Zahl verändert. Ich benutze die Größe 35 statt 60.
Lesezeit für einen Beitrag
//estimated reading time
function reading_time() {
$content = get_post_field( 'post_content', $post->ID );
$word_count = str_word_count( strip_tags( $content ) );
$readingtime = ceil($word_count / 200);
if ($readingtime == 1) {
$timer = " minute";
} else {
$timer = " minutes";
}
$totalreadingtime = $readingtime . $timer;
return $totalreadingtime;
}Diesen Code bitte in Ihre functions.php einfügen (ggf. im Child-Theme).
Aufruf:
<?php echo reading_time(); ?>Wo kann die Meta-Zeile im Header ergänzt werden?
Die Struktur des Themes ist nicht ganz so komplex wie bei Premium – Themes. Entsprechend war die Datei leicht aufzustöbern, die für die gewünschten Ergänzungen „zuständig“ ist. Sie heißt „template-tags.php“ und befindet sich im Unterverzeichnis „inc„.
Den Aufruf des Avatars habe ich in Zeile 342 platziert. In dieser Zeile erkennen Sie die Anpassung der Größe des Avatars. Hier ist sie 35.
Die Lesedauer des Beitrages in Minuten habe ich in Zeile 425 eingefügt – nach der Zeile <?php comments_popup_link(); ?>
Bisschen CSS dazu
Die Aufrufe der beiden Ergänzungen habe ich bewusst in SPAN bzw. DIV Elemente integriert, um mir die Arbeit von weiteren CSS – Anpassungen zu ersparen. ? Technisch macht das keine Probleme, obwohl es der reinen Lehre wohl widerspricht. ?
Wer die Anzeige der Avatare nicht quadratisch, sondern lieber rund haben möchte, muss das via CSS realisieren. Fügt einfach diese Zeilen in eure style.css ein:
.avatar.avatar-35.photo.avatar-default {border-radius: 50px!important; margin-top: 12px!important; margin-right: 8px!important;}
.avatar.avatar-35.photo.avatar-default {border: 3px #ddd solid; }
Achten Sie bitte darauf, dass Sie die schon erwähnte Größe des Avatars (hier 35) an dieser Stelle ebenfalls benutzen.
Viel Spaß mit diesen ersten kleinen Anpassungen und … nur Mut.?
Ich habe das neue Theme jetzt (noch) nicht vor mir liegen, also kann ich nur per Vorbehalt anmerken:
So weit ich das seit der Erfindung der Child-Themes kenne, macht man idealerweise Änderungen sowohl an der Gestaltung wie auch an der Funktionalität ausschließlich in Dateien des Child-Themes. Dazu benötigt man die erforderlichen css-Dateien, eine functions.php sowie Kopien der Dateien der Blogoberfläche (header.php, footer.php, index.php usw.), in denen eventuell neue Funktionen eingebaut werden sollen.
Also als formales Beispiel: Ich will eine neue Funktion zur Anzeige z.B. der Lesedauer in meinem Seitenkopf einbauen. Die Funktion baue ich regelkonform in der functions.php, den Aufruf derselben füge ich in der header.php ein.
Ich fasse also auf keinen Fall irgendeine Datei außerhalb meines child-Theme-Unterverzeichnisses an.
So, jetzt schaue ich mal, ob sich mein Blögchen schon ganz alleine auf 5.3 aufgebessert hat. Vielleicht ist das twentytwenty ja auch was für mich…
Update fertig!
Habe gerade mal im Adminbereich die Live-Vorschau des neuen Themes eingeschaltet. Sieht sehr vielversprechend aus. Das muss ich mir auf jeden Fall genauer anschauen…
Der Vertreter der reinen Lehre war ich nie, in keiner Angelegenheit. 🙂 Mein zweiter Vorname ist sozusagen „quick and dirty“. Aber im ernst, manchmal ist der direkte Weg ins Theme unumgänglich, wenn man keine Hooks kennt. Was bei diesem Thema vielleicht auf ewig so sein wird. Ich habe schon mit wunderbaren Themes gearbeitet, bei denen der Spielraum in dieser Hinsicht irre war. Aber jetzt habe ich mich nun mal auf dieses Thema eingeschossen und es macht Spaß, daran herumzuwerkeln. Wie ja im Artikel schon gesagt, das Childtheme ist installiert. Aber für die Änderungen, die ich hier beschrieben habe, konnte ich keine Hooks finden. Wie also soll ich diese Dinge in der functions.php realisieren, wenn mir dafür die Ahnung fehlt? Also mach ich es so, dass ich die Lösung auf dem Kompromissweg finde. Die kleinen Änderungen kann ich ohne weiteres auch bei einer Aktualisierung des Themes, die ja bestimmt bald ansteht, hinbekommen und zwar ohne große Dokus und ohne Gefahr, dass mir was kaputtgehen würde.
Aber jetzt mal Butter bei die Fische: Wie hättest du die Meta-Zeile um die beiden Sachen ergänzt? Hast du dafür eine Lösung?
@Boris: Viel Spaß beim Basteln.
Danke 😉
Ich werde das neue Theme jetzt mal als aktives Theme einstellen und mal schauen, wann ich dazu komme, einen genaueren Blick darauf zu werfen.
Im Defaultzustand ist es ja nach meinem kurzen Preview vorhin schon mal brauchbar und ganz ansehnlich.
Es immer ein Nachteil wenn man Dateien des Parent-Themes ändert. Kann sein dass die Änderungen beim nächsten Update weg sind. Ich habe aber auch Dateien des Parent-Themes editiert 🙂
@Boris: Läuft ja schon. Sieht gut aus.
@Horst: Absolut. Child Themes sind eine tolle Sache. Bloß lässt sich damit halt nicht in jedem Theme alles ändern. 🙂
Soo. Die Lesedauer-Angabe ist bei mir eingebaut. Ich habe sie direkt oberhalb des Artikeltextes platziert. Dadurch habe ich die Angabe auch im Blog-Loop.
Natürlich alles im Child-Theme… 😉
Sehr gut, Boris. Ich habs mir schon angesehen. Wie gefallen dir eigentlich die Schriftarten, die twenty twenty mitbringt?
Für den Fließtext der Absätze wird offenbar die ITC Garamond eingesetzt. Das kann eigentlich nur gut aussehen, weil es eine wunderschöne Buchdruckschrift ist. Und bei den modernen Flachbildschirmen mit hohen Auflösungen lässt die sich auch gut einsetzen. Früher, bei SVGA u.ä. war das noch eher problematisch.
@Boris. Du meinst die Schriften, die ich hier einsetze? Nein, ich meinte schon die in der Original-Version. Ist die Kombination von Titel-Font und Content-Font für dich ok? Du hast doch die Meinung vertreten, dass möglichst nur ein Font eingesetzt werden sollte. Oder warst du das nicht?
Doch doch…
Das TwentyTwenty setzt einen serifenlosen Font fett für die Überschriften und die Garamond für den Fließtext ein. Ich finde das Ok, wenn es stark voneinander abgesetzt ist. So wie im Theme. Vielleicht bin ich etwas zu sehr Typographiepurist.