Neues Blog mit Twenty Nineteen: Luzis Revier

Kurz nach der Veröffentlichung von WordPress 5.3 und dem neuen Standardtheme Twenty Twenty komme ich mit einem neuen Blog mit Twenty Nineteen. An dem arbeite ich aber schon eine ganze Weile. Wenn auch bislang hinter dem Vorhang eines privaten Blogs. Das konnten dann nur Nutzer mit Zugangsdaten sehen. Zuletzt aber habe ich es poliert, von Fehlern befreit und unter eigener Domain veröffentlicht: Luzis Revier. Gut fürs Karma, denn Luzi ist meine Katze, und Catcontent geht ja immer…

Warum ein Blog mit Twenty Nineteen?

Ich schreibe hier viel über die Standardthemes. Ein konkretes Projekt realisiert habe ich mit einem solchen aber noch nie. Ausgeholfen, sicher. Aber von Anfang bis Ende erstellt, nein. Es war also mal an der Zeit, selbst auf ein solches Pferd zu setzen. Dass ich mich nun für Twenty Nineteen entschieden habe, lag auf der Hand. Twenty Nineteen erblickte zusammen mit dem Gutenberg Editor das Licht der Welt. Es ist also in der Lage, alle Gutenberg Möglichkeiten direkt umzusetzen.

Außerdem habe ich mich nach anfänglichem Fremdeln an Twenty Nineteen gewöhnt. Ich möchte sogar so weit gehen zu sagen, dass ich es richtig liebgewonnen habe. Vor allem nachdem ich ihm Eigenheiten ausgetrieben habe, die mir nie gefallen wollten. Hier ist vor allem der Header zu nennen. Wie man den loswird, hatte ich im Frühjahr schon mal gezeigt. Später im Text dazu noch mehr.

Blog mit Twenty Nineteen: meine Anpassungen

Childtheme erstellen

Für weitergehende Anpassungen, die über ein paar CSS-Änderungen hinausgehen, braucht es ein Childtheme. Das gilt für ein Blog mit Twenty Nineteen genauso wie für jedes andere Theme. Wobei hier die Betonung auf weitergehende Anpassungen liegt. Geht es nur um CSS, reicht dafür das Zusätzliche CSS im Customizer. Für Änderungen im Bereich der Templates oder Erstellen eigener Funktionen braucht es immer ein Childtheme. Denn ohne Childtheme wären die Anpassungen sonst beim nächsten Theme Update weg.

Eigene Seiten Templates

Ich wollte für jede Rubrik ein eigenes Template, das die Beiträge einer Kategorie ausgibt. Der Charme dieses Vorgehens: Jede dieser Seite erhält ein eigenes Coverbild und einen kurzen einleitenden Text. Auf meinem Blog mit Twenty Nineteen weiß man so auf diesen Übersichtsseiten also immer, worum es hier geht.

Luzis Revier beschäftigt sich mit:

allgemeinen Themen (Blog),
Fragen zur Gesundheit und Ernährung,
dem Herstellen von Spielzeug und
einer recht skurrilen Katzenmusik-Rubrik.

Jede dieser Seiten hat nun ihre eigene Vorlage. Wobei die immer nach demselben Muster gestrickt ist: Innerhalb eines Bereiches, dem sogenannten Blogcontainer, rufe ich die Beiträge der gefragten Kategorie ab, und zwar die üblichen zehn pro Seite. Dann sorge ich dafür, dass Beitragsbild und Titel erscheinen und anklickbar sind. Zu ihnen gesellt sich der Auszug des Beitrags mit einem Weiterlesen-Link. Schließlich habe ich die Seiten Navigation des Themes übernommen. Auf die Ausgabe der Meta-Angaben verzichte ich hier absichtlich. Zu den Meta-Angaben später noch mehr.

Der folgende Code nutzt als Grundlage die Twenty Nineteen page.php und erscheint nach dem Loop der Seite im Main-Bereich. Siehe hierzu auch: Seite mit Beiträgen erstellen

<div id="blogcontainer">
	<?php $args = array(
                   'category_name' => 'luzi-blog',
                   'post_type' => 'post',
                   'posts_per_page' => 10,
                   'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1),
                   );
	query_posts($args);

	while (have_posts()) : the_post(); ?>
    
	<a href="<?php the_permalink(); ?>"><?php twentynineteen_post_thumbnail(); ?></a>
	<div class="entry-content">   
	<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 

	<?php the_excerpt(); ?><a class="more-link" title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php _e( 'Weiterlesen' ); ?></a>
