Twenty Nineteen Header ändern

Zugegeben, ich fremdle ein wenig mit dem neuen Standardtheme. Dabei gefällt mir die Tatsache, dass Twenty Nineteen für Gutenberg erstellt wurde und deshalb mit allen Gutenbergschen Möglichkeiten kompatibel ist. Ein Aspekt, der mir so gar nicht schmecken mag, ist der Twenty Nineteen Header. Der kommt mir viel zu gewichtig daher. Vor allem auf Beitragsseiten erschlägt er alles. Doch wie lässt sich der Twenty Nineteen Header ändern, sodass die Hauptnavigation noch funktioniert, Seiten ihr Beitragsbild immer noch full-width zeigen und sich dieses für Beitragsseiten bei Bedarf auch problemlos nicht anzeigen lässt?

Twenty Nineteen und die blauen Bilder

Zuerst einmal: Das blaue Overlay der Bilder lässt sich als einzige zusätzliche Themeoption via Customizer > Farben abschalten. Alternativ kann man hier allerdings auch eine andere Farbe wählen, die dann auch für alle Links gilt. Ich habe es im Beispiel bei der Standardfarbe belassen, aber den Haken vor »Für hervorgehobene Bilder einen Filter unter Benutzung der Primärfarbe anwenden« weggenommen. Nun sehen alle Bilder so aus, wie sie halt aussehen.

Für alles Folgende ist ein Childtheme nötig. Es braucht also ein Verzeichnis twentynineteen-child, darin eine style.css und eine functions.php mit den passenden Angaben.

Den Twenty Nineteen Header ändern: header.php

Nun geht es der header.php an den Kragen. Die Datei zeigt in ihrem masthead-Header eine ganze Menge an. Es folgt eine kleine Umsortierung: Alles, was mit dem Beitragsbild zu tun hat, kommt in den Contentbereich, der am Ende der header.php bereits geöffnet wird. Hingegen fällt der Bereich, der für die Ausgabe des Seiten-/Beitragstitels zuständig ist, einfach weg. Außerdem braucht es eine kleine Änderung des masthead Headers, damit der nicht auf die Idee kommt, für Beiträge eine andere CSS-Klasse zu nutzen als für Seiten. Sprich: Hier steht für die Klasse des Bereichs nun einfach site-header.

Nach dieser Umsortierung sieht es in der header.php wie folgt aus:

    <header id="masthead" class="site-header">
        <div class="site-branding-container">
            <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
        </div><!-- .layout-wrap -->
    </header><!-- #masthead -->

<div id="content" class="site-content">
    <?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>
            <div class="site-featured-image">
                <?php
                    twentynineteen_post_thumbnail();
                    the_post();
                    $discussion = ! is_page() && twentynineteen_can_show_post_thumbnail() ? twentynineteen_get_discussion_data() : null;

                    $classes = 'entry-header';
                if ( ! empty( $discussion ) && absint( $discussion->responses ) > 0 ) {
                    $classes = 'entry-header has-discussion';
                }
                ?>
                <?php rewind_posts(); ?>
            </div>
        <?php endif; ?>

Seiten- und Beitragstitel an anderer Stelle ausgeben

Nun zeigen alle Seiten und Beiträge ihr Beitragsbild unterhalb der Kopfzeile und zu Beginn des Contents. Allerdings fehlt noch die Ausgabe der Seiten- und Beitragstitel. Das ist natürlich nicht im Sinne des Erfinders. Es gilt also, diese an anderer Stelle zu platzieren.

Beitragstitel in der content-single.php einfügen

Für die Darstellung der Beitragsseiten ist das Template content-single.php zuständig. Diese Datei befindet sich in dem Verzeichnis /template-parts/content/. Ein solches Verzeichnis braucht es nun also auch im Rahmen des Childthemes.

Die content-single.php ruft in der Tat den Bereich, der für die Darstellung des Beitragstitels zuständig ist, bereits auf. Allerdings macht sie dies im Kontext einer Bedingung, die etwas mit der bisherigen Darstellung der Beitragsbilder zu tun hat. Das ist nun überflüssig, deshalb fallen if und endif weg.

<?php if ( ! twentynineteen_can_show_post_thumbnail() ) : ?>
	<header class="entry-header">
		<?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
	</header>
	<?php endif; ?>

wird zu

	<header class="entry-header">
		<?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
	</header>

Seitentitel in der content-page.php einfügen

Selbiges gilt auch für Seiten. Für die Darstellung von Seiteninhalten ist die content-page.php zuständig, die sich ebenfalls im Verzeichnis /template-parts/content befindet und in ihrer abgewandelten Form in das gleiche Verzeichnis des Childthemes gehört.

Auch hier bleibt nur der schlichte Aufruf des entry-headers übrig:

	<header class="entry-header">
		<?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
	</header>

Zwischenergebnis

Sofern Ihre Bilder alle über eine entsprechende Größe verfügen, sollte jetzt schon alles ziemlich gut aussehen. Haben Sie allerdings Bilder gewählt, die – sagen wir – vielleicht nur 1200 px oder 1600 px breit sind, werden die nicht die volle zur Verfügung stehende Fensterbreite füllen. Deshalb ist es nötig, für Ihren neuen Twenty Nineteen Header zwei CSS-Angaben zu hinterlegen.

CSS-Angaben für den neuen Twenty Nineteen Header

Die erste der beiden Definitionen sorgt dafür, dass auch kleinere Bilder die volle Fensterbreite nutzen. Also Achtung: Wenn Sie allzu kleine Beitragsbilder benutzen, wird das Ergebnis nicht gut aussehen. Ihre Bilder sollten wenigstens eine Breite von 1600 px haben. Schließlich stellen wir hier etwas größer dar, als es tatsächlich ist.

/* Anpassung der Darstellung von Beitragsbildern, volle Breite */
.site-featured-image .post-thumbnail img {
  height: auto;
  left: 0%;
  max-width: 1000%;
  min-height: 100%;
  min-width: 100vw;
  position: relative;
  top: 0%;
  width: auto; }

Somit nutzt auch ein Bild wie das meine die volle zur Verfügung stehende Breite:

Damit das Ganze auch auf mobilen Geräten gut aussieht, braucht es noch eine weitere Anpassung:

@media screen and (max-width:767px) {
	.site-featured-image .post-thumbnail img {
    	max-width: 100%; }
}

Kein Beitragsbild auf Beitragsseiten

Schließlich ist es nun möglich, für Beitragsseiten das Beitragsbild auszublenden, während Seiten ihres noch zeigen. Hierfür braucht es dann nur eine CSS-Definition:

/* Anpassung, wenn Beitragsseiten das Beitragsbild nicht ausgeben sollen */
.single .site-featured-image .post-thumbnail img {display:none;}

Vorteile des Vorgehens

Die Vorteile bei diesem Vorgehen: Seiten können weiterhin ihr Beitragsbild sehr prominent ausgeben, sofern sie überhaupt ein solches Bild haben. Beiträge hingegen sollten immer ein Beitragsbild haben, das auf den Übersichtsseiten zum Teaser beziehungsweise Auszug angezeigt wird. Auf Beitragsseiten können Sie aber, wenn Sie wollen, darauf verzichten. Immerhin lässt sich das Bild ja auch noch im Content einbinden. Und selbst wenn es als Headerbild erscheint, füllt dies auf mobilen Geräten nicht die komplette zur Verfügung stehende Fläche, sondern nur die Breite. Darüber hinaus sieht die Kopfzeile mit ihrem Menü auf allen Seiten gleich aus.

Beitragsbilder: Britta Kretschmer