{"id":19766,"date":"2017-02-21T09:58:01","date_gmt":"2017-02-21T08:58:01","guid":{"rendered":"https:\/\/strato.de\/blog\/?p=19766"},"modified":"2022-04-11T13:38:48","modified_gmt":"2022-04-11T11:38:48","slug":"twentyseventeen-one-page-theme","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/","title":{"rendered":"Twentyseventeen in ein One-Page-Theme verwandeln"},"content":{"rendered":"

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. <\/p>\n

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

Damit Du \u00fcber die Navigation zu den Inhalten auf der Einzelseite \u201espringen\u201c kannst, sind jedoch einige Anpassungen n\u00f6tig. Andernfalls w\u00fcrden die Men\u00fcpunkte wie bei den meisten Themes auf die Unterseiten verweisen \u2013 was der Idee des One-Page-Designs widersprechen w\u00fcrde. Was Du daf\u00fcr neben fortgeschrittenen (!) WordPress-Kenntnissen ben\u00f6tigst: STRATO PowerWeb<\/a>, eine WordPress-Installation mit aktiviertem Twentyseventeen<\/a>, unser Child Theme und die folgende Anleitung.<\/p>\n

Schritt 1: Child Theme installieren<\/h2>\n

Zun\u00e4chst installierst Du das Child Theme, welches Du hier herunterladen<\/a> kannst. Mit dem Child Theme passen wir nicht nur das Layout an, sondern integrieren den f\u00fcr die Navigation zust\u00e4ndigen JavaScript-Code. Dabei handelt es sich um eine leicht modifizierte Version der auf Github ver\u00f6ffentlichten Datei child-theme-js.js<\/a>. Der Code versieht die \u00dcberschriften auf der Startseite mit IDs, sodass diese in der Navigation verlinkt werden k\u00f6nnen.<\/p>\n

\"JavaScript-Code\"
Keine Angst vor Code: Alle ben\u00f6tigten Dateien sind im Child Theme enthalten.<\/figcaption><\/figure>\n

Schritt 2: Theme-Einstellungen \u00e4ndern<\/h2>\n

Standardm\u00e4\u00dfig legt WordPress f\u00fcr jeden Beitrag eine Beitragsseite an und verlinkt diese auf der Startseite. F\u00fcr ein One-Page-Theme ben\u00f6tigst Du eine Seite f\u00fcr alles. Dazu w\u00e4hlst Du als Erstes im Backend Einstellungen<\/em> -> Lesen <\/em>-> Eine statische Seite<\/em>. Wenn Du noch keine Seiten angelegt hast, kannst Du die Beispielseite nehmen und diese sp\u00e4ter \u00e4ndern.<\/p>\n

\"Einstellungen
Statische Seite als Startseite w\u00e4hlen<\/figcaption><\/figure>\n

Schritt 3: Seiten erstellen<\/h2>\n

Nun erstellst Du f\u00fcr 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\u00df, was einem Seitenverh\u00e4ltnis von 16:9 entspricht. Noch gr\u00f6\u00dfere bzw. h\u00f6here Bilder sind nicht gut geeignet, weil sie auf den g\u00e4ngigen Bildschirmen nicht komplett dargestellt werden k\u00f6nnen.<\/p>\n

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\u00dfen oder einen \u201e\u00fcber mich\u201c-Teil einf\u00fcgen. Wichtig: Achte darauf, dass die \u00dcberschriften Deiner Seiten nur solche Zeichen enthalten, die in den URLs vorkommen, das hei\u00dft keine Satzzeichen, Umlaute, Sonderzeichen, scharfes S o. \u00e4. Andernfalls wird die Verlinkung \u00fcber das Men\u00fc nicht funktionieren (siehe Schritt 5). Die Permalink-Struktur (Einstellungen <\/em>-> Permalinks<\/em>) wird am besten auf Beitragsname <\/em>eingestellt.<\/p>\n

\"Seite
WordPress generiert aus dem Seitentitel eine URL.<\/figcaption><\/figure>\n

Schritt 4: Startseiten-Abschnitte festlegen<\/h2>\n

Die Seiten kannst Du nun \u00fcber Design<\/em> -> Customizer<\/em> -> Theme-Optionen<\/em> 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\u00e4\u00dfig sind nur vier Abschnitte verf\u00fcgbar. Wir haben die Zahl in der functions.php des Child Themes mit dieser Zeile auf 10 erh\u00f6ht:
\nadd_filter( ‚twentyseventeen_front_page_sections‘, function() { return 10; } );<\/em><\/p>\n

\"Theme-Optionen
Theme-Optionen: Startseiten-Abschnitte festlegen<\/figcaption><\/figure>\n

Schritt 5: Men\u00fc erstellen<\/h2>\n

Unter Design <\/em>-> Men\u00fcs<\/em> erstellst Du ein neues Men\u00fc und setzt bei Oberes Men\u00fc<\/em> (\u201ePosition im Theme\u201c) ein H\u00e4kchen. Die einzelnen Seiten f\u00fcgst Du anschlie\u00dfend als individuelle Links<\/em> hinzu.<\/p>\n

\"Position
Position f\u00fcr das Men\u00fc festlegen und individuelle Links erstellen<\/figcaption><\/figure>\n

Damit die Men\u00fcpunkte nicht auf die Unterseiten, sondern auf den jeweiligen Startseiten-Abschnitt verweisen, musst Du die URL nach exakt diesem Schema eingeben: #seitenurl<\/em>. F\u00fcr seitenurl <\/em>nimmst Du die (automatisch generierte) URL der jeweiligen Seite ohne Domainnamen und Slash-Zeichen (siehe Screenshot bei Schritt 3).<\/p>\n

Hier ein Beispiel: Die Seite mit dem Titel \u201eLandschaft\u201c hat die URL . Als individuellen Link f\u00fcr das Men\u00fc gibst Du einfach nur #landschaft<\/em> ein. Als Link-Text kannst Du ebenfalls Landschaft (hier gro\u00dfgeschrieben) angeben. F\u00fcr den Home-Button tr\u00e4gst Du nur das #-Zeichen als URL ein.<\/p>\n

\"Individuelle
Als URL tr\u00e4gst Du das Rauten-Zeichen (#) und den Teil der Adresse ein, den WordPress aus dem Seitentitel erstellt.<\/figcaption><\/figure>\n

Schritt 6: Navigation anpassen<\/h2>\n

Wenn die individuellen URLs korrekt angegeben und das Men\u00fc gespeichert sind, ist die Navigation startklar. Auf der Startseite kannst Du nun \u00fcber das Men\u00fc die \u00dcberschriften der einzelnen Startseiten-Abschnitte ansteuern. Aktuell ist die Navigation jedoch ruckartig \u2013 so, wie man es vom Aufrufen einzelner Seiten kennt. Tipp: Wenn Du das Plugin jQuery Smooth Scroll<\/a> installierst, scrollen Deine Besucher in einer geschmeidigen und doch z\u00fcgigen Animation zu den einzelnen Abschnitten. Das vermittelt eigentlich erst das Gef\u00fchl, sich auf einer einzigen Seite zu bewegen. Hilfreich ist au\u00dferdem der Pfeil in der Ecke unten rechts, \u00fcber den man direkt wieder zum Kopfbereich gelangt.<\/p>\n

Der Anfang ist gemacht<\/h2>\n

Mithilfe des Child Themes<\/a> 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: \u00dcber 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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.<\/p>\n","protected":false},"author":191,"featured_media":19776,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,490],"tags":[55],"acf":[],"yoast_head":"\nTwentyseventeen in ein One-Page-Theme verwandeln<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Twentyseventeen in ein One-Page-Theme verwandeln\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO Blog DE Staging\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/strato\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-21T08:58:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-11T11:38:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2017\/02\/one-page-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"507\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vladimir Simovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vlad_perun\" \/>\n<meta name=\"twitter:site\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vladimir Simovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/\",\"name\":\"Twentyseventeen in ein One-Page-Theme verwandeln\",\"isPartOf\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\"},\"datePublished\":\"2017-02-21T08:58:01+00:00\",\"dateModified\":\"2022-04-11T11:38:48+00:00\",\"author\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\"},\"breadcrumb\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Twentyseventeen in ein One-Page-Theme verwandeln\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\",\"name\":\"STRATO Blog DE Staging\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\",\"name\":\"Vladimir Simovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"contentUrl\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"caption\":\"Vladimir Simovi\u0107\"},\"description\":\"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.\",\"sameAs\":[\"https:\/\/www.vladimir-simovic.de\",\"https:\/\/twitter.com\/vlad_perun\",\"https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic\"],\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Twentyseventeen in ein One-Page-Theme verwandeln","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"de_DE","og_type":"article","og_title":"Twentyseventeen in ein One-Page-Theme verwandeln","og_description":"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.","og_url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/","og_site_name":"STRATO Blog DE Staging","article_publisher":"https:\/\/www.facebook.com\/strato","article_published_time":"2017-02-21T08:58:01+00:00","article_modified_time":"2022-04-11T11:38:48+00:00","og_image":[{"width":900,"height":507,"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2017\/02\/one-page-design.jpg","type":"image\/jpeg"}],"author":"Vladimir Simovi\u0107","twitter_card":"summary_large_image","twitter_creator":"@vlad_perun","twitter_site":"@STRATO_AG","twitter_misc":{"Verfasst von":"Vladimir Simovi\u0107","Gesch\u00e4tzte Lesezeit":"5 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/","name":"Twentyseventeen in ein One-Page-Theme verwandeln","isPartOf":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website"},"datePublished":"2017-02-21T08:58:01+00:00","dateModified":"2022-04-11T11:38:48+00:00","author":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388"},"breadcrumb":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/twentyseventeen-one-page-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Twentyseventeen in ein One-Page-Theme verwandeln"}]},{"@type":"WebSite","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/","name":"STRATO Blog DE Staging","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388","name":"Vladimir Simovi\u0107","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","contentUrl":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","caption":"Vladimir Simovi\u0107"},"description":"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.","sameAs":["https:\/\/www.vladimir-simovic.de","https:\/\/twitter.com\/vlad_perun","https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic"],"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/"}]}},"_links":{"self":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/19766"}],"collection":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/users\/191"}],"replies":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/comments?post=19766"}],"version-history":[{"count":31,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/19766\/revisions"}],"predecessor-version":[{"id":86090,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/19766\/revisions\/86090"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media\/19776"}],"wp:attachment":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media?parent=19766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/categories?post=19766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/tags?post=19766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}