</div>
	<?php
	endwhile;
	the_posts_pagination(
			array(
				'mid_size'  => 2,
				'prev_text' => sprintf(
					'%s <span class="nav-prev-text">%s</span>',
					twentynineteen_get_icon_svg( 'chevron_left', 22 ),
					__( 'Newer posts', 'twentynineteen' )
				),
				'next_text' => sprintf(
					'<span class="nav-next-text">%s</span> %s',
					__( 'Older posts', 'twentynineteen' ),
					twentynineteen_get_icon_svg( 'chevron_right', 22 )
				),
			)
		);  
	?>
		    
<?php
wp_reset_query(); 
?>
</div>

Alternatives Vorgehen

Wer sich nicht mit Codierung herumschlagen will, kann auch einfach das Standard Template für Seiten benutzen und die Abfrage der passenden Beiträge in die Hände eines Plugins legen. Da bietet sich dann das Plugin Custom Post Types Block an. Das kann so ziemlich alles abfragen, was sich nur irgendwie abfragen lässt. So auch die titelgebenden Custom Post Types. Weswegen ich das Plugin kürzlich für ein Kundenprojekt eingesetzt habe.

Der Vorteil dieses Plugins: Änderungen lassen sich im Rahmen der Seitenbearbeitung sehr übersichtlich umsetzen. Nachteil: Man macht sich von dem Plugin abhängig.

Coverbilder statt Header

Twenty Nineteen: angepasste Headerbereiche für Seiten und Beiträge

Für Luzis Revier habe ich auf Headerbilder für Seiten komplett verzichtet. Stattdessen nutze ich den Gutenblock Coverbild. Der bietet die Möglichkeit, die Hauptüberschrift und einen kurzen Absatz auf dem Bild liegend auszugeben. Zudem bietet das Coverbild im Gegensatz zum Theme-eigenen Headerbild leichter zugängliche Einstellungsoptionen. Zum Beispiel für die Mindesthöhe des Bildes oder den sogenannten Fokuspunkt. Also die Markierung des Bildbereiches, der auf kleineren Geräten im Zentrum sein soll. Im Bild oben liegt dieser Fokus entsprechend auf der Pfote, die ohne diese Markierung auf Telefonen gar nicht zu sehen wäre.

Auf Beitragsseiten gibt Twenty Nineteen das Beitragsbild statt des Headerbildes aus und zudem eine ganze Menge mehr. Für Luzis Revier habe ich dafür gesorgt, dass das Beitragsbild ohne farblichen Layer und ohne all die Titel- und Meta-Angaben erscheint. Wie das funktioniert, hatte ich schon im Beitrag Twenty Nineteen Header ändern gezeigt.

Worauf ich damals allerdings nicht eingegangen bin, ist das Verhalten der Meta-Angaben.

Meta-Angaben neu positionieren

Twenty Nineteen gibt die Meta-Angaben, also solche wie Autor und Datum, aber auch Kategorien und Schlagwörter, an unterschiedlichen Stellen aus. So befinden sich Autor und Datum auf Beitragsseiten oben auf dem Beitragsbild im Headerbereich. Wenn der aber nur das Beitragsbild ohne all den darüberlagernden Firlefanz zeigt, erscheinen bei meinem Vorgehen nun Autor, Datum, Anzahl der Kommentare sowie der Bearbeiten Link unterhalb des Beitragstitels. Allerdings gibt das Theme Autor und Datum noch einmal im Beitragsfooter aus. Wer damit gut leben kann, muss sich keine weiteren Gedanken machen.

Ich aber brauche die Meta-Angaben Autor und Datum nicht noch einmal unterhalb des Beitrags im Footer. Auf die Anzahl der Kommentare und den Edit Link kann ich außerdem gut verzichten. Die Angaben für Kategorie und Schlagwörter hingegen können gerne im Footer bleiben.

Also habe ich in der /template-parts/header/entry-header.php die für mich überflüssigen Angaben einfach gelöscht. Von der Datei übrig bleibt:

<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

<?php if ( ! is_page() ) : ?>
<div class="entry-meta">
	<?php twentynineteen_posted_by(); ?>
	<?php twentynineteen_posted_on(); ?>
</div><!-- .meta-info -->
<?php endif; ?>

Diese Datei legt man mit gleichem Namen dann im Childtheme in einem Verzeichnis /template-parts/header/ ab. Somit erscheinen unterhalb des Beitragstitels fortan nur noch die gewünschten Angaben Autor (posted_by) und Datum (posted_on).

