Support » Installation » Child Theme installieren

  • Hallo zusammen,

    ich weiß, dass Ihr nicht für gekaufte Themes zuständig seid. Hier geht es aber um ein WP-Thema, nämlich wie kann ich ein Child Theme meines Themes installieren/kreieren?

    Ich habe es mit der englischen WP-Anleitung probiert, da ich aber nicht soo fit in WP und in Englisch bin, bin ich da irgendwo steckengeblieben.

    Ich habe einen Unterordner in meinem Theme-Verzeichnis (IMPREZA) erstellt mit dem Namen ‚IMPREZA Child‘. Soweit alles gut. Dann habe ich das stylesheet vom Parent Theme kopiert und verändert in ‚… child‘. Sonst habe ich einfach alles vom parent theme stehengelassen. Diese .txt-Datei habe ich in den Child-Ordner geladen.
    Den Rest der Erklärungen habe ich ehrlich gesagt nicht mehr richtig verstanden. Und ob ich das Child stylesheet richtig gemacht habe, weiß ich auch nicht so genau.
    Freue mich über eine einfache Anleitung, wie ich doch noch zum Erfolg kommen kann. Tausend Dank schon mal im Vorfeld!

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Thread-Ersteller tuulic

    (@tuulic)

    Ich habe jetzt einfach aus dem ftp-Verzeichnis meiner anderen IMPREZA-Webseite das ‚Child Theme‘-zip in den entsprechenden Ordner der neuen Seite kopiert, jetzt ist das Child Theme bei meinen Themes aufgeführt und ließ sich aktivieren. Ich hoffe, das war’s???

    Habe dabei übrigens gesehen, dass der Child-Ordner im selben Verzeichnis ist wie der Parent-Ordner, nicht im Unterverzeichnis des Parent-Theme-Ordners. Das hatte ich falsch vorher.

    Hoffe, dass es jetzt so funktioniert??? Lizenz hat ja nix damit zu tun, oder? Die sind ja unterschiedlich. Woran merke ich, wenn es doch nicht funktioniert?

    • Diese Antwort wurde geändert vor 2 Wochen, 2 Tage von tuulic.

    Hallo,
    zu dem Thema findest du aber tatsächlich auch viele deutschsprachige Erklärungen, z. B. hier oder hier.
    Auch entsprechende Youtube-Videos kannst du dir zu dem Thema ansehen, z. B. hier.
    Die von dir angesprochene Vorgehensweise („Dann habe ich das stylesheet vom Parent Theme kopiert und verändert in ‚… child‘. Sonst habe ich einfach alles vom parent theme stehengelassen. Diese .txt-Datei habe ich in den Child-Ordner geladen.“) ist leider nicht korrekt, weil die style.css eine CSS-Datei ist. Mit einer .txt-Datei klappt das definitiv nicht. Man schreibt nur die geänderten oder ergänzten CSS-Regeln in die style.css.
    Viele Grüße
    Hans-Gerd

    Hoffe, dass es jetzt so funktioniert??? Lizenz hat ja nix damit zu tun, oder? Die sind ja unterschiedlich. Woran merke ich, wenn es doch nicht funktioniert?

    Wenn du das Child-Theme aktivieren kannst, dann ist das Child-Theme zumindest funktionstüchtig.
    Vielleicht erklärst du uns, warum du ein Child Theme erstellen willst.

    Erst einmal solltest du überlegen, ob du wirklich ein Child Theme benötigst. In vielen Tutorials steht, dass du eine Funktion „in der functions.php deines Child Themes einfügen“ sollst, womit aber nur verhindert werden soll, dass dieser Eintrag durch das nächste Update des (Parent-)Theme wieder überschrieben wird. Es geht aber einfacher (und übersichtlicher), indem du das Plugin Code Snippets verwendest und die Funktion als neues Snippet hinzufügst.
    Oft möchten Benutzer/-innen auch irgendwelche kleinen kosmetischen Anpassungen am Layout des Theme vornehmen und haben sogar schon eine eigene CSS-Regel erstellt. Hier reicht es bereits, wenn du diese CSS-Regel im Customizer unter „Zusätzliches CSS“ einfügst.
    Nur wenn du tatsächlich das HTML-Gerüst der Website ändern möchtest und die Gestaltung sich nicht mit CSS-Regeln alleine umsetzen lässt, sind Child-Themes notwendig.

    Ein Child-Theme ist eine Ergänzung eines bereits vorhandenen und installierten WordPress-Themes. Es ist also nicht Sinn der Sache, alle CSS-Regel und Templates in ein Child-Theme zu übernehmen.

    Wie legst du nun also ein Child-Theme an?

    Nehmen wir an, du hast das Theme „Wunderbar“ installiert und das Verzeichnis mit den Templates liegt in wp-content/themes/wunderbar. Nun legst du ein neues Verzeichnis an, dass du als wp-content/themes/wunderbar-child speicherst. In diesem Verzeichnis legst du (und nur das ist unbedingt notwendig) eine Datei style.css an, die den Template-Header enthält. Der kann sinngemäß so aussehen:

    /*
     Theme Name:   Wunderbar Child
     Description:  Meine Ergänzungen zu Wunderbar
     Author:       @tuulic
     Author URI:   https://tuulic.de
     Template:     wunderbar
     Version:      1.0.0
     License:      GNU General Public License v2 or later
     License URI:  http://www.gnu.org/licenses/gpl-2.0.html
     Text Domain:  wunderbarchild
    */

    Theme Name ist der Name des Child-Themes, während Template das Verzeichnis des Parent Theme (ohne wp-content/themes) angibt. Alle anderen Angaben sind optional und es bleibt dir überlassen, welche Romane du als Beschreibung einfügst. Wie gesagt: du packst das alles an den Anfang der Datei style.css, auch wenn das mit CSS-Regeln herzlich wenig zu tun hat.

    Du kannst jetzt schon das Child-Theme im WordPress-Backend aktivieren (dass es noch keinen Screenshot gibt, ist OK). Im Frontend wird dir aber auffallen, dass das Stylesheet des Parent Theme nicht mehr (oder vielmehr noch nicht) eingebunden ist.

    Im nächsten Schritt erstellst du deshalb im Child-Theme-Verzeichnis eine Datei functions.php (Achtung: Plural, „s“ am Ende von functions) und fügst folgende Zeilen ein, damit sowohl das Stylesheet des Parent Theme als auch die style.css des Child Theme verwendet wird:

    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
        $parenthandle = 'parent-style'; // CSS vom Parent Theme
        $theme = wp_get_theme();
        wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
            array(),  // if the parent theme code has a dependency, copy it to here
            $theme->parent()->get('Version')
        );
        wp_enqueue_style( 'child-style', get_stylesheet_uri(),
            array( $parenthandle )
        );
    }

    Du kannst zum Ausprobieren ein paar eigene CSS-Regeln in der style.css des Child Theme einfügen, sinngemäß sowas wie

    body { color: maroon; background: blanchedalmond; }

    WordPress erkennt nun, dass zwei Stylesheets eingebunden werden müssen und da das Child-Theme das Stylesheet des Parent Theme ergänzt, überschreiben alle CSS-Regeln von wp-content/themes/wunderbar-child/style.css Regeln zu gleichnamigen Selektoren von wp-content/themes/wunderbar/style.css (dem Stylesheet des Parent Theme).

    Jetzt nehmen wir an, du möchtest den Footer des Parent Theme ändern. Dazu kopierst du aus dem Parent Theme das Template wp-content/themes/wunderbar/footer.php in das Verzeichnis deines Child Themes. Hier kannst du nun Änderungen vornehmen und egal, wie oft das Parent Theme aktualisiert wird, bleiben dir diese Änderungen erhalten. Machst du aus

    <div class="powered-by">
    <?php
    printf(
      /* translators: %s: WordPress. */
      esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
      '<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
    );
    ?>
    </div><!-- .powered-by -->

    zum Beispiel

    <div class="powered-by">
    WordPress finde ich toll
    </div><!-- .powered-by -->

    bekommst du im Frontend eine andere Botschaft als „Stolz präsentiert von WordPress“.

    Kniffeliger wird es bei Themes, die viele Funktionen verwenden, weil du Funktionsnamen nicht mehrfach verwenden kannst. Gleiche Funktionsnamen in Child- und Parent Theme würden sogar zu einem „fatalen Programmierfehler“ führen und deine Website mal eben außer Betrieb nehmen. (Deshalb solltest du bei Änderungen immer noch die Möglichkeit haben, Code per FTP-Zugriff zu ändern!).
    Meistens werden Funktionen in Schnittstellen („Hooks“) eingebunden, z.B. etwas wie

    
    if( ! function_exists( 'machwasimheader' ) {
      function machwasimheader() {
        echo '<!-- Hello Dolly -->';
      }
    }
    add_action( 'wp_head', 'machwasimheader' );

    über das if-Statment if( ! function_exists( 'machwasimheader' ) { } wird abgefragt, ob du im Child-Theme diesen Funktionsnamen bereits verwendet hast. Du kannst die Funktion dann nach eigenen Wünschen erstellen. Hat dein Theme dieses if-Statement nicht, musst du die Funktion mit
    remove_action( 'wp_head', 'machwasimheader' );
    erst einmal wieder entkoppeln und dann eine eigene Funktion einbinden, sinngemäß sowas wie

    function wunderbarchild() {
        echo '<!-- Hello World -->';
      }
    }
    add_action( 'wp_head', 'wunderbarchild' );

    … aber hier sind wir dann auch schon mitten in den kniffeligen Dingen und wahrscheinlich habe ich es unnötig verkompliziert. Deshalb würde ich empfehlen, dass du erst überlegst, ob du ein Child Theme wirklich brauchst. Wenn ja, kannst du erst einmal ein Template kopieren, irgendwo ein <?php echo "### hello world!"; ?> einfügen und schauen, ob es auf deiner Webseite auftaucht. (Die ### findest du schnell mit der Suchfunktion der Entwickler-Tools deines Browsers.)

    Wenn dann wieder Fragen auftauchen, meldest du dich bitte wieder. 🙂

    Thread-Ersteller tuulic

    (@tuulic)

    Danke Euch beiden für die vielen Infos und die tolle Anleitung!

    Ich habe vor etlichen Jahren, als ich meine erste Website mit WP begann zu gestalten von meiner Anleiterin eingeschärft bekommen, unbedingt ein ChildTheme zu nutzen, damit ich das Parenttheme nicht durch irgendeinen dummen Fehler meinerseits aus Versehen ‚kaputtschieße‘. Deshalb arbeite ich bisher immer mit einem Child Theme.

    Jetzt komme ich tatsächlich ins Grübeln, ob ich es unbedingt brauche…
    Wobei die neue Seite eine Vereinsseite wird, d.h. ich arbeite da andere aus unserem Verein ein, die dann die Seite mitgestalten werden. Sie haben bisher noch nie mit WP gearbeitet.

    • Diese Antwort wurde geändert vor 2 Wochen, 1 Tag von tuulic.

    Deshalb arbeite ich bisher immer mit einem Child Theme.

    Das ist auch ok so, aber Bego hat ja auch sehr schön die Alternative mittels des Plugins Code Snippets beschrieben.
    In dem Fall „rührst“ du das Parent Theme ja auch nicht an. Wahrscheinlich meinte die „Anleiterin“, dass du auf keinen Fall Änderungen unter Design > Theme-Editor machen solltest. Dieser Hinweis ist auch in der Tat wichtig.
    Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:
    Gelöst
    Die Option findest du rechts in der Sidebar. Danke.

    Moderator Bego Mario Garde

    (@pixolin)

    Wobei die neue Seite eine Vereinsseite wird, d.h. ich arbeite da andere aus unserem Verein ein, die dann die Seite mitgestalten werden. Sie haben bisher noch nie mit WP gearbeitet.

    Gerade dann sollte der Verwaltungsaufwand so niedrig wie möglich gehalten werden.

    Child-Themes haben noch einen erheblichen Nachteil, auf den ich gar nicht eingegangen bin. Möchtest du z.B. den Footer deiner Website anders gestalten, wirst du wie beschrieben das Template footer.php in dein Child-Theme kopieren und nach deinen Wünschen anpassen. Nehmen wir jetzt einmal an, das Template enthält eine Funktion, die eine Sicherheitslücke enthält. Der Theme-Entwickler wird darauf hingewiesen, ändert das Template und bietet ein Update des Themes an. Das wird dann zwar in deiner Website geladen, kommt aber nie zum Zug, weil dein vorher kopiertes Template (einschließlich Sicherheitslücke) das korrigierte Template überschreibt.

    Torsten Landsiedel hat das vor Jahren als „Child-Theme-Dilemma“ beschrieben und auch Plugin-Lösungen präsentiert, mit denen nach jedem Update ein Abgleich erfolgen kann. Die Frage ist aber, ob du das dann mit deinen Vereinsmitgliedern durchgehen möchtest und ob sich da jemand gewissenhaft drum kümmern wird. Alleine deshalb würde ich schon, soweit irgendwie möglich auf ein Child-Theme verzichten.

    Thread-Ersteller tuulic

    (@tuulic)

    Hallo nochmal,

    Ihr habt mich überzeugt ohne Child Theme weiterzuarbeiten. Dazu habe ich aber noch eine Frage bezüglich meiner beiden älteren Webseiten. Da arbeite ich ja wie schon geschrieben auch jeweils mit einem Child Theme. Wenn ich das jetzt deaktiviere und dann das Parent Theme aktiviere, ist die Seite dann weiter ganz normal da oder habe ich sie dann ‚geschrottet‘? Ich habe nichts Grundlegendes im Theme Editor des Child Theme verändert.

    Würde mich freuen, wenn Ihr mir da nochmal Auskunft geben würdet.

    Die Vereinsseite werde ich nun also ohne Child Theme nur mit dem Parent Theme gestalten. Scheint ja auf jeden Fall sicherer zu sein – für potentielle NeuWPlerInnen, die ich dann einarbeiten werde…

    Tausend Dank schonmal für Eure tolle Unterstützung!

    Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo,
    „geschrottet“ wäre die Seite dann nicht.
    Ob sich das Design oder die Funktionalität der Seite dann aber ändert, hängt davon ab, was bei dir in der functions.php und der style.css steht.

    Wenn du die functions aus der functions.php einzeln in Code Snippets und die CSS-Regeln aus der style.css unter Design > Customizer > Zusätzliches CSS schreibst, solltest du beim Parent Theme keine Änderungen feststellen.

    Sollte das nicht der Fall sein, kannst du ja wieder das Child Theme aktivieren und prüfen, wo der Fehler liegt.

    Eine vorherige Sicherung ist aber auf jeden Fall empfehlenswert.
    Viele Grüße
    Hans-Gerd

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)