Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 21. Februar 2017

Screenshot Child Theme

Twentyseventeen in ein One-Page-Theme verwandeln

Das Standard-Theme von WordPress ist mehr als nur ein Blog-Design. In diesem Tutorial zeigen wir Dir, wie Du aus Twentyseventeen per Child Theme ein One-Page-Layout machst.

Normalerweise legt WordPress für jeden neuen Inhalt eine neue Seite an. Ein One-Page-Layout hingegen hat keine Unterseiten. Stattdessen werden sämtliche Texte, Bilder, Videos etc. untereinander auf einer Seite platziert. Diese minimalistische Darstellung eignet sich am besten für einfache Websites, Portfolios und Landingpages. Das WordPress-Theme Twentyseventeen bietet hierfür dank Parallax-Effekt, Fullscreen-Bildern und Startseiten-Abschnitten bereits gute Voraussetzungen.

Damit Du über die Navigation zu den Inhalten auf der Einzelseite „springen“ kannst, sind jedoch einige Anpassungen nötig. Andernfalls würden die Menüpunkte wie bei den meisten Themes auf die Unterseiten verweisen – was der Idee des One-Page-Designs widersprechen würde. Was Du dafür neben fortgeschrittenen (!) WordPress-Kenntnissen benötigst: STRATO PowerWeb, eine WordPress-Installation mit aktiviertem Twentyseventeen, unser Child Theme und die folgende Anleitung.

Schritt 1: Child Theme installieren

Zunächst installierst Du das Child Theme, welches Du hier herunterladen kannst. Mit dem Child Theme passen wir nicht nur das Layout an, sondern integrieren den für die Navigation zuständigen JavaScript-Code. Dabei handelt es sich um eine leicht modifizierte Version der auf Github veröffentlichten Datei child-theme-js.js. Der Code versieht die Überschriften auf der Startseite mit IDs, sodass diese in der Navigation verlinkt werden können.

JavaScript-Code

Keine Angst vor Code: Alle benötigten Dateien sind im Child Theme enthalten.

Schritt 2: Theme-Einstellungen ändern

Standardmäßig legt WordPress für jeden Beitrag eine Beitragsseite an und verlinkt diese auf der Startseite. Für ein One-Page-Theme benötigst Du eine Seite für alles. Dazu wählst Du als Erstes im Backend Einstellungen -> Lesen -> Eine statische Seite. Wenn Du noch keine Seiten angelegt hast, kannst Du die Beispielseite nehmen und diese später ändern.

Einstellungen im Backend

Statische Seite als Startseite wählen

Schritt 3: Seiten erstellen

Nun erstellst Du für Deine Inhalte einzelne Seiten. Bilder solltest Du als Beitragsbilder einbinden, damit sie in voller Breite und mit dem Parallax-Effekt angezeigt werden. Die Beispielbilder im Child Theme sind 2.000 x 1.125 Pixel groß, was einem Seitenverhältnis von 16:9 entspricht. Noch größere bzw. höhere Bilder sind nicht gut geeignet, weil sie auf den gängigen Bildschirmen nicht komplett dargestellt werden können.

Die in Schritt 2 angegebene Startseite wird als Abschnitt ganz oben auf der Seite erscheinen. Hier kannst Du z. B. das Thema der Seite kurz anreißen oder einen „über mich“-Teil einfügen. Wichtig: Achte darauf, dass die Überschriften Deiner Seiten nur solche Zeichen enthalten, die in den URLs vorkommen, das heißt keine Satzzeichen, Umlaute, Sonderzeichen, scharfes S o. ä. Andernfalls wird die Verlinkung über das Menü nicht funktionieren (siehe Schritt 5). Die Permalink-Struktur (Einstellungen -> Permalinks) wird am besten auf Beitragsname eingestellt.

Seite bearbeiten-Ansicht

WordPress generiert aus dem Seitentitel eine URL.

Schritt 4: Startseiten-Abschnitte festlegen

Die Seiten kannst Du nun über Design -> Customizer -> Theme-Optionen als Startseiten-Abschnitte festlegen. Das Theme stellt diese Inhalte dann mit den Bildern in der entsprechenden Reihenfolge dar. Das Impressum platzierst Du am besten ganz unten. Standardmäßig sind nur vier Abschnitte verfügbar. Wir haben die Zahl in der functions.php des Child Themes mit dieser Zeile auf 10 erhöht:
add_filter( ‚twentyseventeen_front_page_sections‘, function() { return 10; } );

Theme-Optionen im Customizer

Theme-Optionen: Startseiten-Abschnitte festlegen

Schritt 5: Menü erstellen

Unter Design -> Menüs erstellst Du ein neues Menü und setzt bei Oberes Menü („Position im Theme“) ein Häkchen. Die einzelnen Seiten fügst Du anschließend als individuelle Links hinzu.

