Support » Allgemeine Fragen » Childtheme-Erstellung

  • Ich habe vor Kurzem damit gekämpft, ein Childtheme zu erstellen und dabei die bisherigen Änderungen zu übernehmen und… und… Je länger ich suchte, desto mehr unterschiedliche Anleitungen fand ich, so dass ich am Ende beim Child Theme Configurator gelandet bin. So weit, so gut.

    Nun hat mir WordPress eine eMail geschrieben (erstaunlich!), dass es auf meiner Seite einen „fatalen Fehler“ gäbe, verursacht „durch ein Plugin oder Theme“. Der mitgeschickte Link bezieht sich auf einen Childtheme-Bastelrest, den ich noch nicht gelöscht habe.

    Beim Basteln habe ich sogar meine Katzen angebrüllt und jemanden am Telefon ärgerlich abgewürgt – aber jetzt bin ich wieder ganz ruhig, weil der Configurator gemacht hat, was er verspracht. Aber es interessiert mich dennoch, welchen „fatalen Fehler“ ich da gemacht habe…

    Die Fehlermeldung lautet: Ein Fehler vom Typ E_PARSE wurde in der Zeile 15 der Datei […]/wp-content/themes/twentyfifteen_schaubar/functions.php verursacht. Fehlermeldung: syntax error, unexpected ‚add_action‘ (T_STRING)####
    In der Datei functions.php gibt es gar keine Zeile 15, es sind nur elf Zeilen:

    <?php
    /**
    * Child theme stylesheet einbinden in Abhängigkeit vom Original-Stylesheet
    */
    
    function twentyfifteen_schaubar_styles() {
        wp_enqueue_style( 'twentyfifteen-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'twentyfifteen_schaubar-style', get_stylesheet_directory_uri() .'/style.css' , array('twentyfifteen-style'));
    }
    add_action( 'wp_enqueue_scripts', 'twentyfifteen_schaubar_styles' );
    ?>

    Hätte ich doch child und parent verwenden müssen statt der konkreten Namen? Oder Bindestrich statt Unterstrich? Oder ist das Theme Twenty Fifteen besonders problematisch?

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

Ansicht von 1 Antwort (von insgesamt 1)
  • Für gestalterische Anpassungen reicht oft ein eigenes Stylsheet, wobei du im Customizer unter Zusätzliches CSS eigene Regeln eintragen kannst, die das Stylesheet deines Themes überschreiben. Wenn du darüber hinaus aber Änderungswünsche hast, z.B. weil du die Reihenfolge von HTML-Elementen ändern oder etwas hinzufügen oder entfernen möchtest, macht aber ein Child Theme durchaus Sinn. Wenn du selber programmierst, kannst du WordPres noch viel flexibler nutzen.

    Ein Child Theme zu erstellen ist eigentlich eine Sache von wenigen Minuten und erfordert keine zusätzlichen Plugins. Ein gescheiter Programmiereditor (z.B. Atom Editor, Visual Studio Code oder Notepad++, alle kostenlos erhältlich) ist aber sinnvoll, weil du Programmierfehler bereits im Editor angezeigt bekommst.
    Änderungen direkt in der öffentlich zugänglichen Website sollten eigentlich tabu sein, weil Programmierfehler fast unvermeidbar sind und dann direkt für alle Webseitenbesucher angezeigt werden – das sieht dann mindestens unprofessionell aus, im schlechteren Fall bietest du Angreifern aber auch gleich noch eine Sicherheitslücke, um deine hübsche Website in eine Spam-Zentrale zu verwandeln. Deshlab solltest du Entwicklung immer auf einer lokalen Entwicklungsumgebung durchführen: z.B. Local by Flywheel für den Mac, Bitnami für Windows.

    Ein Child-Theme erstellst du so:

    1. Du erstellst im Verzeichnis wp-content/themes deiner (lokalen?) WordPress-Installation ein neues Verzeichnis nach dem Muster parenttheme-child – für Twenty Fifteen also twentyfifteen-child (im Grund kannst du den Verzeichnisnamen frei wählen, er sollte aber mit dem künftigen Theme-Namen übereinstimmen und die Verwendung von -child erinnert dich daran, dass es sich um ein Child Theme handelt.)
    2. Du erstellst in diesem Theme ein Stylesheet style.css mit einem Theme-Header, also einem Kommentar mit Angaben über das Theme:
      /*
       Theme Name:   Twenty Fifteen Child
       Description:  Twenty Fifteen Child Theme
       Author:       katharina0815
       Author URI:   http://katharina0815.de
       Template:     twentyfifteen
       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:  twentyfifteenchild
      */
    3. Du erstellst eine Datei functions.php, in der die Funktionen deines Child-Themes gesammelt werden. Da kopierst du folgenden Code rein:
      <?php
      add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
      function my_theme_enqueue_styles() {
       
          $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
       
          wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
          wp_enqueue_style( 'child-style',
              get_stylesheet_directory_uri() . '/style.css',
              array( $parent_style ),
              wp_get_theme()->get('Version')
          );
      }

    Das war’s dann auch schon – du solltest jetzt in der Lage sein, im WordPress-Backendmenü Themes das neue Theme zu aktivieren und im Front End sollte zunächst alles genauso aussehen, wie bei Aktivierung des Parent Themes. (Deine Einstellungen im Customizer werden nicht übertragen. Dazu kannst du bei Bedarf das Plugins Customizer Export/Import verwenden.)

    Nun ist der Sinn des Child Themes nicht, dass alles genauso aussieht. Wenn du z.B. vorhast, den Footer zu löschen, weil dich die Zeile „Stolz präsentiert von WordPress“ stört und du auch keine Copyright-Angaben machen möchtest (das soll nur ein Beispiel sein!), kopierst du die Datei wp-content/themes/twentyfifteen/footer.php in das Verzeichnis wp-content/themes/twentyfifteen-child/ und änderst sie nach deinen Wünschen ab, z.B.

    <?php
    /**
     * The template for displaying the footer
     *
     * Contains the closing of the "site-content" div and all content after.
     *
     * @package WordPress
     * @subpackage Twenty_Fifteen
     * @since Twenty Fifteen 1.0
     */
    ?>
    
    	</div><!-- .site-content -->
    
    <!-- Footer gelöscht -->
    
    </div><!-- .site -->
    
    <?php wp_footer(); ?>
    
    </body>
    </html>

    Kleiner Aufwand, viel Wirkung!

    Wenn du das alles nochmal nachlesen möchtest, gibt es auch im Theme Developer Handbook ein eigenes Kapitel für Child-Themes:

    Home

    An deinem kopierten Code konnte ich bis auf das überflüssige, schließende PHP-Tag ?> nichts falsches finden. Vielleicht bezieht sich die E-Mail auf eine ältere Version?

    Ach, und bitte nicht mehr die Katzen anschreien. 😻
    Manchmal hilft aber ein Spaziergang um den Block.

Ansicht von 1 Antwort (von insgesamt 1)
  • Das Thema „Childtheme-Erstellung“ ist für neue Antworten geschlossen.