{"id":9384,"date":"2015-11-02T10:20:01","date_gmt":"2015-11-02T09:20:01","guid":{"rendered":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?p=9384"},"modified":"2020-08-26T11:22:39","modified_gmt":"2020-08-26T09:22:39","slug":"child-themes-individuelles-wordpress-design-ganz-einfach","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/","title":{"rendered":"Child-Themes: individuelles WordPress-Design ganz einfach"},"content":{"rendered":"<p>Wolltest Du schon immer ein paar individuelle Design-Anpassungen in Deinem WordPress-Theme machen, aber die Original-Dateien nicht ver\u00e4ndern? Mit dem m\u00e4chtigen WordPress-Feature \u201eChild Themes\u201c und Grundkenntnissen in HTML und CSS ist das nicht schwierig.<!--more--><\/p>\n<p>Fertige Website-Vorlagen \u2013 so genannte Themes \u2013 gibt es massenhaft. Doch selten findet sich eines, das exakt passt. Kleine Anpassungen sind fast immer n\u00f6tig, und sei es nur die Schriftart, ein paar Farben oder eine zu dick geratene Linie. Schon mit HTML- und CSS-Grundkenntnissen kannst Du WordPress-Themes ganz einfach ver\u00e4ndern und anpassen, Basis-Wissen in PHP ist f\u00fcr gr\u00f6\u00dfere \u00c4nderungen hilfreich.<\/p>\n<p>Mit so genannten \u201eChild Themes\u201c bietet <a href=\"http:\/\/www.strato.de\/hosting\/#apps\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress<\/a> ein m\u00e4chtiges Feature. Sie setzen auf ein vorhandenes Theme mit dessen Formatierungen und Funktionen auf und erg\u00e4nzen oder modifizieren es mit eigenen Elementen und Designs. Der gro\u00dfe Vorteil: Das Original-Theme bleibt dabei unangetastet, Updates des Originals beeintr\u00e4chtigen die Anpassungen im Child-Theme nicht.<\/p>\n<h2>Schritt f\u00fcr Schritt: Erstelle Dein eigenes Child-Theme<\/h2>\n<p>Ein wenig Aufwand bringt nur das erstmalige Anlegen des Child Themes mit sich, danach sind die Anpassungen genau so unkompliziert als w\u00fcrdest Du direkt im Original-Theme arbeiten. Zun\u00e4chst suchst Du Dir ein Theme aus, das Deinen Vorstellungen so nahe wie m\u00f6glich kommt, und installierst es. Achte darauf, dass es als geeignet f\u00fcr Child Themes beschrieben wird. Die meisten Themes sind das, aber es gibt Ausnahmen.<\/p>\n<figure id=\"attachment_9385\" aria-describedby=\"caption-attachment-9385\" style=\"width: 719px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9385\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/plugin-one-click-child-theme.jpg\" alt=\"F\u00fcr Bequeme: Das Plugin \u201eOne Click Child Theme\u201c erledigt die ersten Schritte automatisch.\" width=\"719\" height=\"497\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/plugin-one-click-child-theme.jpg 719w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/plugin-one-click-child-theme-160x110.jpg 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/plugin-one-click-child-theme-400x276.jpg 400w\" sizes=\"(max-width: 719px) 100vw, 719px\" \/><figcaption id=\"caption-attachment-9385\" class=\"wp-caption-text\">F\u00fcr Bequeme: Das Plugin \u201eOne Click Child Theme\u201c erledigt die ersten Schritte automatisch.<\/figcaption><\/figure>\n<p>Im Folgenden beschreiben wir, wie Du ein Child-Theme manuell anlegst. Willst Du Dir diese ersten Schritte sparen, erledigt das in den meisten F\u00e4llen auch das <a href=\"https:\/\/wordpress.org\/plugins\/one-click-child-theme\/\" target=\"_blank\" rel=\"noopener noreferrer\">Plugin \u201eOne Click Child Theme\u201c<\/a>\u00a0automatisch. Die Design-Anpassungen des Child-Themes musst Du anschlie\u00dfend aber nat\u00fcrlich dennoch von Hand erledigen.<\/p>\n<h2>1) Ordner f\u00fcrs Child Theme anlegen<\/h2>\n<p>Themes liegen in Deinem Webspace\u00a0 im Verzeichnis <em>wp-content\/themes<\/em>. Wir verwenden f\u00fcr unser Beispiel hier ein Eltern-Theme, das im Verzeichnis <em>wp-content\/themes\/elterntheme<\/em> liegt. Entsprechend muss Du bei den folgenden Beschreibungen <em>elterntheme<\/em> jeweils gegen den Verzeichnisnamen Deines tats\u00e4chlichen Eltern-Themes austauschen.<\/p>\n<figure id=\"attachment_9386\" aria-describedby=\"caption-attachment-9386\" style=\"width: 637px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9386\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/child-theme-ordner-anlegen.jpg\" alt=\"Der Child-Theme-Ordner liegt auf derselben Verzeichnis-Ebene wie das Eltern-Theme\" width=\"637\" height=\"253\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/child-theme-ordner-anlegen.jpg 637w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/child-theme-ordner-anlegen-160x64.jpg 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/child-theme-ordner-anlegen-400x159.jpg 400w\" sizes=\"(max-width: 637px) 100vw, 637px\" \/><figcaption id=\"caption-attachment-9386\" class=\"wp-caption-text\">Der Child-Theme-Ordner liegt auf derselben Verzeichnis-Ebene wie das Eltern-Theme<\/figcaption><\/figure>\n<p>Unter <em>wp-content\/themes<\/em>\u00a0 legst Du nun also auf der gleichen Ebene wie das ausgew\u00e4hlte Eltern-Theme ein neues Verzeichnis an. Wie Du das Verzeichnis benennst, ist egal. Es bietet sich aber zum sp\u00e4teren Verst\u00e4ndnis beipielsweise <em>elterntheme-child<\/em> als Name an.<\/p>\n<h2>2) Child Theme definieren<\/h2>\n<p>In diesem neuen Verzeichnis \u2013 im Beispiel <em>wp-content\/themes\/elterntheme-child<\/em> \u2013 legst Du eine neue Datei namens <em>style.css<\/em> an. Sie muss die folgenden Code-Zeilen beinhalten, damit WordPress erkennt, dass es sich hier um ein Child Theme zum Theme im Verzeichnis wp-<em>content\/themes\/elterntheme<\/em> handelt:<\/p>\n<p><em>\/*<\/em><\/p>\n<p><em>Theme Name: Dein Child Theme<\/em><\/p>\n<p><em>Description: optionale Beschreibung Deines Child Themes<\/em><\/p>\n<p><em>Author: Dein Name<\/em><\/p>\n<p><em>Author URI: <\/em><\/p>\n<p><em>Template: elterntheme<\/em><\/p>\n<p><em>Version: 1.0<\/em><\/p>\n<p><em>Tags: elterntheme<\/em><\/p>\n<p><em>Text Domain: elterntheme-child<\/em><\/p>\n<p><em>*\/<\/em><\/p>\n<figure id=\"attachment_9387\" aria-describedby=\"caption-attachment-9387\" style=\"width: 507px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9387\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/style-css.jpg\" alt=\"Das Child-Theme funktioniert nur, wenn das Eltern-Template korrekt benannt ist.\" width=\"507\" height=\"359\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/style-css.jpg 507w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/style-css-155x110.jpg 155w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/style-css-400x283.jpg 400w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/><figcaption id=\"caption-attachment-9387\" class=\"wp-caption-text\">Das Child-Theme funktioniert nur, wenn das Eltern-Template korrekt benannt ist.<\/figcaption><\/figure>\n<p>Entscheidend ist die Zeile <em>Template<\/em>, denn dort muss der exakte Name des Verzeichnisses eingetragen sein, in dem das ausgew\u00e4hlte Eltern-Theme liegt. In unserem Beispiel also <em>elterntheme<\/em>.<\/p>\n<h2>3) CSS-Formatierungen aus dem Eltern-Theme verkn\u00fcpfen<\/h2>\n<p>Der einzige etwas anspruchsvollere Schritt bei der Erstellung eines Child Themes kommt jetzt: Wir m\u00fcssen die CSS-Definitionen aus dem Eltern-Theme mit dem Child-Theme korrekt verkn\u00fcpfen.<\/p>\n<p>Hierf\u00fcr legst Du im Child-Theme-Verzeichnis eine neue Datei namens <em>functions.php<\/em> an. Diese Datei brauchst Du sp\u00e4ter gegebenenfalls auch f\u00fcr Anpassungen der Funktionalit\u00e4t des Themes, also f\u00fcr Erweiterungs-Code in PHP.<\/p>\n<p>Im Moment ben\u00f6tigst Du die Datei aber f\u00fcr die Einbindung der CSS-Definitionen des Eltern-Themes und das Zusammenf\u00fchren mit dem CSS des Child-Themes in der richtigen Reihenfolge. Wichtig ist dabei, dass zuerst die CSS-Definitionen des Eltern-Themes und dann erst die des Child-Themes geladen werden, damit das Child-Theme wirken kann.<\/p>\n<p>Die <em>functions.php<\/em> beginnt mit <em>&lt;?php<\/em> und endet mit <em>?&gt;<\/em>. Alle weiteren Anweisungen stehen zwischen diesen \u00f6ffnenden und schlie\u00dfenden PHP-Tags.<\/p>\n<p>Im folgenden Code musst Du lediglich <em>elterntheme <\/em>gegen den so genannten \u201ehandle\u201c Deines Eltern-Themes austauschen. Das \u201ehandle\u201c ist nichts anderes als der Name im PHP-Code, den das Eltern-Theme seinen CS-Styles zugewiesen hat.<\/p>\n<p>Oft entspricht der \u201ehandle\u201c dem Verzeichnis-Namen des Eltern-Themes. Falls nicht, suchst Du in der <em>function.php<\/em> des Eltern-Themes nach \u201e <em>wp_enqueue_style\u201c<\/em>. Dort steht dann zum Beispiel:<\/p>\n<p><em>wp_enqueue_style( \u2018twentyfifteen-style\u2018, get_stylesheet_uri() );<\/em><\/p>\n<p>Der \u201ehandle\u201d w\u00e4re in diesem Fall <em>twentyfifteen<\/em>.<\/p>\n<figure id=\"attachment_9388\" aria-describedby=\"caption-attachment-9388\" style=\"width: 699px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9388\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/eltern-theme-handle.jpg\" alt=\"Mit der Suchfunktion des Text-Editors ist der richtige \u201ehandle\u201c schnell gefunden.\" width=\"699\" height=\"381\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/eltern-theme-handle.jpg 699w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/eltern-theme-handle-160x87.jpg 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/eltern-theme-handle-400x218.jpg 400w\" sizes=\"(max-width: 699px) 100vw, 699px\" \/><figcaption id=\"caption-attachment-9388\" class=\"wp-caption-text\">Mit der Suchfunktion des Text-Editors ist der richtige \u201ehandle\u201c schnell gefunden.<\/figcaption><\/figure>\n<p>Achte beim Code der <em>functions.php<\/em> auf exakte Schreibweise und darauf, dass innerhalb der einfachen Anf\u00fchrungszeichen keine Leerzeichen vorkommen. Das sind die h\u00e4ufigsten Fehlerquellen.<\/p>\n<p><em>&lt;?php<\/em><\/p>\n<p><em>function elterntheme_child_styles() {<\/em><\/p>\n<p><em>wp_deregister_style(\u201aelterntheme-style\u2018);<\/em><\/p>\n<p><em>wp_register_style(\u2018elterntheme-style\u2019, get_template_directory_uri(). \u2018\/style.css\u2019);<\/em><\/p>\n<p><em>wp_enqueue_style(\u2018elterntheme-style\u2019, get_template_directory_uri(). \u2018\/style.css\u2019);<\/em><\/p>\n<p><em>wp_enqueue_style(\u2018childtheme-style\u2019, get_stylesheet_directory_uri().\u2019\/style.css\u2019, array(\u2018elterntheme-style\u2019) );<\/em><\/p>\n<p><em>}<\/em><\/p>\n<p><em>add_action( \u2018wp_enqueue_scripts\u2019, \u2018elterntheme_child_styles\u2019 );<\/em><\/p>\n<p><em>?&gt;<\/em><\/p>\n<figure id=\"attachment_9389\" aria-describedby=\"caption-attachment-9389\" style=\"width: 655px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9389\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/functions-php.jpg\" alt=\"Die richtige Integration der CSS-Styles aus dem Eltern-Theme ist der einige etwas kompliziertere Teil beim Anlegen eines Child-Themes.\" width=\"655\" height=\"439\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/functions-php.jpg 655w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/functions-php-160x107.jpg 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/functions-php-400x268.jpg 400w\" sizes=\"(max-width: 655px) 100vw, 655px\" \/><figcaption id=\"caption-attachment-9389\" class=\"wp-caption-text\">Die richtige Integration der CSS-Styles aus dem Eltern-Theme ist der einige etwas kompliziertere Teil beim Anlegen eines Child-Themes.<\/figcaption><\/figure>\n<p>Damit alles korrekt abl\u00e4uft, melden die aufgef\u00fchrten Code-Zeilen zun\u00e4chst die CSS-Definitionen des Eltern-Themes bei WordPress ab, um sie dann im Anschluss zusammen mit dem Child-Theme-CSS wieder in der richtigen Reihenfolge anzumelden. Zus\u00e4tzlich deckt dieser Code in den meisten F\u00e4llen die Situation ab, dass manche Eltern-Themes die CSS-Definitionen auf mehr Dateien als nur die <em>style.css<\/em> aufteilen.<\/p>\n<p>\u00dcbrigens: Die fr\u00fcher verwendete Methode, die CSS-Datei des Eltern-Themes \u00fcber <em>@import<\/em> in der <em>style.css<\/em> zu integrieren, wird von WordPress nicht mehr empfohlen. Sie hat vor allem Performance-Nachteile.<\/p>\n<h2>4) Child-Theme aktivieren<\/h2>\n<p>Jetzt ist das Child-Theme grunds\u00e4tzlich einsatzf\u00e4hig, daher aktivieren wir es in der Admin-Oberfl\u00e4che im Men\u00fcpunkt <em>Design \u2013 Themes<\/em>.<\/p>\n<figure id=\"attachment_9390\" aria-describedby=\"caption-attachment-9390\" style=\"width: 728px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9390\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/theme-aktivieren.jpg\" alt=\"Ein Klick gen\u00fcgt und Dein neues Child-Theme ist aktiv.\" width=\"728\" height=\"353\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/theme-aktivieren.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/theme-aktivieren-160x78.jpg 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/theme-aktivieren-400x194.jpg 400w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><figcaption id=\"caption-attachment-9390\" class=\"wp-caption-text\">Ein Klick gen\u00fcgt und Dein neues Child-Theme ist aktiv.<\/figcaption><\/figure>\n<p>Es \u00e4ndert sich nun erst einmal gar nichts, jedenfalls nichts Sichtbares, denn noch hast Du ja keine \u00c4nderungen im Child-Theme vorgenommen. Um zu sehen, ob Du erfolgreich warst, \u00f6ffne die <em>style.css<\/em> und f\u00fcge dort eine neue Formatierung ein, beispielsweise:<\/p>\n<p><em>body { color: blue; }<\/em><\/p>\n<p>Nach Speichern der ver\u00e4nderten <em>style.css<\/em> am Server sollte nun der Flie\u00dftext auf Deiner Website in blau erscheinen.<\/p>\n<figure id=\"attachment_9391\" aria-describedby=\"caption-attachment-9391\" style=\"width: 728px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9391\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/chrome-entwicklertools.jpg\" alt=\"Analyse-Werkzeuge wie die Entwicklertools in Googles Chrome-Browser helfen bei der Fehlersuche.\" width=\"728\" height=\"401\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/chrome-entwicklertools.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/chrome-entwicklertools-160x88.jpg 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/chrome-entwicklertools-400x220.jpg 400w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><figcaption id=\"caption-attachment-9391\" class=\"wp-caption-text\">Analyse-Werkzeuge wie die Entwicklertools in Googles Chrome-Browser helfen bei der Fehlersuche.<\/figcaption><\/figure>\n<p>Zur Fehlersuche kannst Du beispielsweise die Entwickler-Tools des Chrome-Browsers oder die Firebug-Extension f\u00fcr Firefox verwenden. Aber wenn Du Dich mit Design-\u00c4nderungen besch\u00e4ftigst, dann kennst Du das wahrscheinlich ohnehin schon.<\/p>\n<p>Falls Du in WordPress mit eigenen Men\u00fcs arbeitest, gibt es nach Aktivierung eines Child-Themes manchmal Probleme. Die behebst Du ganz einfach, wenn Du unter <em>Design \u2013 Men\u00fcs<\/em> das jeweilige Men\u00fc ausw\u00e4hlst und einmal auf <em>Men\u00fc speichern<\/em> klickst.<\/p>\n<figure id=\"attachment_9392\" aria-describedby=\"caption-attachment-9392\" style=\"width: 728px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9392\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/menue-neu-speichern.jpg\" alt=\"Sofern vorhanden, solltest Du individuelle Men\u00fcs nach Aktivierung des Child Themes einmal neu speichern.\" width=\"728\" height=\"314\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/menue-neu-speichern.jpg 728w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/menue-neu-speichern-160x69.jpg 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/menue-neu-speichern-400x173.jpg 400w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><figcaption id=\"caption-attachment-9392\" class=\"wp-caption-text\">Sofern vorhanden, solltest Du individuelle Men\u00fcs nach Aktivierung des Child Themes einmal neu speichern.<\/figcaption><\/figure>\n<h2>5) Systematik von Child-Themes<\/h2>\n<p>Die beiden Dateien <em>style.css<\/em> und <em>functions.php<\/em> haben in Child-Themes eine Sonderstellung: Die Eintr\u00e4ge dort l\u00e4dt WordPress zus\u00e4tzlich zu den \u00e4quivalenten Dateien des Eltern-Themes.<\/p>\n<p>Die Eltern-<em>styles.css<\/em> wird allerdings nur dann benutzt, wenn Du sie explizit einschlie\u00dft. Dann werden zun\u00e4chst alle Formatierungen des Eltern-Themes geladen, danach zus\u00e4tzlich die des Child-Themes. Enth\u00e4lt das Child-Themes also Formatierungen f\u00fcr dieselben Elemente wie das Parent-Theme, werden letztere durch das Child-Theme \u00fcberschrieben.<\/p>\n<p>Bei der <em>functions.php<\/em> l\u00e4dt dagegen immer zuerst die Datei des Child-Themes, danach die des Parent-Themes <em>(Danke an Bernhard f\u00fcr den korrigierenden Hinweis!).<\/em> Funktionen mit gleichem Namen werden vom Parent-Theme also \u00fcberschrieben. Du solltest daher darauf achten, dass die Funktionen in Deinem Child-Theme keine Namen benutzen, die bereits in der <em>functions.php<\/em> des Parent-Themes vorkommen. (F\u00fcr fortgeschrittene Programmierer sei an dieser Stelle nur kurz angemerkt, dass gleichnamige Funktionen im Child-Theme die urspr\u00fcnglichen Funktionen auch komplett ersetzen k\u00f6nnen, beispielsweise indem man sie \u00fcber <em>remove_action()<\/em> beziehungsweise <em>remove_filter()<\/em> von dem Hook l\u00f6st, dem sie zugeordnet sind oder indem man im Child-Theme eine h\u00f6here Priorit\u00e4t festlegt).<\/p>\n<p>Alle anderen Dateien, die Du in Deinem Child-Theme einsetzt, ersetzen die \u00e4quivalenten Dateien des Eltern-Themes komplett. Sie werden anstatt und nicht zus\u00e4tzlich zu den Dateien aus dem Eltern-Theme geladen. WordPress pr\u00fcft also, ob eine entsprechende Datei im Child-Theme vorhanden ist und gibt selbiger gegebenenfalls den Vorzug.<\/p>\n<figure id=\"attachment_9393\" aria-describedby=\"caption-attachment-9393\" style=\"width: 651px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9393\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/child-theme-dateien.jpg\" alt=\"Alle Dateien mit Ausnahme von style.css und functions.php ersetzen die Dateien des Eltern-Themes komplett.\" width=\"651\" height=\"312\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/child-theme-dateien.jpg 651w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/child-theme-dateien-160x77.jpg 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/child-theme-dateien-520x250.jpg 520w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/child-theme-dateien-400x192.jpg 400w\" sizes=\"(max-width: 651px) 100vw, 651px\" \/><figcaption id=\"caption-attachment-9393\" class=\"wp-caption-text\">Alle Dateien mit Ausnahme von style.css und functions.php ersetzen die Dateien des Eltern-Themes komplett.<\/figcaption><\/figure>\n<p>Willst Du beispielsweise im Header-Bereich Deiner Website etwas umgestalten, kopierst Du die <em>header.php<\/em> des Eltern-Themes in Dein Child-Theme und ver\u00e4nderst die Datei im Child-Theme entsprechende Deinen W\u00fcnschen.<\/p>\n<h2>6) Theme-Updates pr\u00fcfen<\/h2>\n<p>Du hast jetzt alle M\u00f6glichkeiten in der Hand, um Gestaltung und Funktionalit\u00e4t Deines WordPress-Themes zu ver\u00e4ndern, ohne das zu Grunde liegende Eltern-Theme anzufassen. Selbiges kannst Du also bedenkenlos aktualisieren, wenn Updates dazu erscheinen.<\/p>\n<p>Aber nat\u00fcrlich entwickelt sich jedes Theme auch weiter, sodass Updates durchaus auch Ver\u00e4nderungen betreffen k\u00f6nnen, die Du im Child-Theme gemacht hast. Ebenso zu bedenken: Dateien aus dem Eltern-Theme, die Du \u00fcbernommen und ver\u00e4ndert hast, k\u00f6nnten Sicherheitsl\u00fccken enthalten, die auch beim Update des Eltern-Themes nicht behoben werden, weil WordPress weiterhin die \u2013 dann veraltete \u2013 Kopie in Deinem Child-Theme verwendet.<\/p>\n<figure id=\"attachment_9394\" aria-describedby=\"caption-attachment-9394\" style=\"width: 567px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9394\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/eltern-theme-pruefen.jpg\" alt=\"Sicherheitshalber vor einem Update pr\u00fcfen: Ver\u00e4nderungen im Eltern-Theme.\" width=\"567\" height=\"350\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/eltern-theme-pruefen.jpg 567w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/eltern-theme-pruefen-160x99.jpg 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/eltern-theme-pruefen-400x247.jpg 400w\" sizes=\"(max-width: 567px) 100vw, 567px\" \/><figcaption id=\"caption-attachment-9394\" class=\"wp-caption-text\">Sicherheitshalber vor einem Update pr\u00fcfen: Ver\u00e4nderungen im Eltern-Theme.<\/figcaption><\/figure>\n<p>Deshalb ist es wichtig, dass Du bei jedem Update des Eltern-Themes in dessen Dokumentation schaust und pr\u00fcfst, was sich dort ver\u00e4ndert hat, um n\u00f6tigenfalls auch Dein Child-Theme anzupassen.<\/p>\n<h2>7) Minimal-Prinzip<\/h2>\n<p>Der wichtigste Tipp f\u00fcr Child-Themes lautet daher: Beschr\u00e4nke Dich bei Ver\u00e4nderungen auf das absolut n\u00f6tige. Je weniger Eltern-Theme-Dateien Du \u00fcbernimmst und je weniger Ver\u00e4nderungen Du am Design vornimmst, desto unwahrscheinlicher sind sp\u00e4tere Konflikte und desto unwahrscheinlicher musst Du bei Theme-Updates Anpassungen vornehmen.<\/p>\n<p>Das geringste Konflikt-Potenzial haben die CSS-Anweisungen in der <em>style.css<\/em>. Wenn Du also mit Anpassungen ausschlie\u00dflich hier auskommst, kannst Du Dir eine umfangreichere Pr\u00fcfung von Theme-Updates sparen.<\/p>\n<h2>8) Theme-Preview erstellen<\/h2>\n<p>Du wirst es bemerkt haben: In der \u00dcbersicht der verf\u00fcgbaren Themes in der WordPress-Admin-Oberfl\u00e4che pr\u00e4sentiert sich Dein Child-Theme ziemlich schmucklos. Willst Du dort ein h\u00fcbsches Bild oder einen Screenshot Deines Themes hinterlegen, ist das ganz einfach.<\/p>\n<figure id=\"attachment_9395\" aria-describedby=\"caption-attachment-9395\" style=\"width: 639px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9395\" src=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/theme-preview.jpg\" alt=\"Das Preview f\u00fcr das Child-Theme zeigt WordPress an, wenn im Theme-Verzeichnis die entsprechende Datei namens screenshot.png vorhanden ist.\" width=\"639\" height=\"268\" srcset=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/theme-preview.jpg 639w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/theme-preview-160x67.jpg 160w, https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/theme-preview-400x168.jpg 400w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><figcaption id=\"caption-attachment-9395\" class=\"wp-caption-text\">Das Preview f\u00fcr das Child-Theme zeigt WordPress an, wenn im Theme-Verzeichnis die entsprechende Datei namens screenshot.png vorhanden ist.<\/figcaption><\/figure>\n<p>Erzeuge einen Screenshot Deines Themes und lege selbigen in der Gr\u00f6\u00dfe 880&#215;660 Pixel mit dem Dateinamen <em>screenshot.png<\/em> im Bildformat PNG ins Stammverzeichnis Deines Child-Themes. WordPress erkennt das automatisch und zeigt Dir nun auch Dein Child-Theme in der \u00dcbersicht optisch ansprechend dar.<\/p>\n<h2>Viel Spa\u00df beim Gestalten!<\/h2>\n<p>Child-Themes werden gerne untersch\u00e4tzt, sind aber ein sehr m\u00e4chtiges und praktisches Feature von WordPress. Du hast damit alle Freiheiten, das Theme anzupassen, ohne das Haupt-Theme zu ver\u00e4ndern. Beachten musst Du lediglich, dass zu viele und zu umfassende Ver\u00e4nderungen irgendwann dennoch zu Konflikten f\u00fchren werden. In solchen F\u00e4llen kann es sinnvoll sein, lieber gleich zu einem anderen Theme zu wechseln, das schon in seiner Grundstruktur besser zu Deinen Anforderungen passt. F\u00fcr kleinere Design-Anpassungen sind Child-Themes dagegen sehr unkompliziert und sicher.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wolltest Du schon immer ein paar individuelle Design-Anpassungen in Deinem WordPress-Theme machen, aber die Original-Dateien nicht ver\u00e4ndern? Mit dem m\u00e4chtigen WordPress-Feature \u201eChild Themes\u201c und Grundkenntnissen in HTML und CSS ist das nicht schwierig.<\/p>\n","protected":false},"author":20,"featured_media":9413,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,490],"tags":[55],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Child-Themes: individuelles Wordpress-Design ganz einfach<\/title>\n<meta name=\"description\" content=\"Schritt f\u00fcr Schritt: So passt Du mit &quot;Child Themes&quot; in Wordpress Dein Blog-Design individuell an, ohne das Theme zu ver\u00e4ndern.\" \/>\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=\"Child-Themes: individuelles Wordpress-Design ganz einfach\" \/>\n<meta property=\"og:description\" content=\"Schritt f\u00fcr Schritt: So passt Du mit &quot;Child Themes&quot; in Wordpress Dein Blog-Design individuell an, ohne das Theme zu ver\u00e4ndern.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/\" \/>\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=\"2015-11-02T09:20:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-26T09:22:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/STRATO_BLOG_WORDPRESS_728x410.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=\"xxxxxxxx\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:site\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"xxxxxxxx\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 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\/child-themes-individuelles-wordpress-design-ganz-einfach\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/\",\"name\":\"Child-Themes: individuelles Wordpress-Design ganz einfach\",\"isPartOf\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\"},\"datePublished\":\"2015-11-02T09:20:01+00:00\",\"dateModified\":\"2020-08-26T09:22:39+00:00\",\"author\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/7787419a54ecb752a02b96a001a49ba1\"},\"description\":\"Schritt f\u00fcr Schritt: So passt Du mit \\\"Child Themes\\\" in Wordpress Dein Blog-Design individuell an, ohne das Theme zu ver\u00e4ndern.\",\"breadcrumb\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Child-Themes: individuelles WordPress-Design ganz einfach\"}]},{\"@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\/7787419a54ecb752a02b96a001a49ba1\",\"name\":\"xxxxxxxx\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g\",\"caption\":\"xxxxxxxx\"},\"description\":\"Ich bin Franz Neumeier, war jahrelang Chefredakteur bei IT-Zeitschriften wie PC Professionell, Internet Professionell und Internet Magazin. Inzwischen habe ich mich als freier Autor vor allem auf Kreuzfahrt-Themen spezialisiert, betreibe mehrere Websites und schreibe aus diesen Praxiserfahrungen heraus weiterhin auch \u00fcber Webhosting- und Webpublishing-Themen.\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/xxxxxxxx\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Child-Themes: individuelles Wordpress-Design ganz einfach","description":"Schritt f\u00fcr Schritt: So passt Du mit \"Child Themes\" in Wordpress Dein Blog-Design individuell an, ohne das Theme zu ver\u00e4ndern.","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":"Child-Themes: individuelles Wordpress-Design ganz einfach","og_description":"Schritt f\u00fcr Schritt: So passt Du mit \"Child Themes\" in Wordpress Dein Blog-Design individuell an, ohne das Theme zu ver\u00e4ndern.","og_url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/","og_site_name":"STRATO Blog DE Staging","article_publisher":"https:\/\/www.facebook.com\/strato","article_published_time":"2015-11-02T09:20:01+00:00","article_modified_time":"2020-08-26T09:22:39+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2015\/10\/STRATO_BLOG_WORDPRESS_728x410.jpg","type":"image\/jpeg"}],"author":"xxxxxxxx","twitter_card":"summary_large_image","twitter_creator":"@STRATO_AG","twitter_site":"@STRATO_AG","twitter_misc":{"Verfasst von":"xxxxxxxx","Gesch\u00e4tzte Lesezeit":"9 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/","name":"Child-Themes: individuelles Wordpress-Design ganz einfach","isPartOf":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website"},"datePublished":"2015-11-02T09:20:01+00:00","dateModified":"2020-08-26T09:22:39+00:00","author":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/7787419a54ecb752a02b96a001a49ba1"},"description":"Schritt f\u00fcr Schritt: So passt Du mit \"Child Themes\" in Wordpress Dein Blog-Design individuell an, ohne das Theme zu ver\u00e4ndern.","breadcrumb":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/child-themes-individuelles-wordpress-design-ganz-einfach\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Child-Themes: individuelles WordPress-Design ganz einfach"}]},{"@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\/7787419a54ecb752a02b96a001a49ba1","name":"xxxxxxxx","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g","caption":"xxxxxxxx"},"description":"Ich bin Franz Neumeier, war jahrelang Chefredakteur bei IT-Zeitschriften wie PC Professionell, Internet Professionell und Internet Magazin. Inzwischen habe ich mich als freier Autor vor allem auf Kreuzfahrt-Themen spezialisiert, betreibe mehrere Websites und schreibe aus diesen Praxiserfahrungen heraus weiterhin auch \u00fcber Webhosting- und Webpublishing-Themen.","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/xxxxxxxx\/"}]}},"_links":{"self":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/9384"}],"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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/comments?post=9384"}],"version-history":[{"count":10,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/9384\/revisions"}],"predecessor-version":[{"id":86040,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/9384\/revisions\/86040"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media\/9413"}],"wp:attachment":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media?parent=9384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/categories?post=9384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/tags?post=9384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}