Support » Allgemeine Fragen » CSS Daten in Child Theme einfügen

  • Hallo zusammen,

    ich habe eine Frage zur Nutzung eines Child Themes. Das Parent Theme, das ich für mein Projekt nutze, bietet die Option eines Blanko-Child Themes zum Download an. Sehr praktisch. In dem Blanko Theme Ordner, der nun auf meinem Rechner liegt sind eine CSS-style Datei vorhanden, eine function.php und der übliche Screenshot. Jetzt muss man bei WordPress nur noch ein neues Theme anlegen, den ZIP-Ordner hochladen und aktivieren.

    Nun weiß ich aber nicht, ob ich VOR dem Aktivieren bei WordPress die CSS Daten aus dem Parent Theme im ORDNER auf meinem Rechner kopieren, im Ordner des Childthemes ablegen und dann erst noch hochladen und aktivieren muss oder ob ich das nach dem Aktivieren des Blanko-Themes im Editor-Bereich bei WordPress machen muss. Wo gebe ich die zu bearbeitenden CSS Daten ein..?! Und, kann ich die einfach kopieren??

    Ich freue mich über euren Support!

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • du lädst das fertige Child Theme in den wp-content/themes/ Ordner

    aktivierst es und der Child Theme Ordner hat sicher eine style.css und in diese schreibst du deine Änderungen hinein.

    Es ist nicht nötig die style.css des Parent Themes irgndwohin zu kopieren.

    Hier eine etwas umständliche und ausschweifende Erklärung, die aber vielleicht die Zusammenhänge besser erklärt:

    Am besten lassen sich Child Themes verstehen, wenn man sie als Ergänzung des eigentlichen Themes sieht. Grundsätzlich kann ein Child Theme ganz ohne Templates auskommen (würde dann aber vermutlich wenig Sinn machen), aber jedes Template das man dem Child-Theme hinzufügt, ersetzt das Template des Parent Themes.

    Beim Stylesheet ist es ein wenig anders. Zum einen enthält die style.css Angaben über das Theme (den so genannten Theme Header), zum anderen hat man früher™ in diesem Child Theme mit einer @import-Regel das Stylesheet des Parent-Theme geladen und dieses dann durch weitere, eigene Regeln ergänzt bzw. geändert:

    /*
    Theme Name:     Yoko Child
    Theme URI:      http: //deinedomain.de/
    Description:    Child Theme for the Yoko theme
    Author:         Dein Name
    Author URI:     http: //deinedomain.de/
    Template:       yoko
    Version:        1.0
    */
    
    @import url("../yoko/style.css");
    
    /* ab hier eigene Style-Regeln */

    Dabei gilt: später geladene CSS-Regeln (z.B. aus dem Child Theme) überschreiben früher geladene CSS-Regeln (aus dem Parent Theme) und spezifischere Regeln (z.B. body ul li a { color: red; }) überschreiben allgemeinere (z.B. body { color: blue; }) .

    Neuerdings macht man das etwas anders, in dem man in der functions.php eine Funktion hinzufügt, die das CSS des Parent Themes lädt. Das Ergebnis ist eine bessere Performance.

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
    }

    Wenn dein Theme ein Blanko Child-Theme enthält, hat der Entwickler diese Programmierung bereits vorgenommen. Das bedeutet für dich, dass du dir lediglich darüber Gedanken machen musst, was denn nun eigentlich in deinem Child Theme anders sein soll. Deine ergänzenden CSS-Regeln kannst du dann direkt in die style.css deines Child Themes schreiben. Wenn ein bestimmtes Template anders aussehen soll, kannst du das in dein Child-Theme kopieren und dann nach Herzenslust ändern.
    Kniffelig wird es nur, wenn du auch Funktionen des Parent Theme ändern möchtest, da man nicht einfach die functions.php des Parent Theme kopieren kann. Das liegt daran, dass Funktionen eindeutig benannt sein müssen – ein und denselben Namen im Parent und Child Theme zu verwenden geht schon mal nicht. Dafür gibt es aber die Hooks, also Schnittstellen für Funktionen. Ist eine Funktion mit add_action() an einen bestimmten Hook gebunden, kann man sie im Child Theme mit remove_action() wieder „entkoppeln“ und anschließend eine eigene Funktion (mit einem anderen Namen) wieder „anhängen“. Du merkst schon – das ist dann nicht ganz so trivial.

    Wenn ich Websites erstelle und solche Änderungen habe, probiere ich sie erst einmal auf einem lokalen Webserver auf meinen eigenen Computer aus. Das erspart Anrufe von irritierten Kunden. 🙂

    Das komplette Child Theme-Verzeichnis kann, wenn auf dem eigenen PC alles hübsch ist, entweder per FTP übertragen werden, oder man komprimiert es und nutzt den eingebauten Mechanismus von WordPress, um das Theme zu installieren. (Aktivieren nicht vergessen!)

    Thread-Ersteller efraims.tochter

    (@efraimstochter)

    Wow, herzlichen Dank für die ausführliche Info. Das hat mir sehr weitergeholfen!

    Dennoch drei letzte Fragen:

    1. Muss / Kann ich den Theme Header des Child Themes umbenennen, da er ja ursprünglich vom Entwickler angeboten wurde, aber durch meine Veränderungen individuell wird?!

    2. Die von dir beschriebenen „Templates“ sind die einzelnen .php Dateien, die in meinem Parent Theme-Ordner liegen, oder? Also, footer.php, header.php, usw. > Die kopiere ich nach Bedarf in mein Child Theme und verändere sie mit dem Text-Editor?

    3. Arbeitet man überhaupt nicht mit der Editor-Funktion im Dashbord von WordPress? Also, legt man quasi alles im Verzeichnis an und läd es dann hoch? Ich habe bisher immer diese Editor-Funktion genutzt und fand es sehr praktisch, da man gleich schrittweise die Veränderungen sehen konnte.

    Merci.

    1. Klar, du kannst dein Child-Theme auch „Pippi Langstrumpf“ nennen. So lange es auf das Eltern-Theme verweist (Template: twentyfifteen) ist alles prima. Der Übersichtlichkeit halber solltest du auch das Verzeichnis entsprechend umbenennen.
    2. Genau so. (Microsoft Word ist kein Text Editor, WordPad auch nicht. Aber mit einem Programmier-tauglichen Editor solltest du kein Problem haben.)
    3. Der eingebaute Editor ist ein absolut zuverlässiges Werkzeug … wenn man sich gerne seine Website zerschießen möchte. Im Ernst: ein Programmierfehler reicht und du kannst deine Website weder im Front- noch im Back End erreichen sondern siehst nur einen leeren Bildschirm. Viele Web Entwickler stellen für ihre Kunden deshalb diesen Editor ab, in dem sie folgendes in der wp-config.php hinzufügen:
      define( 'DISALLOW_FILE_EDIT', true );

    De rien.

    Thread-Ersteller efraims.tochter

    (@efraimstochter)

    Sehr gut.
    Herrlichen herzlichen Dank. Wird gleich ausprobiert!

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „CSS Daten in Child Theme einfügen“ ist für neue Antworten geschlossen.