Das neue Standardtheme Twenty Seventeen ist in vieler Hinsicht attraktiv. In mancher Hinsicht jedoch gibt es sich recht eigentümlich. Eine dieser Eigentümlichkeiten ist, dass das Theme für Seiten keine Sidebar vorsieht. Die Twenty Seventeen Sidebar erscheint nur im Rahmen des Blogs. Zwar kann man über Design > Customizer > Theme-Optionen entscheiden, ob Seiten ein- oder zweispaltig sein sollen. Zwei Spalten bedeutet in diesem Zusammenhang aber nicht, dass sich in der zweiten Spalte mehr befände als der Seitentitel. Dort kann auch nicht mehr erscheinen, denn die für die Seitendarstellung verantwortliche page.php sieht dies gar nicht vor. Es braucht also ein kleines bisschen PHP und dann auch noch ein bisschen mehr CSS, damit die Darstellung der neuen Seitenspalte gut aussieht.
Update: 20.04.2017
Im Rahmen der Diskussion sind kleine Unschönheiten bei meinen Bearbeitungsvorschlägen aufgefallen. Das Theme benutzt für Archiv- und Beitragsseiten von Haus aus eine Sidebar. Die ist per Definition 36 Prozent breit; ihrem Content steht eine Breite von 58 Prozent zur Verfügung. Für die Sidebar auf Seiten habe ich aber eine Breite von 30 Prozent gewählt und dem Content zwei Prozent mehr gegönnt. Damit die Sidebar nicht springt, wenn man zwischen Seiten und Beiträgen wechselt, braucht es also die entsprechende Anpassung. Eine solche benötigt auch die Darstellung auf Mobilgeräten: Meine bisherigen Definitionen bezogen sich nur auf die neue Sidebar auf Seiten und ließen dabei die Sidebar auf Archiv- und Beitragsseiten außer Acht.
In den Beitrag eingearbeitet sind nun die entsprechenden Änderungen.
Twenty Seventeen Sidebar für Seiten einrichten
Allein mit CSS lässt sich hier nicht viel machen: Damit sich ein Element formatieren lässt, muss es erst einmal vorhanden sein. Im ersten Schritt gilt es also, die page.php zu modifizieren. Und weil es darum geht, eine Theme Datei zu verändern, braucht es ein Child Theme. Das Child Theme ist die Voraussetzung dafür, dass Ihre Änderung das nächste Theme Update überlebt.
Ebenfalls ein wenig eigentümlich: Twenty Seventeen organisiert seine Theme Dateien in Unterordnern. Die page.php jedoch liegt im Stammverzeichnis des Themes. Somit ist sie problemlos über den Design > Editor zu erreichen. Hier gilt es also, eine Zeile Code einzufügen. Und zwar zwischen dem schließenden DIV des Primary Containers und dem schließenden DIV des Wrap Containers:
<div class="pagesidebar"><?php get_sidebar(); ?></div>Die Auszeichnung mit der Klasse .pagesidebar sorgt dafür, dass sich die Sidebar für Seiten konkret ansprechen lässt.
CSS anpassen
Die folgenden CSS-Angaben gehen von einem zweispaltigen Seitenlayout aus. Deshalb richten Sie dieses erst einmal über Design > Customizer > Theme-Optionen entsprechend ein. Die folgenden CSS-Angaben geben Sie am besten im Rahmen des zusätzlichen CSS des Themes an. Somit überschreiben die neuen Angaben die alten in der style.css.
1. Sidebar grundsätzlich rechts
Auf Blogseiten befindet sich die Twenty Seventeen Sidebar auf der rechten Seite. Auf Seiten hingegen befindet sich die bislang nahezu leere zweite Spalte auf der linken Seite. Ich hätte sie aber auch gerne rechts. Außerdem hätte ich sie gerne nur 30 Prozent breit. Deshalb gilt es im ersten Schritt, die vorhandene Definition zu überschreiben.
Update: Die Definition schließt nun auch die generelle Änderung der Sidebar-Breite mit ein.
/* Definition für die Sidebar rechts statt links */
body:not(.has-sidebar):not(.page-one-column) .page-header, body.has-sidebar.error404 #primary .page-header, body.page-two-column:not(.archive) #primary .entry-header, body.page-two-column.archive:not(.has-sidebar) #primary .page-header,
.has-sidebar #secondary {float: right; width: 30%;}2. Sidebar auf Seiten ebenfalls rechts
Auch die neue Sidebar für Seiten soll sich rechts vom Contentbereich befinden. Dabei soll sie ebenso 30 Prozent der Gesamtbreite ausmachen.
/* Definition für die Sidebar (rechts) auf Seiten mit zwei Spalten */
.pagesidebar {float:right; width: 30%;}3. Keine Sidebar auf einspaltigen Seiten
Für das einspaltige Seitenlayout soll die neue Sidebar auf Seiten hingegen gar nicht angezeigt werden.
/* Definition für keine Sidebar auf einspaltigen Seiten */
.page.page-one-column:not(.twentyseventeen-front-page) .pagesidebar
{display:none;}4. Die neue Sidebar auf Mobilgeräten
Auf Mobilgeräten soll die Sidebar aber nicht rechts vom Contentbereich erscheinen, sondern darunter. Entsprechend soll sie die volle, zur Verfügung stehende Breite ausnutzen.
Update: Die Definition schließt nun auch die generelle Änderung für Content und alle Sidebars mit ein.
/* Definition für Sidebar auf Seiten - Mobilgeräte */
@media screen and (max-width: 782px) {
.pagesidebar,
body.page-two-column:not(.archive) #primary .entry-header,
.blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.error404:not(.has-sidebar) #primary .page-content,
.error404.has-sidebar #primary .page-content,
body.page-two-column:not(.archive) #primary .entry-content,
body.page-two-column #comments,
.has-sidebar:not(.error404) #primary,
.has-sidebar #secondary
{float:none; width: 100%;}
}5. Gesamtbreite und Aufteilung auf dem Desktop
Auf dem Desktop hingegen sollen Contentbereich und Sidebar zusammen 1000 Pixel breit sein. Dasselbe gilt für die Hauptnavigation. Dabei soll der Contentbereich 60 Prozent der Gesamtbreite nutzen.
Update: Die Definition schließt nun auch die generelle Änderung der Content-Breite mit ein.
/* Definition für 1000px Breite (Primary und Sidebar) auf Desktop */
@media screen and (min-width: 48em) {
.wrap {max-width: 1000px;}
/* Definition für 1000px Breite der Hauptnavigation auf Desktop */
.navigation-top .wrap {max-width: 1000px;}
/* Definition für 60& Breite des Contentbereiches (Primary) auf Desktop */
.blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.error404:not(.has-sidebar) #primary .page-content,
.error404.has-sidebar #primary .page-content,
body.page-two-column:not(.archive) #primary .entry-content,
body.page-two-column #comments,
.has-sidebar:not(.error404) #primary
{float: left; width: 60%;}
}6. Ausblenden des Twenty Seventeen Beitragsbildes
Und schließlich: Blenden wir das in meinen Augen ungünstig positionierte Beitragsbild sowohl auf Seiten als auch auf Beiträgen aus. Auf der Blogseite sowie auf allen anderen Archivseiten wird es hingegen noch immer angezeigt.
/* Definition für das Ausblenden des Beitragsbildes auf Seiten und Beiträgen */
.single-featured-image-header img
{display:none;}Änderungen gelten nicht für die Twenty Seventeen Startseite!
Die gewählten Änderungen gelten allerdings nicht für die Startseite des neuen Standardthemes. Dafür ist die front-page.php verantwortlich. Was Ihre Startseite zeigen soll, legen Sie erstens durch die Auswahl des Startseiten Templates für Ihre Startseite fest. Zweitens entscheiden Sie im Rahmen des Customizers, welche andere Seiten auf Ihrer Startseite angeteasert werden sollen. Verantwortlich für die Darstellung sind dann die beiden Dateien content-front-page.php und content-front-page-panels.php, die sich im Unterverzeichnis /pages befinden.
Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar