Kategorien
Bloggen

Twenty Twenty – Anpassungen der Post-Meta-Zeile

Autor – Avatar und Lesedauer einfügen

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.

Passend zum Beitrag:
Abmahngefahren: Bloß nix verdecken durch den Cookie - Hinweis.

Aufruf des Autoren Avatars:

<?php 
     echo get_avatar( get_the_author_email(), '60' ); 
?>

Quelle

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

Quelle

Diesen Code bitte in Ihre functions.php einfügen (ggf. im Child-Theme).

Aufruf:

<?php echo reading_time(); ?>

Struktur
Struktur twentytwenty

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.

Code 1
Avatar einfügen

Die Lesedauer des Beitrages in Minuten habe ich in Zeile 425 eingefügt – nach der Zeile <?php comments_popup_link(); ?>

Code 2
Lesezeit einfügen

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. 🎨

Passend zum Beitrag:
Werden alle normalen Wordpress - Themes durch AMP-Versionen ersetzt oder wie?

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.💚

Update 18.11.2019

In einem ausführlichen Artikel bei drweb.de vom 9. November gibt es Hinweise für weitere interessante Anpassungen des neuen WordPress – Themes twenty twenty.

Von Horst Schulte

Mein Bloggerleben reicht bis ins Jahr 2004 zurück. Damals habe ich dieses schöne Hobby für mich entdeckt. Ich bin jetzt 65 Jahre alt und lebe seit meiner Geburt in der schönen Stadt Bedburg, nicht weit von Köln entfernt. Das mit dem Schreiben ist zwar weniger geworden. Aber ab und zu schreibe ich hier und anderswo. Die sozialen Netzwerke haben die Welt verändert - nicht zum Guten!

Über mich

13 Antworten auf „Twenty Twenty – Anpassungen der Post-Meta-Zeile“

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?

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 🙂

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… 😉

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.

Schreibe einen Kommentar

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

Es werden keine IP-Adressen gespeichert! Sie können, falls Sie dies möchten, auch anonym kommentieren.