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.

13 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
  3. S.Claus sagte am 24. November 2017 um 10:24:

    Hallo,
    eine tolle Anleitung, vielen Dank dafür!
    Als WordPress-Neuling konnte ich hiermit genau umsetzen, was ich mir vorgestellt habe. Ich habe allerdings noch eine Frage: Ich möchte gerne im Footer das Impressum und einen Copyright einbauen.
    Mir ist nicht ganz klar, wie ich das hier am sinnvollsten umsetze. Einige Tipps im Netz führten bisher nicht zum gewünschten Ergebnis.
    Haben Sie einen Tipp?

    Antworten
    • Christian Lingnau sagte am 25. November 2017 um 11:56:

      Hallo S.Claus, beim Theme Twentyseventeen müssen Sie dafür die Datei site-info.php anpassen. Die liegt im Theme-Ordner unter template-parts/footer. Wie das funktioniert, haben wir hier beschrieben: https://strato.de/blog/wordpress-seiten-template-landing-page/ (Schritt 5).

      Antworten
      • S.Claus sagte am 10. Dezember 2017 um 14:56:

        Hallo Herr Lingnau,
        vielen Dank! Klappt super 🙂
        Herzlichen Dank

        Antworten
      • S.Claus sagte am 10. Dezember 2017 um 16:10:

        Hallo Lingnau,
        da habe ich mich doch zu früh gefreut. Eine Sache läuft doch nicht ganz rund.
        Derzeite teste ich die Seite nur lokal. Wenn ich den Link mit:
        ImpressumTest
        angebe, dann wird die Seite mit dem Impressum geöffnet und mein Menü ist auch oben sichtbar. Jedoch können die Seiten nicht geffnet werden. Laut Adresszeite des Browsers befinde ich ich mich nun im Verzeichnis ‚localhost/wordpress/impressum/‘ und die Links verweisen auf ‚localhost/wordpress/#leistungen‘. Und daher kann ich die Menüpunkte nun nicht mehr aufrufen.
        Ich habe es auch schon mit einem Footer-Widget versucht, aber das ändert auch nichts.
        Möglicherweise ist dies nur ein simpler Anfängerfehler, aber leider finde ich hier keine Abhilfe. Denn das Impressum möchte ich nicht oben im Menü haben, dann würde es gehen.
        Viele Grüße
        S. Claus

        Antworten
        • Christian Lingnau sagte am 12. Dezember 2017 um 10:38:

          Hallo Herr Claus, der Code ist für einen One-Pager und funktioniert daher so nur für eine Seite. Wenn das Impressum auf eine andere Seite soll, ist es am einfachsten, die Navigation dort auszublenden. Das können Sie z. B. mit einem Seitentemplate umsetzen. Wie Seitentemplates allgemein funktionieren, haben wir hier beschrieben: https://strato.de/blog/wordpress-seiten-template-landing-page/.
          Viele Grüße, C. Lingnau

          Antworten
          • S. Claus sagte am 12. Dezember 2017 um 20:42:

            Hallo Herr Lingnau,
            da habe ich mich vielleicht kompliziert ausgedrückt. Es soll auf jeden Fall als One Pager dargestellt werden. Das Öffnen des Impressums klappt, doch kann ich dann nicht mehr die anderen Menüpunkte ansteuern, da ich mich laut Adressleiste in …./wordpress/impressum/ befinde und somit ein Verzeichnis zurück müsste.

            Viele Grüße
            Sandra Claus

          • Christian Lingnau sagte am 13. Dezember 2017 um 21:11:

            Guten Abend FRAU Claus (sorry!),
            wenn Sie das Impressum als eigenständige Seite haben (was offenbar der Fall ist) und aufrufen, dann befinden Sie sich nicht mehr auf der Startseite, sondern auf der Impressum-Seite (…./wordpress/impressum/). Dort wird das Menü zwar auch angezeigt, kann aber nicht funktionieren. Das Menü funktioniert nur wie beschrieben auf der Startseite mit den Startseitenabschnitten. Wie gesagt: Wenn das Impressum nicht auf der Startseite erscheinen soll, würde ich für die Impressums-Seite ein Seiten-Template anlegen und das Menü ausblenden (und einen Zurück/Home-Link einfügen). Alles andere ist aufwändiger und geht thematisch über diese Anleitung hinaus.
            Schönen Abend
            Christian Lingnau

  4. pat sagte am 27. November 2017 um 22:14:

    Guten Abend. Mir gefällt Ihr Tutorial und ich habe es gleich in eine neue WP Installation integriert.
    Nach Aktivierung des Childthemes bekomme ich nur noch einen Whitescreen und ich muss über den Ftp Server den Child Ordner umbenennen, damit standardmäßig twentyseventeen verwendet wird.
    Ich habe WP 4.9 installiert, dazu nur das Plugin „Shortcode Ultimate“. Haben Sie eine Idee?

    Antworten
    • Christian Lingnau sagte am 28. November 2017 um 20:54:

      Guten Abend, aus der Ferne lässt sich das schwer sagen. White Screen kann durch einen Fehler im PHP-Code verursacht werden. Ich habe aber das verlinkte Child Theme gerade nochmal installiert und keine Probleme. Haben Sie am Code etwas verändert? Deaktivieren Sie am besten auch mal das Plugin, vielleicht ist das ja das Problem. Hoffe das hilft!

      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
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und 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