{"id":36855,"date":"2018-03-02T10:39:52","date_gmt":"2018-03-02T09:39:52","guid":{"rendered":"https:\/\/strato.de\/blog\/?p=36855"},"modified":"2022-04-11T13:38:47","modified_gmt":"2022-04-11T11:38:47","slug":"eigenes-wordpress-theme-layout","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-layout\/","title":{"rendered":"Dein eigenes WordPress-Theme: Layout anpassen"},"content":{"rendered":"\n

H\u00e4ttest Du gern ein Fullwidth-Layout oder doch lieber eine Sidebar? Mit eigenen HTML-Klassen und CSS kannst Du Dein Theme nach Herzenslust gestalten. <\/p>\n\n\n\n\n\n\n\n

Im diesem Beitrag<\/a> haben wir gezeigt, wie Du Icons und Bootstrap-Elemente f\u00fcr die Entwicklung Deines Themes auf Basis von Underscores verwendest. Unabh\u00e4ngig davon, ob es sich um ein eigenes oder vorgefertigtes Theme handelt: Um m\u00f6glichst flexibel zu sein, hilft es, die HTML-Struktur anzupassen und dann per CSS zu gestalten. Auf diese Weise kannst Du etwa den Content-Bereich mittig platzieren oder eine Sidebar einf\u00fcgen.<\/p>\n\n\n\n

Wichtig<\/strong>: Diese Anleitung richtet sich an erfahrene Nutzer mit PHP-Kenntnissen. Voraussetzung ist eine lokale WordPress-Installation bzw. ein Hosting-Paket<\/a> f\u00fcr den Live-Betrieb.<\/p>\n\n\n\n

Flexibel ist besser<\/h2>\n\n\n\n

Underscores teilt den Inhaltsbereich in #Primary <\/strong>(Content) und #Secondary <\/strong>(Sidebar). Die Sidebar befindet sich standardm\u00e4\u00dfig unterhalb des Content-Bereichs, weil dieser die komplette Breite einnimmt. Um den linksb\u00fcndigen Content-Bereich in die Mitte zu verschieben, k\u00f6nntest Du einfach folgende CSS-Anweisung verwenden:<\/p>\n\n\n\n

\/* Content mittig platzieren *\/ \n#page {\nwidth: 1170px; \nmargin: 0 auto;\n}<\/pre>\n\n\n\n
Das Problem dabei ist allerdings, dass der Content-Bereich auf die angegebene Breite beschr\u00e4nkt bleibt. Nicht m\u00f6glich w\u00e4re daher beispielweise ein Header, der die volle Bildschirmbreite einnimmt. Darum ist es besser, auf den globalen #page<\/strong>– Container zu verzichten und stattdessen separate Klassen einzuf\u00fchren.<\/p>\n\n\n\n
Die Bereiche Header, Content und Footer bekommen je zwei Klassen: Eine eigene Klasse (area<\/strong>) f\u00fcr unabh\u00e4ngige CSS-Anpassungen und eine \u00fcbergeordnete Klasse (main-page<\/strong>). Wir passen zu diesem Zweck drei Dateien an, die im Hauptverzeichnis des Themes liegen: header.php<\/strong>, footer.php <\/strong>und style.css<\/strong>.<\/p>\n\n\n\n
\"\"
Die neue Klasse \u00bbmain-content-area\u00ab wird die volle Breite einnehmen.<\/figcaption><\/figure><\/div>\n\n\n\n
HTML-Struktur anpassen<\/h2>\n\n\n\n
Der Container #page <\/strong>beginnt im Header und endet im Footer. Um ihn zu entfernen, l\u00f6schst Du in der header.php <\/strong>die Zeile<\/p>\n\n\n\n
<div id=\u201cpage\u201c class=\u201csite\u201c><\/pre>\n\n\n\n
und in der footer.php <\/strong>folgenden Code:<\/p>\n\n\n\n
<\/div><!-- #page --><\/pre>\n\n\n\n
Header<\/h3>\n\n\n\n
Danach f\u00fcgst Du in der header.php <\/strong>an gleicher Stelle eine Klasse f\u00fcr den Header (.header-area<\/strong>) und direkt darunter (also innerhalb des Containers) die zweite Klasse (main-page<\/strong>) f\u00fcr die gesamte Seite ein:<\/p>\n\n\n\n
<div class=\u201cheader-area\u201c>\n  <div class=\u201cmain-page\u201c><\/pre>\n\n\n\n
Schlie\u00dfe die beiden Container unmittelbar nach<\/p>\n\n\n\n
<\/header><!-- #masthead --><\/pre>\n\n\n\n
mit<\/p>\n\n\n\n
   <\/div>\n<\/div><\/pre>\n\n\n\n
Content<\/h3>\n\n\n\n
Das Gleiche wiederholst Du f\u00fcr den Content. F\u00fcge ebenfalls in der header.php <\/strong>ganz unten Folgendes ein:<\/p>\n\n\n\n
<div class=\u201cmain-content-area\u201c>\n<div class=\u201cmain-page\u201c><\/pre>\n\n\n\n
<\/div><!-- #content --><\/pre>\n\n\n\n
Danach schlie\u00dft Du die beiden div-tags in der footer.php<\/strong> oberhalb von<\/p>\n\n\n\n
<?php wp_footer(); ?><\/pre>\n\n\n\n
mit<\/p>\n\n\n\n
<\/div>\n   <\/div><\/pre>\n\n\n\n
Footer<\/h3>\n\n\n\n
Aller guten Dinge sind drei. Gib nun f\u00fcr den Footer in der footer.php <\/strong>oberhalb von<\/p>\n\n\n\n
<footer id=\u201ccolophon\u201c class=\u201csite-footer\u201c><\/pre>\n\n\n\n
diese\nZeilen ein:<\/p>\n\n\n\n
div class=\u201cfooter-area\u201c>\n<div class=\u201cmain-page\u201c><\/pre>\n\n\n\n
Die Tags werden unterhalb von<\/p>\n\n\n\n
<\/footer><!-- #colophon --><\/pre>\n\n\n\n
geschlossen\nmit<\/p>\n\n\n\n
   <\/div>\n<\/div>\n<\/pre>\n\n\n\n
Content mittig platzieren<\/h2>\n\n\n\n
Nun verf\u00fcgt das Theme \u00fcber je eine Klasse f\u00fcr Header, Content und Footer, die bei Bedarf die volle Breite nutzen k\u00f6nnen. Mit der \u00fcbergeordneten Klasse main-page <\/strong>kannst Du in der style.css <\/strong>eine fixe Breite von beispielsweise 1.170 Pixeln definieren. Die Container #Primary <\/strong>und #Secondary <\/strong>verwenden unabh\u00e4ngig vom Inhalt immer die maximale Breite. So bleibt die Sidebar bzw. der Widget-Bereich unterhalb des (mittigen) Contents:<\/p>\n\n\n\n
\/* Breite 1170px *\/\n.main-page {\nmax-width: 1170px; \nmargin: 0 auto;\n}\n#primary, #secondary { \nfloat: none;\npadding: 0;\nwidth: 100%;\n}<\/pre>\n\n\n\n
\u00dcber .main-content-area <\/strong>kannst Du nun den Abstand des Contents zum Footer vergr\u00f6\u00dfern:<\/p>\n\n\n\n
\/* Abstand Content-Footer*\/\n.main-content-area { \npadding-bottom: 2%;\n}<\/pre>\n\n\n\n
\"\"
Mittig platzierte Inhalte mit einer maximalen Breite von 1.170 Pixeln. Damit die Bilder nicht zu viel Platz ein- nehmen, ist ein Seitenverh\u00e4ltnis von 16:9 empfehlenswert (1170×658 Pixel).<\/figcaption><\/figure><\/div>\n\n\n\n
Sidebar einf\u00fcgen<\/h2>\n\n\n\n
Falls Du in Deinem Fullwidth-Layout doch die Sidebar vermisst, kannst Du problemlos zur bekannten Blog-Aufteilung wechseln. Dabei solltest Du allerdings die unterschiedlichen Aufl\u00f6sungen von Desktops und mobilen Ger\u00e4ten beachten. Die Bootstrap-Navigationsleiste wechselt bei einer Bildschirmbreite unterhalb von 768 Pixeln in den mobilen Modus. An diesem Breakpoint sollte auch die Sidebar nach unten wandern. \u00c4ndere dazu die Media Query in der style.css <\/strong>wie folgt:<\/p>\n\n\n\n
\/* Sidebar ausblenden (mobil) *\/ \n@media screen and (min-width: 768px) {\n.menu-toggle { \ndisplay: none;\n}\n.main-navigation ul { \ndisplay: block;\n}\n#primary { \nfloat: left;\npadding-right: 3%;\nwidth: 66.5%\n}\n#secondary { \nfloat: left; width: 33.5%\n}\n}<\/pre>\n\n\n\n
Damit sagst Du Deinem Theme, dass das Bootstrap-Men\u00fc ab einer Bildschirmbreite von 768 Pixeln nicht mehr eingeklappt wird. Mit den zus\u00e4tzlichen Anweisungen unten legst Du fest, dass der Content zwei Drittel und die Sidebar ein Drittel der Breite einnehmen.<\/p>\n\n\n\n
\"\"
Layout mit Sidebar in der Desktop-Ansicht<\/figcaption><\/figure><\/div>\n\n\n\n
Falls Dich die Listenpunkte in den Widgets st\u00f6ren \u2013 weg damit:<\/p>\n\n\n\n
.widget-area ul {\nlist-style-type: none; margin: 0px; padding-left: 0px;\n}<\/pre>\n\n\n\n
In der mobilen Ansicht wird das Men\u00fc eingeklappt und die Sidebar unterhalb des Inhaltsbereichs platziert:<\/p>\n\n\n\n
\"\"
Mobile Ansicht<\/figcaption><\/figure><\/div>\n\n\n\n
Der Anfang ist gemacht<\/h2>\n\n\n\n
Ob Fullwidth- oder klassisches Blog-Layout mit Sidebar: Mit den gezeigten Modifikationen der HTML-Struktur hast Du die Gestaltung Deines Themes selbst in der Hand. Wenn Header oder Footer breiter sein sollen als der Inhaltsbereich, verwendest Du die separaten area<\/strong>-Klassen. Farben, Abst\u00e4nde, Schriften kannst Du nach Lust und Laune \u00fcber die main-page <\/strong>\u00e4ndern.<\/p>\n\n\n\n
Hinweis: Diesen Beitrag haben wir am 10.12.2020 aktualisiert.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
H\u00e4ttest Du gern ein Fullwidth-Layout oder doch lieber eine Sidebar? Mit eigenen HTML-Klassen und CSS kannst Du Dein Theme nach Herzenslust gestalten.<\/p>\n","protected":false},"author":191,"featured_media":36860,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,490],"tags":[51,55],"acf":[],"yoast_head":"\nDein eigenes WordPress-Theme: Layout anpassen<\/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=\"Dein eigenes WordPress-Theme: Layout anpassen\" \/>\n<meta property=\"og:description\" content=\"H\u00e4ttest Du gern ein Fullwidth-Layout oder doch lieber eine Sidebar? Mit eigenen HTML-Klassen und CSS kannst Du Dein Theme nach Herzenslust gestalten.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-layout\/\" \/>\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=\"2018-03-02T09:39:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-11T11:38:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2018\/02\/wp-theme_html_css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\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=\"4 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\/eigenes-wordpress-theme-layout\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-layout\/\",\"name\":\"Dein eigenes WordPress-Theme: Layout anpassen\",\"isPartOf\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\"},\"datePublished\":\"2018-03-02T09:39:52+00:00\",\"dateModified\":\"2022-04-11T11:38:47+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\/eigenes-wordpress-theme-layout\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-layout\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dein eigenes WordPress-Theme: Layout anpassen\"}]},{\"@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":"Dein eigenes WordPress-Theme: Layout anpassen","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":"Dein eigenes WordPress-Theme: Layout anpassen","og_description":"H\u00e4ttest Du gern ein Fullwidth-Layout oder doch lieber eine Sidebar? Mit eigenen HTML-Klassen und CSS kannst Du Dein Theme nach Herzenslust gestalten.","og_url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-layout\/","og_site_name":"STRATO Blog DE Staging","article_publisher":"https:\/\/www.facebook.com\/strato","article_published_time":"2018-03-02T09:39:52+00:00","article_modified_time":"2022-04-11T11:38:47+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2018\/02\/wp-theme_html_css.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":"4 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-layout\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-layout\/","name":"Dein eigenes WordPress-Theme: Layout anpassen","isPartOf":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website"},"datePublished":"2018-03-02T09:39:52+00:00","dateModified":"2022-04-11T11:38:47+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\/eigenes-wordpress-theme-layout\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-layout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dein eigenes WordPress-Theme: Layout anpassen"}]},{"@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\/36855"}],"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=36855"}],"version-history":[{"count":26,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/36855\/revisions"}],"predecessor-version":[{"id":94060,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/36855\/revisions\/94060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media\/36860"}],"wp:attachment":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media?parent=36855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/categories?post=36855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/tags?post=36855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}