Position des Menüs

Position für das Menü festlegen und individuelle Links erstellen

Damit die Menüpunkte nicht auf die Unterseiten, sondern auf den jeweiligen Startseiten-Abschnitt verweisen, musst Du die URL nach exakt diesem Schema eingeben: #seitenurl. Für seitenurl nimmst Du die (automatisch generierte) URL der jeweiligen Seite ohne Domainnamen und Slash-Zeichen (siehe Screenshot bei Schritt 3).

Hier ein Beispiel: Die Seite mit dem Titel „Landschaft“ hat die URL . Als individuellen Link für das Menü gibst Du einfach nur #landschaft ein. Als Link-Text kannst Du ebenfalls Landschaft (hier großgeschrieben) angeben. Für den Home-Button trägst Du nur das #-Zeichen als URL ein.

Individuelle Links im Menü

Als URL trägst Du das Rauten-Zeichen (#) und den Teil der Adresse ein, den WordPress aus dem Seitentitel erstellt.

Schritt 6: Navigation anpassen

Wenn die individuellen URLs korrekt angegeben und das Menü gespeichert sind, ist die Navigation startklar. Auf der Startseite kannst Du nun über das Menü die Überschriften der einzelnen Startseiten-Abschnitte ansteuern. Aktuell ist die Navigation jedoch ruckartig – so, wie man es vom Aufrufen einzelner Seiten kennt. Tipp: Wenn Du das Plugin jQuery Smooth Scroll installierst, scrollen Deine Besucher in einer geschmeidigen und doch zügigen Animation zu den einzelnen Abschnitten. Das vermittelt eigentlich erst das Gefühl, sich auf einer einzigen Seite zu bewegen. Hilfreich ist außerdem der Pfeil in der Ecke unten rechts, über den man direkt wieder zum Kopfbereich gelangt.

Der Anfang ist gemacht

Mithilfe des Child Themes und den beschriebenen Schritten haben wir Twentyseventeen in ein vollwertiges One-Page-Theme verwandelt. Dank der integrierten JavaScript-Datei bist Du dabei nicht auf Plugins angewiesen. Und das ist erst der Anfang: Über das Child Theme kannst Du das Layout nun nach Lust und Laune weiter anpassen. Als Belohnung bekommst Du ein Design, das alles andere als Standard ist.

Tags: Wordpress

Der Autor:

Autor: Christian Lingnau

Ich heiße Christian Lingnau und bin freier Redakteur für Hosting-Themen, insbesondere WordPress.

4 Kommentare

  1. King Berzerk sagte am 3. November 2017 um 11:29:

    Lieber Herr Lingnau,

    vielen Dank für die Anleitung – habe ich probiert und es funktionierte. Allerdings sehe es als technisch unmöglich an, bei den Menü-Links #start, #impressum etc. einen Blog zu integrieren, oder habe ich da etwas übersehen?

    Habe ich eine Blogseite (die man eigentlich ja auch nicht auf der One-Page-Lösung mitlaufen hat, sondern als separate Seite) mit der URL meineseite.de/meinbeitrag und klickt in der Navigation z. B. auf Kontakt, so landet man auf meineseite.de/meinbeitrag#kontakt, und das kann ja nicht im Sinne des Erfinders sein.

    Antworten
  2. King Berzerk sagte am 4. November 2017 um 9:54:

    Vermutlich liegt das an der in diesem Blogbeitrag vorgeschlagenen Menü-Architektur mit den individuellen Links, damit die Seite so schön geschmeidig hin- und herscrollt. Im offiziellen Demo von Twenty-Seventeen haben die ja auch einen Blog eingebaut, der nicht stört. Da funktioniert das Ganze, aber nicht mit dem typischen Hin- und Herbewegungen. Also doch lieber absolute Adressen als Ziele eintragen?

    Antworten
    • Christian Lingnau sagte am 5. November 2017 um 16:56:

      Hallo King Berzerk,
      diese Anleitung bezieht sich auf einen One Pager mit einer statischen Startseite. Die Ankerlinks mit #-Zeichen verweisen immer auf eine Stelle auf derselben Seite. meineseite.de/meinbeitrag ist ja andere Seite, so dass der Scroll-Effekt nicht funktionieren kann. Wenn Sie eine statische Startseite mit diesem Effekt haben und das Blog verlinken möchten, können Sie im Menü die Kategorien hinzufügen. Dann landet man auf der Archiv-Seite mit den entsprechenden Beiträgen.
      Viele Grüße
      Christian Lingnau

      Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *
Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Michael Poguntke
Berichtet über Homepage-Baukasten, Webshops & Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Philipp Wolf
Benutzt die STRATO Produkte im Alltag und berichtet darüber

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden