Full Width Page Template für Twenty Seventeen mit WordPress Child Theme erstellen

In diesem Tutorial zeige ich anhand von Twenty Seventeen, wie du mit einem WordPress Child Theme und etwas Code ein neues Full Width Seiten-Template zur Anzeige einer statischen Seite in voller Breite realisieren kannst.

Das neue Standard-Theme Twenty Seventeen ist speziell für Business Websites gedacht und stellt standardmäßig statische Seiten in zwei Spalten an. In der linken Spalte befindet sich der Titel der Seite, rechts der eigentliche Content.

Im Customizer kann das Seitenlayout auch auf ein einspaltiges Layout umgestellt werden, wodurch Titel und Content untereinander dargestellt werden. Hierbei zentriert das Theme den Container auf eine maximale Breite von 740 Pixel.

Der in beiden Seitenlayouts schmale Content-Bereich dient der Usability, weil sich kurze Zeilen generell leichter erfassen lassen und somit die Lesbarkeit erhöht wird. Für statische Seiten, welche hauptsächlich Medien wie Bilder, Galerien und Videos anzeigen sollen, ist der schmale Content-Bereich aber nicht unbedingt nötig.

Seite mit Bildergalerie in Twenty Seventeen

Nehmen wir beispielsweise an, ich möchte eine einzelne, statische Seite zur Anzeige einer Bildergalerie nutzen, welche auf Text weitgehend verzichtet.

Mit dem Seitenlayout von Twenty Seventeen erhalte ich dieses Ergebnis:

Ein großer Teil der Website ist für die Anzeige des Titels reserviert, die Bilder der Galerie werden entsprechend klein dargestellt.

Mit einem zusätzlichen Full Width Template zur Anzeige einer statischen Seite in voller Breite können für statische Seiten auch unterschiedliche Layouts realisiert und damit der Seite mit Bildergalerie mehr Platz verschafft werden.

Full Width Page Template anlegen

WordPress Themes sollten nie direkt erweitert oder angepasst werden, weil alle Dateien bei einem Update ersetzt werden und etwaige Modifikationen verloren gehen.

Aus diesem Grund erstellen wir ein Child Theme für Twenty Seventeen, um das neue Template hinzuzufügen. Siehe dazu auch mein Tutorial zur Erstellung eines Child Themes.

Anschließend kopieren wir die page.php vom Parent Theme Twenty Seventeen in unser Child Theme. Es dient als Vorlage für unser individiuelles Page Template.

Da wir nicht das allgemeine Layout von statischen Seiten mit page.php überschreiben wollen, benennen wir die Datei in template-full-width.php um.

Zur Erstellung des Page Templates genügt die Angabe des Parameters Template Name als Kommentar / File Header am Anfang der Datei:

<?php
/**
 * Template Name: Full Width
 *
 * @package Twenty Seventeen Child
 */
?>

Den kompletten Code für die Datei habe ich euch als Github Gist bereitgestellt.

Statische Seite mit Full Width Template anlegen

Nun kann eine neue statische Seite angelegt bzw. eine existierende Seite bearbeitet werden und in der Box für Seiten-Attribute das neue Template ausgewählt werden:

Damit verwendet WordPress nun anstatt der page.php unsere neue Template Datei template-full-width.php zur Anzeige der statischen Seite.

Styling für Full Width Content Bereich hinzufügen

Die Änderung des Layouts zur Darstellung der Seite in voller Breite erfordert nur ein wenig CSS. Eine Modifikation der Template Datei selbst ist deshalb gar nicht nötig.

Wichtig zu wissen ist, dass WordPress für Page Templates neue Klassen im body Tag hinzufügt und dazu den Dateinamen des Page Templates verwendet.

Mit unserem Seiten-Template steht uns daher die Klasse .page-template-template-full-width zur Verfügung, mit dem wir gezielt CSS Code für unser Template hinzufügen können, das Styling der anderen Template Dateien aber nicht beeinflussen.

Als Erstes überschreiben wir die maximale Breite von 740px für einspaltige statische Seiten des Themes:

body.page-template-template-full-width #content #primary {
	max-width: 100%;
}

Der nächste CSS Code löst das zweispaltige Layout auf, mit dem Titel und Content nebeneinander dargestellt werden:

body.page-template-template-full-width #content #primary .entry-header,
body.page-template-template-full-width #content #primary .entry-content {
    float: none;
    width: 100%;
}

Zusätzlich kann noch etwas Abstand zwischen Titel und Content eingefügt werden, wenn diese nun untereinander dargestellt werden:

body.page-template-template-full-width #content #primary .entry-header {
    margin-bottom: 4em;
}

Der kompletten Code für die style.css steht ebenfalls im Github Gist zur Verfügung.

Das Ergebnis

Damit funktioniert unser Full Width Template schon und der Titel und Content wird nun in der vollen Breite dargestellt, wenn das Template ausgewählt wurde.

Alle anderen statischen Seiten mit Standard Template nutzen weiterhin das zweispaltige Seitenlayout.