Damit diese Angaben nicht noch einmal im Beitragsfooter erscheinen, braucht es die Modifikation der entsprechenden Funktion. Die findet sich in der Twenty Nineteen Datei /inc/template-tags.php und kann in der functions.php des Childthemes verändert werden.

Das Vorgehen sorgt dafür, dass die vorhandene Funktion überschrieben wird und dass das Childtheme nun im Beitragsfooter nur noch die Kategorien (posted_in) und Schlagwörter (tags) ausgibt.

// Meta in Beitragsfooter ändern
if( ! function_exists('twentynineteen_entry_footer') ) {
function twentynineteen_entry_footer() {
    /* translators: used between list items, there is a space after the comma. */
			$categories_list = get_the_category_list( __( ', ', 'twentynineteen' ) );
			if ( $categories_list ) {
				printf(
					/* translators: 1: SVG icon. 2: posted in label, only visible to screen readers. 3: list of categories. */
					'<span class="cat-links">%1$s<span class="screen-reader-text">%2$s</span>%3$s</span>',
					twentynineteen_get_icon_svg( 'archive', 16 ),
					__( 'Posted in', 'twentynineteen' ),
					$categories_list
				); // WPCS: XSS OK.
			}

			/* translators: used between list items, there is a space after the comma. */
			$tags_list = get_the_tag_list( '', __( ', ', 'twentynineteen' ) );
			if ( $tags_list ) {
				printf(
					/* translators: 1: SVG icon. 2: posted in label, only visible to screen readers. 3: list of tags. */
					'<span class="tags-links">%1$s<span class="screen-reader-text">%2$s </span>%3$s</span>',
					twentynineteen_get_icon_svg( 'tag', 16 ),
					__( 'Tags:', 'twentynineteen' ),
					$tags_list
				); // WPCS: XSS OK.
			} }
	}

Gruppen- und Spaltenblöcke

Ich hatte ja erst kürzlich dargestellt, welche Möglichkeiten das Gutenberg Entwickler Plugin für WordPress 5.3 in Aussicht gestellt hatte. Fortan bietet WordPress selbst Gruppen und die Verbesserungen am Spaltenblock. Ich konnte also das Entwickler Plugin abschalten, ohne dabei meine Gestaltung zu verlieren.

Gruppierter Spaltenblock auf Luzis Revier zur Darstellung des Luzi Teams

Die Kombination aus Gruppen- und Spaltenblock findet sich vor allem auf der Startseite von Luzis Revier. Hier habe ich sie für die Darstellung der Themen und des Luzi Teams eingesetzt. Beide arbeiten nach demselben Prinzip: ein vierspaltiger Spaltenblock, der gruppiert ist. Die Gruppe steht dann auf alignfull und nutzt die hellgraue Farbe als Hintergrund. Die habe ich als eine von insgesamt fünf Farben für die Bearbeitung definiert. Siehe hierzu auch: Gutenberg Farben definieren.

Kommentar Datenschutz-Hinweis

Insgesamt nutzt dieses neue Blog so wenig Plugins wie möglich. Darunter sind vor allem meine üblichen Verdächtigen wie die Antispam Bee, Statify oder Autoptimize. Hier ist aber auch ein Plugin aktiv, das es leicht ermöglicht, den einleitenden Text zu Kommentaren zu modifizieren: Advanced Comment Form.

Damit lässt sich also unter anderem anstelle oder zusätzlich zum Hinweis, dass E-Mail-Adressen nicht veröffentlicht werden, auch noch ein Hinweis auf die Datenschutzerklärung setzen. Anders als hier auf diesem Blog, das sich für jeden Kommentar eine Zustimmung zur dauerhaften Speicherung einholt, weise ich auf dem neuen Blog also nur auf die Speicherung hin.

Mit Advanced Comment Form ließe sich übrigens auch auf Name und E-Mail-Adresse als Pflichtfelder und ganz auf das Feld für die Website-Adresse verzichten. Ich habe es aber bei dem Standard belassen und sorge wie auch auf diesem Blog nur dafür, dass keine Kommentar-IP-Adressen gespeichert werden.

Alles in allem war es doch mal wieder mehr Arbeit als gedacht. Die Liste meiner CSS-Anpassungen ist auch viel länger geworden, als ich ursprünglich mal dachte. Und dann auch noch all der Text, damit das Blog nicht leer an den Start geht. Aber Spaß hat es natürlich trotzdem mal wieder gemacht.

Beitragsbilder: Britta Kretschmer

Internetkurse Köln