{"id":2177,"date":"2015-06-25T03:00:59","date_gmt":"2015-06-25T02:00:59","guid":{"rendered":"https:\/\/u-labs.de\/blog\/?p=2177"},"modified":"2015-06-26T03:15:26","modified_gmt":"2015-06-26T02:15:26","slug":"wordpress-design-mittels-child-theme-anpassen","status":"publish","type":"post","link":"https:\/\/u-labs.de\/portal\/wordpress-design-mittels-child-theme-anpassen\/","title":{"rendered":"WordPress-Design mittels Child Theme anpassen"},"content":{"rendered":"

WordPress kommt h\u00e4ufig mit einem fertigen oder sogar extra gekauften Design zum Einsatz. Nicht selten erf\u00fcllt dies die Anforderungen zwar weitgehend, aber kleinere Ver\u00e4nderungen w\u00e4ren dennoch w\u00fcnschenswert. Daf\u00fcr eignen sich Child Themes<\/a> optimal: Es wird einfach ein neues Design erstellt, dass vom zu ver\u00e4ndernden Theme\u00a0erbt<\/em>. So k\u00f6nnen eigene Komponenten hinzugef\u00fcgt oder vorhandene modifiziert werden, ohne das originale Theme\u00a0zu ver\u00e4ndern. Dadurch bleibt es\u00a0updatef\u00e4hig, ohne nach jedem Theme-Update m\u00fchsam s\u00e4mtliche Modifikationen erneut einf\u00fcgen zu m\u00fcssen. Zu diesem Thema findet man bereits einige Artikel die zwar funktionsf\u00e4hig sind, jedoch beispielsweise performancetechnisch suboptimal oder unvollst\u00e4ndig sind. Hier soll auch auf diesen Aspekt eingegangen werden.<\/p>\n

Ein Child Theme erstellen<\/h3>\n

Zu allererst muss ein eigenes Child Theme erstellt werden. Dazu legt man ausgehend von WordPress-Root im Verzeichnis\u00a0wp-content\/themes<\/strong> einen neuen Ordner f\u00fcr das Design an. Dieser ist frei w\u00e4hlbar, darf jedoch keine Leer- oder andere Sonderzeichen enthalten. Darin werden zwei Dateien angelegt:\u00a0style.css<\/strong> und\u00a0functions.php<\/strong>. Am wichtigsten ist die CSS-Datei, da WordPress anhand dieser das Parent-Theme zuordnet. Sie muss mit folgendem Kommentar beginnen:<\/p>\n

\r\n\/*\r\n    Theme Name: U-Labs\r\n    Description: U-Labs Design\r\n    Author: Daniel Weber\r\n    Author URI: https:\/\/u-labs.de\r\n    Template: twentyfifteen\r\n    Version: 1.0\r\n    Tags:\r\n*\/\r\n<\/pre>\n
Diese Angaben sind im Adminbereich von WordPress sichtbar und bis auf\u00a0Template<\/strong> frei w\u00e4hlbar. Hier muss der Name des Ordners im Verzeichnis wp-content\/themes<\/strong>\u00a0angegeben werden, in dem sich das Parent Design befinden. In obigem Beispiel wird das WordPress Standard-Theme Twenty Fifteen<\/a> als Basis-Theme\u00a0verwendet. Nun wird das neu erstellte Design im Adminbereich von WordPress unter dem Men\u00fcpunkt\u00a0Design => Themes<\/strong> aufgelistet und kann aktiviert werden.<\/p>\n
Allerdings wird es zerschossen aussehen, da die style.css des Parent-Designs nicht automatisch geladen wird.\u00a0Dazu verwendet man am besten die automatisch geladene\u00a0functions.php<\/strong> sowie die daf\u00fcr vorgesehene WordPress-Funktion wp_enqueue_style<\/a>:<\/p>\n
\r\nadd_action( 'wp_enqueue_scripts', 'ultheme_include_clientscript', 11 );\r\n\r\nfunction mytheme_include_clientscript() {\r\n    wp_enqueue_style( 'parent-theme-stylesheet', get_template_directory_uri() . '\/style.css' );\r\n}\r\n<\/pre>\n
Das reicht bei vielen Themes bereits aus. Damit man CSS aus dem Parent Theme \u00fcberschreiben kann ist jedoch die Reihenfolge wichtig, in der die zwei Stylesheets eingebunden werden: Das Stylesheet des Child Themes muss nach<\/strong> der style.css des Parent Designs geladen werden. Ansonsten werden eure \u00c4nderungen m\u00f6glicherweise vom Originalen Design \u00fcberschrieben. Dazu gen\u00fcgt es, auf der Startseite des Blogs im Quelltext (Strg<\/kbd> + U<\/kbd><\/span>) nach style.css<\/strong> zu suchen. Dazu dr\u00fcckt man am einfachsten Strg<\/kbd> + F<\/kbd><\/span>, um die browsereigene Suchfunktion zu verwenden.<\/p>\n
Es werden zwei Dateien gefunden:<\/p>\n
\r\n<link rel='stylesheet' id='my-theme-css'  href='http:\/\/example.com\/blog\/wp-content\/themes\/my-theme\/style.css' type='text\/css' media='all' \/>\r\n<link rel='stylesheet' id='parent-theme-stylesheet-css'  href='http:\/\/example.com\/blog\/wp-content\/themes\/parent-theme\/style.css' type='text\/css' media='all' \/>\r\n<\/pre>\n
Diese lassen sich anhand des Theme-Ordners zuordnen. In diesem Beispiel wird das Stylesheet des selbst erstellten Designs (my-theme<\/strong>) vor dem des originalen (parent-theme<\/strong>) geladen, sodass oben beschriebenes Problem auftritt. Damit ihr nun das Stylesheet des originalen Designs \u00fcberschreiben k\u00f6nnt, muss die Reihenfolge ge\u00e4ndert werden. Das funktioniert nur, in dem das vom originalen Theme registrierte Stylesheet entfernt und nach Registrierung eures eigenen Stylesheets wieder eingebunden wird:<\/p>\n
\r\nfunction mytheme_include_clientscript() {\r\n    \/\/ Stylesheet des Parent-Styles entfernen\r\n    wp_deregister_style( 'parent-style' );\r\n    \/\/ Zuerst das Stylesheet des Parent-Styles wieder einbinden\r\n    wp_enqueue_style( 'parent-theme-stylesheet', get_template_directory_uri() . '\/style.css' );\r\n    \/\/ Anschlie\u00dfend das Stylesheet des aktuellen Themes, sodass dies zuletzt geladen wird\r\n    wp_enqueue_style( 'child-theme-style', get_stylesheet_uri() );\r\n}\r\n<\/pre>\n
parent-style<\/strong> ist die Bezeichnung (handle), unter der das Stylesheet registriert wurde. Diese wird vom Entwickler des Designs festgelegt und l\u00e4sst sich entweder durch Suchen im originalen Theme oder mit dem Plugin Debug Bar<\/a> ermitteln.<\/p>\n
Modifikationen vornehmen<\/strong><\/p>\n
Nun kann dieses Grundger\u00fcst dazu verwendet werden, um das Parent Theme wie gew\u00fcnscht anzupassen. Vieles l\u00e4sst sich bereits \u00fcber die CSS-Datei regeln. Alles was ihr dort einf\u00fcgt \u00fcberschreibt die Werte des\u00a0urspr\u00fcnglichen Designs.\u00a0Sollte dies nicht funktionieren, hat der Theme-Entwickler seine Eigenschaft mittels !important<\/a> als h\u00f6her priorisiert definiert. Auch in diesem Fall ist das \u00fcberschreiben m\u00f6glich, in dem ihr einfach ebenfalls important verwendet:<\/p>\n
\r\nh1 {\r\n    color: blue !important;\r\n}\r\n<\/pre>\n
In diesem Fall wird n\u00e4mlich die Eigenschaft \u00fcbernommen, welches als Letztes definiert wurde. Und das ist bei unserem Child Theme der Fall, da dessen Stylesheet erst nach dem des originalen Designs geladen wird.<\/p>\n
F\u00fcr alle anderen Dinge die sich nicht im Stylesheet \u00fcberschreiben lassen, gibt es die\u00a0\u00a0functions.php<\/strong>. Sie wird automatisch eingebunden und man kann dort s\u00e4mtliche WordPress-Funktionen verwenden. Dies w\u00e4re beispielsweise n\u00f6tig, wenn das originale Design ein bestimmtes Bildformat festlegt:<\/p>\n
\r\n\/\/ [...]\r\nadd_image_size( 'theme-thumbnail-small', 70, 70, true );\r\n<\/pre>\n
In diesem Fall nutzt man einfach die Action after_theme_setup<\/strong>, um dieses Format mit den gew\u00fcnschten Werten zu \u00fcberschreiben:<\/p>\n
\r\nadd_action( 'after_setup_theme', 'overwrite_image_sizes' );\r\n\/**\r\n * \u00dcberschreibt die vom Parent-Theme gesetzten Bildgr\u00f6\u00dfen\r\n *\/\r\nfunction overwrite_image_sizes() {\r\n    \/\/ Vorschaubilder vergr\u00f6\u00dfern und weich anstatt hart zuschneiden (https:\/\/codex.wordpress.org\/Function_Reference\/add_image_size)\r\n    add_image_size( 'theme-thumbnail-small', 150, 150, false );\r\n}\r\n<\/pre>\n
Gerade bei diesem Beispiel ist zu beachten, dass sich diese \u00c4nderung nicht nachtr\u00e4glich auf bereits hochgeladene Bilder auswirkt! Die \u00c4nderungen werden erst sichtbar, wenn man ein neues Bild hochl\u00e4d bzw. alle Vorschaubilder mit einem entsprechenden Plugin neu erstellen l\u00e4sst. Dies sei nur am Rande erw\u00e4hnt, um dem einen oder anderen die Fehlersuche zu ersparen.<\/p>\n
Vorschau-Bild einf\u00fcgen<\/strong><\/p>\n
Wenn man das Design im Admin-Panel aktiviert, wird es als leere Box angezeigt:<\/p>\n
\"Child<\/a>
Child Theme im WordPress-Backend<\/figcaption><\/figure><\/p>\n
Das l\u00e4sst sich \u00e4ndern, in dem eine Bilddatei namens screenshot\u00a0<\/strong>im PNG-Format in das Haupt-Verzeichnis des Themes (also wp-content\/themes\/mythemename<\/strong>) abgelegt wird. Dies kann beispielsweise ein Screenshot der WordPress-Startseite mit diesem Design sein. Oder aber auch ein selbst erstelltes Logo. WordPress zeigt dieses Bild automatisch in der gepunkteten Fl\u00e4che an. Damit dies passt und gut aussieht, sollte das Bild\u00a0600 x 450 Pixel dimensioniert sein.<\/p>\n
Schlechte Alternativen<\/h3>\n
CSS @import<\/strong><\/p>\n
H\u00e4ufig wird empfohlen, das Stylesheet des Parent Themes einfach\u00a0mittels der Import-Funktion in der eigenen style.css zu laden:<\/p>\n
\r\n\/*\r\n    Theme Name: U-Labs\r\n    Description: U-Labs Design\r\n    Author: Daniel Weber\r\n    Author URI: https:\/\/u-labs.de\r\n    Template: twentyfifteen\r\n    Version: 1.0\r\n    Tags:\r\n*\/\r\n@import url("..\/twentytwelve\/style.css");\r\n<\/pre>\n
Diese L\u00f6sung erzielt dasselbe Ergebnis wie die oben in diesem Artikel erkl\u00e4rte und ist zugegebenerma\u00dfen\u00a0deutlich einfacher umgesetzt. Dennoch habe ich mich dagegen entschieden, weil durch\u00a0@import<\/strong> das Rendering blockiert wird. Bei der regul\u00e4ren Einbindung als link-Element im HTML tritt dies nicht auf, hier wird bei modernen Browsern in der Regel parallel heruntergeladen.<\/p>\n
Plugin<\/strong><\/p>\n
Grunds\u00e4tzlich kann man auch ein kleines Plugin entwickeln – Etwa um ein zweites Stylesheet nachzuladen, welches bestimmte Eigenschaften aus der style.css des Designs \u00fcberschreibt. F\u00fcr solche trivialen \u00c4nderungen mag das sicher in einigen F\u00e4llen ausreichen.\u00a0Allerdings kann es insbesondere bei den WordPress-Funktionen zu Problemen kommen: Das \u00dcberschreiben einer vom Theme gesetzten Bildgr\u00f6\u00dfe wie oben demonstriert funktioniert in Form eines Plugins beispielsweise nicht korrekt. Dies d\u00fcrfte einer der Gr\u00fcnde sein, warum\u00a0Child Themes in der WordPress-Dokumentation<\/a>\u00a0explizit zur Modifikation eines Designs empfohlen werden. Abgesehen davon passt es nat\u00fcrlich auch strukturell besser.<\/p>\n
Es macht daher Sinn, f\u00fcr solche Anpassungen grunds\u00e4tzlich Child Themes zu verwenden. Sp\u00e4testens wenn einfaches \u00fcberschreiben nicht m\u00f6glich ist und man daher \u00c4nderungen an den PHP-Dateien vornehmen muss ist dies ohnehin die bessere L\u00f6sung.\u00a0In diesem Fall kopiert man die betroffenen Dateien einfach in das Verzeichnis des Child Themes und passt diese an. Mit einem Plugin w\u00e4re etwas vergleichbares\u00a0nicht ohne weiteres m\u00f6glich – zumindest nicht ohne auf unsaubere und fragw\u00fcrdige Methoden zur\u00fcckzugreifen.<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress kommt h\u00e4ufig mit einem fertigen oder sogar extra gekauften Design zum Einsatz. Nicht selten erf\u00fcllt dies die Anforderungen zwar weitgehend, aber kleinere Ver\u00e4nderungen w\u00e4ren dennoch w\u00fcnschenswert. Daf\u00fcr eignen sich Child Themes optimal: Es wird einfach ein neues Design erstellt, dass vom zu ver\u00e4ndernden Theme\u00a0erbt. So k\u00f6nnen eigene Komponenten hinzugef\u00fcgt oder vorhandene modifiziert werden, ohne …<\/p>\n","protected":false},"author":5,"featured_media":2203,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61],"tags":[169,163,164,161],"class_list":["post-2177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwareentwicklung","tag-child-theme","tag-parent-theme","tag-ueberschreiben","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/2177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/comments?post=2177"}],"version-history":[{"count":22,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/2177\/revisions"}],"predecessor-version":[{"id":2522,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/2177\/revisions\/2522"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media\/2203"}],"wp:attachment":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media?parent=2177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/categories?post=2177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/tags?post=2177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}