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.

28 Kommentare

  1. Diese Methode hat scheinbar keine Auswirkung auf die Startseite, auch wenn ich bei den eingebetteten Seiten jeweils das neue Full Width Template auswähle. Wie kann ich das Template für die Startseite anwenden?

    1. Hallo Frank,

      Ja, das liegt an der Template Hierarchie von WordPress. Siehe auch das Schaubild unter https://developer.wordpress.org/themes/basics/template-hierarchy/

      Mit TwentySeventeen werden statische Seiten üblicherweise mit der page.php dargestellt. Mit dem nun erstellten Page Template kann ein spezifischeres Template verwendet werden, die template-fullwidth.php.

      Die Startseite ist aber ein Spezialfall und keine normale, statische Seite. Das erkennt man auch daran, dass diese nicht wie üblich als Seite im Backend erstellt wird.

      Deshalb kommt hier nicht die page.php zum Einsatz, sondern im Fall von TwentySeventeen die front-page.php. Je nach Theme ist das aber unterschiedlich, nicht alle Themes haben eine front-page.php.

      Die Startseite von TwentysSeveenten bzw. die front-page.php stellt dann abhängig von den Einstellungen im Customizer die letzten Blog Beiträge oder die eingebetteten Seiten dar. Dazu werden aber eigene Template Dateien verwendet, welche innerhalb der front-page.php geladen werden.

      Page Templates sind daher nur für statische Seiten in der Einzelansicht möglich, nicht für die Startseite.

      Zur Änderung der Startseite kann die front-page.php mit einem Child Theme überschrieben werden.

      LG,
      Thomas

      1. Hi Thomas,

        Danke für die Erklärung. Wie kann ich die Blogbeiträge in eine statische Seite einbauen? Über das SiteOrgin Widget Post Loop ist es mir möglich eine statische Seite anzulegen.
        Gibt es auch noch eine andere Möglichkeit ohne Widget die Blogbeiträge statisch im Full Template darzustellen?

        1. Die WordPress Core Einstellungen erlauben das. Unter Design > Customizer > Statische Startseite kann eine statische Seite anstatt den letzten Beiträgen ausgewählt werden.

          Danach kann zusätzlich eine weitere Seite als Beitragsseite selektiert werden. Diese zeigt dann den Blog anstelle des normalen Contents.

          1. Für eine Full-Width Anzeige des Blog Index muss aber die home.php mit einem Child Theme überschrieben und das Styling für dieses Template angepasst werden.

            Mit der Core Option ist praktisch nicht möglich, extra Page Templates zu verwenden.

          2. Danke für Deine Erklärung. Muss dazu sagen dass ich ein anderes Theme namens Smartline verwende (was auch von Dir entwickelt wurde).
            Mein Gedankengang war folgender: Ich kopiere mir den Code aus der Frontpage.php und erstelle mir eine neue Datei namens Blog.php. Lasse in dieser die Slidebar weg und gib im Header der Blog.php ein neuen Namen für das Seitentemplate Blog an. Danach erstelle ich eine leere statische Seite mit dem neuen Seitentemplate (Blog.php)

  2. Hi Thomas,

    danke für Dein super Tutorial; genau, was ich gesucht habe. Leider zieht er sich für die full-width-template.php immer noch die sidebar, nur dass sie jetzt über dem content angeordnet wird. Wie würde ein zusätzlicher css-code lauten für das full-width-template, um die Anzeige der sidebar dort zu unterdrücken?
    Hab die site im maintenance-modus; würde sie gern gegebenenfalls freigeben, falls Du mal drüberschauen möchtest.
    Vielen Dank nochmal für Dein Tuturial und den Code 🙂
    Julia

    1. Hallo Julia,

      Gern geschehen!

      Verwendest du denn TwentySeventeen? Das Theme stellt grundsätzlich keine Widgets auf statischen Seiten dar, weshalb mit der Kopie der page.php auch keine Widgets auftauchen sollen.

      Bei Anwendung des Tutorials bei anderen Themes wird die page.php wohl häufig auch die Sidebar laden. Falls die statischen Seiten normalerweise Widgets anzeigen, muss das Einbinden der Sidebar in der full-width-template.php gelöscht werden.

      Im Normalfall wird die Sidebar mit folgender Code-Zeile geladen:
      < ?php get_sidebar(); ?>

      Diese kann in dem Full Width Template gelöscht werden.

      Beste Grüße,
      Thomas

  3. Hallo Thomas,

    bezieht sich dieses Tutorial nur auf das Theme TwentySeventeen oder kann ich dies auch auf das Theme TwentySixteen anwenden?

    1. Hallo Steven,

      Das Tutorial bezieht sich auf TwentySeventeen.

      Für TwentySixteen funktioniert es grundsätzlich genau gleich, es muss nur anderer CSS Code verwendet werden, um das standardmäßige 2-Spalten Layout zu überschreiben.

      Habe es nicht ausprobiert, aber der CSS Code könnte in etwa so aussehen:

      
      @media screen and (min-width: 56.875em) {
      	body.page-template-template-full-width #content .content-area {
      		float: none;
      		margin: 0;
      		width: 100%;
      	}
      }
      

      Beste Grüße,
      Thomas

  4. ich habe deine Anweisungen befolgt, kann aber leider nach dem Erstellen des Child-Themes in den Seiten-Attributen die Auswahl „Template“ nicht sehen. Was mach ich falsch?

    1. WordPress erkennt die Templates am Header, der File Header am Anfang der Datei und die Variable Template Name darf deshalb weder fehlen noch falsch geschrieben werden.

      1. ich kann zwar das Template „full width“ jetzt auswählen (hatte vergessen, das Child-Template zu aktivieren (^^Anfängerfehler – sorry), die Seite wird mir dann aber dennoch zweispaltig angezeigt… bin ich zu blöd für das ganze?

        1. Die Umstellung auf das Full-Width Layout erfolgt durch den im Tutorial beschriebenen CSS Code.

          Wichtig ist hier die Verwendung der richtigen Klasse am Anfang. WordPress fügt eine neue Klasse im body Tag bei der Auswahl des Page Templates hinzu und verwendet dazu den Dateinamen des Templates.

          Aus template-full-width.php wird dabei die Klasse .page-template-template-full-width

          Bei einer anderen Benennung für die neue Template Datei muss entsprechend die CSS Klasse in der style.css angepasst werden.

          1. ich meine, alles richtig gemacht zu haben, die Dateien heißen alle gleich wie im Tutorial, es funktioniert aber nicht

          2. Eventuell liegt auch nur ein Syntax-Fehler im CSS Code vor. Ein fehlendes Komma oder geschweifte Klammer kann das gesamte Styling kaputt machen.

  5. Hallo Thomas,

    erste Gehversuche mit WP…
    Full-With bei TwentySeventeen wäre ganz toll.

    Habe mich „sklavisch“ an Deine Anleitung gehalten – leider kein Erfolg.
    Ich kann im Seiten-Editor zwar „Full With“ als Template auswählen, es zeigt sich jedoch keine Änderung.
    page.php ist aus git kopiert und umbenannt, style.css ist um den git-code am Ende erweitert. Keine eigenen Namen oder Ähnliches…

    Irgend eine Idee?

    1. Schwer zu sagen aus der Ferne. Am Ende sollte man nicht vergessen, dass neu erstellte Full Width Template in den Seiten-Attributen der Seite auszuwählen.

      Ansonsten würde ich mit den Entwickler-Tools von Firefox oder Chrome die Seite analysieren und überprüfen, ob der CSS Code aktiv ist.

      LG,
      Thomas

  6. hallo Thomas

    vorweg: vielen Dank für dieses tollte Tutorial zum Thema Layout in WP 2017
    Kompliment!!

    ich hab auf der Page http://www.f-s-j.de (beta-beta) ein WP 2017 am Laufen – unter den Standardbedigungen ist mir die Contenspalte – also der Content in der Mitte der Page – zu schmal. M.a.W: ich hätte gerne dass dieser (center-) Content breiter ist.
    Darüber hinaus möchte ich gleichzeitig dass die rechte Seitenspalte entsprechend klein wird u. am rechten Rand orientiert ist.

    mit folgendem Code komm ich nicht hin:

    in der “Additional CSS” das folgende editieren

    .wrap {
    max-width: 100%;
    }

    Da wird die rechte Seitenspalte auch „vergroessert“.

    Was kann man tun!?

    freu mich auf einen tipp. VG Martin

    1. Hallo Martin,

      Vielen Dank und sorry für die späte Antwort.

      Der Beitrag hilft hier leider wenig weiter, weil es um ein Fullwidth Page Template geht.

      Die Breite des Content-Bereichs und der Sidebar sind in der style.css definiert. Diese können gezielt mit eigenem CSS überschrieben werden. Zum Herausfinden der benötigten Klassen können die Entwickler-Tools des Browser verwendet werden. Dazu findet man auch Anleitungen im Netz.

      Viele Grüße,
      Thomas

  7. Hallo Thomas,
    erstmal muß ich Dir schreiben, daß Du sehr prezise Antworten gibst und dazu sind sie auch verständlich für jeden leser. Danke!

    Nun zu meiner Frage :
    Ist es möglich, daß meine anderen Seiten statt des schmallen Heder auch meine Startseiteoptik erhalten ( mit einem Video von der Startseite ) ?

    Wenn ja, wo oder wie soll ich es bewerkstelligen ?

    Vielen Dank für deine Hilfe.

    Mach weiter so….

    J.M.

    1. Hallo J.M.,

      Vielen Dank, freut mich.

      Die Frage hat leider wenig mit diesem Beitrag zu tun und hängt etwas vom verwendeten Theme ab.

      Ich würde deshalb empfehlen, die Frage im WordPress.org Support Forum zu stellen: https://de.wordpress.org/support/

      Dort kann eventuell jmd weiterhelfen.

      Beste Grüße,
      Thomas

    1. Hallo Martin,

      Tut mir leid, ich antworte normalerweise immer auf jeden Kommentar.

      Wahrscheinlich habe ich mehrere gleichzeitig freigeschaltet und danach deinen Kommentar übersehen. Sorry!

      Beste Grüße,
      Thomas

  8. Hallo Thomas,
    danke für deinen Beitrag, den ich auch sinnvoll finde, um auf der gemeinnützigen Internetseite eines Arztes, bei deren Aufbau ich ein wenig helfe, die Eingabe in ein umfangreiches Formular zu erleichtern. Er will auf seiner Seite „unerwartete Behandlungserfolge“ sammeln und diskutieren. Eigentlich kam ich allerdings auf deinen Blog, weil ich die Antwort auf eine andere Frage suchte, die auch mit diesem Projekt zusammenhängt, nämlich: In welcher Datei (oder Datenbanktabelle?) wird unter WordPress eigentlich die Zuordnung eines Beitrags zu einer (oder mehreren) Kategorien gespeichert? Ich habe mir einen Wolf gesucht, aber in Google oder diversen WordPress-Tutorials dazu nichts gefunden. Gehört natürlich eigentlich nicht hierher…
    (Übrigens – für meine eigene Website bibelwelt.de nutze ich das Themezee Theme Leeway…)
    Herzlichen Gruß
    Helmut

  9. Hallo Helmut,

    Die Beiträge werden in der WordPress Datenbank in der wp_posts Tabelle gespeichert, die Kategorien und Schlagworte in wp_terms.

    Verknüpft werden Posts und Terms in der dritten Tabelle wp_term_relationships.

    Die zusätzliche Tabelle wp_term_taxonomy dient hingegen eher dazu, die Art des Terms festzulegen, d.h. ob es sich um eine Kategorie, Schlagwort oder Custom Taxonomy handelt.

    Eigentlich sollte man aber so gut wie nie direk auf die Datenbank zugreifen (sondern mit den vorgelagerten WordPress APIs und Funktionen arbeiten) und braucht deshalb nicht zu wissen, wie WordPress die Daten ablegt.

    Viele Grüße,
    Thomas

Schreibe einen Kommentar zu Julia Schaefer Antworten abbrechen

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