Twenty Seventeen Sidebar auf Seiten einrichten

Twenty Seventeen Sidebar auf SeitenDas 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

17 Anmerkungen zu “Twenty Seventeen Sidebar auf Seiten einrichten

  • 5. Februar 2017 um 8:20
    Permalink

    Hallöchen und danke für den tollen Artikel. Ich möchte aktuell die content-front-page-panels.php Datei verändern. Jedoch packen meine Veränderungen nicht, da grundsätzlich auf die template-parts Dateien des übergeordneten Themes zurückgegriffen wird. Muss ich hierzu noch etwas in der functions.php ändern.

    Im Voraus vielen Dank,
    Tom.

  • 5. Februar 2017 um 14:54
    Permalink

    Hallo Tom,

    das klingt mehr nach der Frage, ob das Child Theme richtig eingerichtet ist. Je nach Vorgehen (import oder enqueue) muss in der Tat was in der functions.php des Child Themes stehen. Wo genau es hakt, kann ich so jetzt allerdings nicht beurteilen.
    Für reine CSS-Modifikationen braucht es jedenfalls nicht unbedingt ein Child Theme, das funktioniert auch über das zusätzliche CSS des Twenty Seventeen Themes.

    LG, bk

  • 5. Februar 2017 um 16:47
    Permalink

    Ja, vielen Dank für die Antwort. Suche gerade wie wild im Web.

    Tatsächlich habe ich den gesamten template-parts Ordner auch in mein Child Theme kopiert. Modifikationen, die ich in den template-parts Dateien vornehme, werden nicht auf mein Child Theme übertragen.

    Eigentlich ist die Regel ja, WordPress sucht zuerst nach erforderlichen Dateien in den Childthemeordner, und nur wenn es sie dort nicht findet, holt es sich die Informationen aus den Parentthemeordnern.

    Nur bei mir macht es das halt nicht.

  • 14. Februar 2017 um 16:02
    Permalink

    Hi
    Danke für die tolle Anleitung.

    Ich hätte da auch noch eine Frage!

    Meine Startseite ist halt eine SEITE. Lediglich die “Start”Seite gibt es bei mir. Alles andere sind Beiträge.
    Doch aktuell sieht es ziemlich verschoben aus auf meiner Startseite. Alles sehr weit nach rechts.
    Gibt es irgendwie “Relativ einfach” die Möglichkeit die Frontpage optisch zu 100% einem Beitrag anzupassen?

    Danke im voraus
    Mike

  • 14. Februar 2017 um 16:41
    Permalink

    Hoppela … hätte ich da einmal weiter gelesen :
    “Änderungen gelten nicht für die Twenty Seventeen Startseite!”

    Da ich nun fast alle Änderungen wie o.g. gemacht habe ….
    Lautet meine Frage also :
    Wie erhalte ich das gleiche Ergebnis auf der Startseite?

    Kann ich da irgendwie nur den Inhalt der page.php Datei in die content-front-page.php
    einfügen?

    MfG
    Mike

  • 15. Februar 2017 um 12:01
    Permalink

    Hallo Mike,

    grundsätzlich zuständig für die Startseite ist die front-page.php. Die deckt hier im Zusammenspiel mit der content-front-page.php und der content-front-page-panels.php alle Eventualitäten ab. Wenn man aber weiß, dass man keine Panels nutzen will, kann man die natürlich komplett überschreiben. Zum Beispiel mit dem Inhalt der page.php. Oder mit ganz eigenen Ideen.

    Was aber auch funktioniert (ohne Panels und mit 2-spaltigem Layout): Die front-page.php unangetastet belassen und in die content-front-page.php den Aufruf für die Sidebar einfügen, und zwar zwischen den schließenden DIVs für entry-content und wrap. Getestet und für genügend gut befunden!

    LG, bk

  • 11. April 2017 um 13:36
    Permalink

    Liebe Britta, danke für tolle Beschreibung zur Sidbar, sie hat mir sehr geholfen. Es wäre sehr schade, wenn dieses schöne Theme auf Beitragsseiten keine Sidebar hätte.

    Jetzt habe ich noch drei Fragen:

    – Wenn ich die normalen Beitragsseiten schmal ziehe, gibt es eine Übergangsbreite, bei der die Sidebar noch schmal unter dem Content steht. Erst bei weiterem schmaler Ziehen rutscht die Sidebar in 100 Prozent Breite unter den Content. Wo kann ich eingeben, dass sie entweder rechts daneben oder in 100 Prozent Breite drunter steht?

    – Dann hätte ich gerne das gleiche Verhältnis von Content und Sidebar auch auf den Beitragsseiten. Hier ist mir die Sidebar zu breit. Weißt du, wo ich das Verhältnis Content/Sidebar für Beitragsseiten ändern kann?

    – Dann habe ich noch eine letzte Frage, dann wäre das Theme perfekt für mich. Bei langen Beiträgen, beispielsweise auf dem Handy, wäre es sinnvoll, wenn das Menü unten auch noch einmal erscheint.

    Über Hilfe oder Tipps zur Selbsthilfe freue ich mich sehr,
    liebe Grüße

    Sabine

  • 12. April 2017 um 13:25
    Permalink

    Hallo Sabine,

    ich fürchte, ich verstehe Frage 1 nicht wirklich. Bei mir funktioniert die Anpassung auch beim Groß- und Kleinziehen. Aber das machen Nutzer ja eher selten. Viel wichtiger ist es, dass sich die Website an die Darstellungsmöglichkeiten von Mobilgeräten anpasst. Da sollten natürlich keine Probleme auftreten.

    Zu zweitens: Danke für den Hinweis! Das ist mir glatt durchgegangen. Am besten bei der Definition unter der Überschrift “1. Sidebar grundsätzlich rechts” folgendes als erstes vor den Rest setzen:
    .has-sidebar #secondary,
    Dann gilt die Breite von 30% auch auf Beitragsseiten. Sollte funktionieren. Alternativ den width-Wert hier und für die .pagesidebar auf 36% setzen.

    Und zu drittens: Kann man sicherlich machen, ist aber nicht mal so eben gemacht und erklärt. Vielleicht hilft ja schon der Float To Top Button: https://www.internetkurse-koeln.de/wordpress-scroll-button-float-to-top-button/

    LG, bk

    PS: Zwei Links beim Absender (Beitrag und Blogseite), das funktioniert nicht. Ich habe mal den auf den Beitrag gewählt.

  • 12. April 2017 um 18:20
    Permalink

    Liebe Britta,

    danke für die schnelle Rückmeldung.

    Zu zweitens: das mit der Breite der Sidebar auf der Blogseite klappt. Jetzt ist der Content auf der Blogseite aber noch so schmal wie vorher. Wie kann ich denn auch hier den Content auf 60 Prozent stellen?

    Wenn ich die Blogseite mit schmaler Sidebar jetzt mobil aufrufe oder auf dem Deskstop klein ziehe, erscheint die Sidebar immer schmal unter dem Beitrag und nicht in 100 Prozent Breite.

    Das mit dem Float To Top Button werde ich ausprobieren.

    Nochmals Danke, liebe Grüße, Sabine

  • 13. April 2017 um 13:42
    Permalink

    Liebe Sabine,

    ich merke schon, ich muss den Beitrag wohl überarbeiten, hüstel… Ergänze bitte mal unter 4. Sidebar – Mobilgeräte folgendes (innerhalb der geschweiften Klammern für Geräte mit max. Breite von 782px):
    .has-sidebar:not(.error404) #primary, .has-sidebar #secondary, .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
    {float:none; width: 100%;}

    oder kürzer alles in einem Satz:
    .pagesidebar, body.page-two-column:not(.archive) #primary .entry-header, .has-sidebar:not(.error404) #primary, .has-sidebar #secondary,
    .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
    {float:none; width: 100%;}

    Das sollte jetzt aber alle Eventualitäten abdecken – und funzen! ;-)
    LG, bk

  • 13. April 2017 um 17:17
    Permalink

    Liebe Britta,

    super, danke. Das klappt. Jetzt fehlt mir nur noch eine Kleinigkeit zu meinem Glück. Unter Punkt 5. “Gesamtbreite und Aufteilung auf dem Desktop” wird der Contentbereich für Beitragsseiten auf 60 Prozent festgelegt.

    Jetzt hätte ich gerne den Contentbereich auf den Blogseiten auch auf 60 Prozent. Hier ist nach deinem Input die Breite der Sidebar zwar an die anderen Beitragsseiten angepasst, aber der Contentbereich ist noch so schmal wie vorher.

    Dann wäre es für mich perfekt. Danke schon mal, dir schöne Ostern, liebe Grüße

    Sabine

  • 23. November 2017 um 10:00
    Permalink

    Das ganze funktioniert allerdings seit WP 4.9 mit Twenty Seventeen nicht mehr. Da erscheint nur mehr eine blanke Sidebar ohne Inhalt ….

  • 23. November 2017 um 16:52
    Permalink

    Hallo Michael,
    ich kann nur vermuten: Es gab nicht nur das Update auf WP 4.9, sondern auch eins des Themes. Wenn ich es recht sehe, gibt es kein Child Theme. Das ist aber nötig, damit die Änderungen das Update überleben.
    LG, bk

  • 9. Februar 2019 um 16:49
    Permalink

    Liebe Britta,
    wie kann ich denn erreichen, dass bei Beiträgen und Seiten der Seitentitel nicht in der Sidebar erscheint, sondern direkt über Post oder Seite?
    Herzliche Grüße
    Horst

  • 11. Februar 2019 um 13:12
    Permalink

    Hallo Horst,

    damit auch auf Seiten der Titel über dem Content erscheint, in der Datei „content-page.php“ alle Angaben für den „entry-header“ in den Bereich „entry-content“ oberhalb von „the_content“ verschieben. Nun per CSS die Klasse für diesen .entry-header noch anpassen, sodass er die volle Breite nutzt.

    Viel Erfolg!
    bk

Schreibe einen Kommentar

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