Twenty Twenty – Anpassungen der Post-Meta-Zeile

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

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

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.

Beitragsfoto von (sofern nicht von mir oder nicht Public Domain):