Twenty Nineteen Header ändern

von

am

|

geschätzte Lesezeit:

5 Minuten

Disclaimer: Dieser Beitrag ist älter als zwei Jahre. Es könnte also sein, dass auch sein Inhalt in Teilen bereits veraltet ist.

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:

Twenty Nineteen Header bearbeitet, Desktop Ansicht

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.

Twenty Nineteen Header mobil, vor und nach der Bearbeitung

Beitragsbilder: Britta Kretschmer

3 Antworten zu „Twenty Nineteen Header ändern“

  1. Thomas

    Hallo Britta,
    genau nach so einem Tipp hatte ich gesucht, weil ich ein Projekt mit dem schlanken twenty nineteen umsetzen will, statt mit voluminösen Pagebuildern.
    Nur leider verstehe ich die Änderung an der content-page.php nicht so ganz. Das Folgende ist Bestandteil der regulären content-page.php

    Heißt das, alles danach muss weg? Könntest Du vielleicht zeigen, wie die neue content-page.php aussehen müsste?
    Muss ich, damit das alles klappt, die Ordnerstruktur im Child-Theme nachbilden, also auch en Ordner template-parts anlegen?
    Es wäre toll, wenn Du das noch etwas genauer beschreiben könntest!
    Vielen Dank und herzliche Grüße,
    Thomas

  2. Hallo Thomas,

    in der content-page.php fallen nur die beiden benannten Zeilen weg. Konkret sind dies die Zeilen 15 und 19. Der Rest, also auch die Zeilen 16, 17 und 18, bleiben bestehen. Dasselbe gilt für die content-single: Zeile 15 und 19 fallen weg, der Rest bleibt.

    Tatsächlich bilde ich die Verzeichnisstruktur immer nach. Aber gerade mal ausprobiert und festgestellt: Es geht auch ohne Unterverzeichnisse.

    LG, bk

  3. Thomas

    Hallo Britta,

    vielen Dank für die schnelle Antwort. Ich teste das nachher gleich einmal. Bin sehr gespannt!

    Herzliche Grüße,

    Thomas

Schreibe einen Kommentar

Die im Rahmen der Kommentare angegebenen Daten werden von mir dauerhaft gespeichert. Cookies speichere ich nicht. Für weitere Informationen siehe bitte meine Datenschutzerklärung.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert