Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Andreas Hecht 25. Februar 2019

WordPress: So baust du dein eigenes Child-Theme

WordPress übt eine gera­de­zu magne­ti­sche Anziehungskraft aus auf Blogger, die die Sache selbst in die Hand neh­men wol­len. Du erhältst die tota­le Kontrolle und es exis­tiert nichts, was du nicht mit eini­gen Zeilen PHP, CSS oder HTML anpas­sen könn­test. Im Netz schwir­ren zudem hun­der­te von klei­nen Funktionen zur Erweiterung des CMS her­um. Die Welt von WordPress könn­te so schön sein, wenn da nicht die Theme-Updates wären. Mit Child-Themes nimmst du ihnen den Schrecken.

Kennst du das Problem? Du instal­lierst ein Theme, passt es nach dei­nen Vorstellungen an und bist zufrie­den und glück­lich damit. Dann jedoch kommt das nächs­te Theme-Update und alle Änderungen sind futsch.

Damit dir das nicht pas­siert, lernst du in die­sem Beitrag, ein Child-Theme zu erstel­len und zu nut­zen.

Was ist ein Child-Theme und wofür benötige ich es?

Ein Child-Theme ist sozu­sa­gen das Kind eines voll­wer­ti­gen, nor­ma­len Themes. Es nutzt die Dateien des Parent (Eltern)-Theme zur Darstellung. Also alle Template-Dateien, das Stylesheet für das Design, die JavaScripte – ein­fach alles. Daher müs­sen auch immer bei­de Themes im Theme-Ordner wp-content/themes vor­han­den sein.

Alle Änderungen bleiben auch nach einem Update erhalten

Ein frisch auf­ge­setz­tes Child-Theme sieht exakt aus wie dein »rich­ti­ges« Theme. Das ist der Ausgangspunkt für jede Personalisierung dei­nes Designs. Denn hier kannst du gefahr­los jed­we­de Änderung vor­neh­men, die­se bleibt dann auch nach einem Update dei­nes eigent­li­chen Themes erhal­ten. Das ist der gro­ße Vorteil.

Der ultimative Guide zu WordPress Child-Themes

Jedes WordPress Theme, das fähig ist, Updates zu bekom­men, soll­te heu­te nur noch mit einem Child-Theme ein­ge­setzt wer­den. Es geht sehr ein­fach und die weni­gen Fallstricke, die auf­tre­ten kön­nen, wer­den wir dir in die­sem Beitrag bei­brin­gen.

Die Vorbereitung für das Erstellen eines Child-Themes

Zur Erstellung eines Kind-Designs benö­tigst du ein FTP-Programm und einen HTML-Editor. Beides bekommst du kos­ten­los. Für die Arbeit mit dem FTP-Programm benö­tigst du zudem noch die FTP-Zugangsdaten für dein Webhosting. Diese Daten stellt dir dein Hoster zur Verfügung.

  • Ich kann dir das FTP-Programm »FileZilla« ans Herz legen, es ist wirk­lich gut und für Windows und Mac kos­ten­frei zu bekom­men.
  • Als HTML-Editor emp­feh­le ich dir das Programm »Brackets«. Es ist eben­falls kos­ten­los und kann mit vie­len Erweiterungen auf dei­ne per­sön­li­chen Bedürfnisse ange­passt wer­den.

Natürlich exis­tie­ren noch wei­te­re, gute HTML-Editoren. Wir haben dazu jeweils eine Liste erstellt mit Programmen für Windows und für Mac.

Child-Themes erstellen und nutzen

Als Beispiel für die Erstellung eines Child-Themes neh­me ich das belieb­te Twenty Fiftteen Standard-Theme von WordPress. Du wirst jetzt ler­nen, ein Child-Design zu erstel­len, ein eige­nes Stylesheet für das CSS zu ver­wen­den und Theme-Dateien anzu­pas­sen. Die Stolpersteine in der Arbeit mit Child-Layouts wer­de ich dir eben­falls nahe brin­gen.

1 – Ein Basis Child-Theme erstellen und aktivieren

Ein Child-Theme benö­tigt nur drei Dinge: das Verzeichnis zum Parent-Theme, eine style.css Datei und eine functions.php.

Erstelle zunächst einen Ordner auf dei­nem Desktop mit dem Namen »twen­ty­fif­te­en-child«. Als Zweites erstel­le bit­te mit dem HTML-Editor eine lee­re Datei namens style.css. Füge fol­gen­des in die CSS-Datei ein:

/*
 Theme Name:   Twenty Fifteen Child
 Description:  Twenty Fifteen Child Theme
 Author:       Dein Name
 Author URI:   http://deinedomain.de
 Template:     twentyfifteen
 Version:      1.0.0
 Text Domain:  twenty-fifteen-child
*/

/* Alle Deine Änderungen fügst Du unterhalb ein */

Mit die­sem Header hast du fol­gen­de Dinge fest­ge­legt:

  • Den Namen dei­nes Themes
  • Die Beschreibung, dass es ein Child Theme des Twenty Fifteen Themes ist
  • Unter Template steht die “Adresse”, die dein Child benö­tigt, um die Template-Dateien anzei­gen zu kön­nen. Es ist der Name des Theme-Ordners des Parent-Themes. Erstellst du ein Child-Theme für ein ande­res Theme, muss dort natür­lich der Ordnername dei­nes Themes hin­ein. Wenn du also für das belieb­te »Hueman« Theme ein Child benö­tigst, wird dort »hue­man« ste­hen.
  • Unter Text Domain fin­det dein Child-Theme die Übersetzungs-Dateien, damit dein Theme wei­ter­hin auf Deutsch ange­zeigt wird.

Lege als Nächstes eine lee­re Datei Namens functions.php an. In die­se Datei muss fol­gen­des zwin­gend hin­ein:

<?php
 /* =============================================================================
 Die functions.php fuer Dein Child-Theme
============================================================================= */
 
 
/**
 * Diese Funktion ist zwingend notwendig. Sie installiert das CSS des Eltern-Themes
 * Das CSS Deines Child-Themes wird ohne Dein Zutun automatisch installiert.
 */ 
add_action( 'wp_enqueue_scripts', 'tb_theme_enqueue_styles' );
function tb_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
/* =============================================================================
Ab hier unterhalb kannst Du Deine Aenderungen einfügen
=============================================================================== */

Optional: Erstelle eine Grafik für dein Theme

Jedes Theme besitzt einen Screenshot, damit man es im Dashboard gut von den ande­ren Themes unter­schei­den kann. Alles, was du dafür tun musst, ist eine Grafik mit dem Namen screenshot.png anle­gen. Diese Grafik kommt dann in den Ordner des Child-Themes hin­ein. Dort muss es im Hauptverzeichnis lie­gen, nicht in einem eige­nen Ordner.

Die emp­foh­le­ne Größe beträgt 880 x 660 Pixel. Angezeigt wird es aller­dings in den Maßen 387 x 290 Pixel. Die gro­ße Dateigröße gewähr­leis­tet jedoch, dass der Screenshot auch auf Retina-Bildschirmen gut dar­ge­stellt wird. Du darfst auch ande­re Bildformate wie JPG oder GIF neh­men, emp­foh­len wird jedoch PNG. Ich habe für das Child-Theme fol­gen­de Grafik erstellt:

Screenshot Twenty Fifteen Child-Theme

Du darfst die­se Grafik gern her­un­ter­la­den und benut­zen.

2 – Child-Theme aktivieren

Lade nun den Ordner twentyfifteen-child in das Theme-Verzeichnis (wp-con­ten­t/the­mes) dei­nes WordPress hoch und akti­vie­re dein neu­es Child-Themes unter “Design => Themes”.

child-theme-aktivieren

Nun ist das neue Child-Theme akti­viert. Dank des neu­en Screenshots lässt es sich sehr leicht in dei­nem Theme-Verzeichnis auf­fin­den. Eine Änderung des Designs ist natür­lich noch nicht ein­ge­tre­ten, dei­ne Anpassungen müs­sen noch fol­gen.

Das Child-Theme direkt nach der Aktivierung, es sind noch keinerlei Änderungen zu sehen.

Das Child-Theme direkt nach der Aktivierung, es sind noch kei­ner­lei Änderungen zu sehen.

3 – Child-Theme anpassen – CSS

Alle Anpassungen schreibst du nun in das style.css dei­nes Child-Themes hin­ein. Einige sehr ein­fa­che Anpassungen wären viel­leicht die Farbe des Hintergrunds, die Farbe, Größe und Schriftart der Überschriften und ähn­li­ches. Mit nur eini­gen weni­gen Zeilen CSS haben wir bereits das Theme kom­plett anders gestal­tet:

/*
 Theme Name:   Twenty Fifteen Child
 Description:  Twenty Fifteen Child Theme
 Author:       Andreas Hecht
 Author URI:   http://techbrain.de
 Template:     twentyfifteen
 Version:      1.0.0
 Text Domain:  twenty-fifteen-child
*/

/* Alle Deine Änderungen fuegst Du unterhalb ein */

body {
    color: #666;
    background: #444;
}

h1.site-title {
    font-size: 38px;
}
h1.site-title a {
    color: #900;
}

#main {
    padding-top: 10px;
}

h2.entry-title {
    font-family: Arial, sans-serif;
    font-size: 38px;
}

h2.entry-title a {
    color: #900;
}
Das leicht modifizierte Child-Theme

Das leicht modi­fi­zier­te Child-Theme hat bereits ein völ­lig ver­än­der­tes Äußeres.

4 – Die Arbeit mit Template-Dateien

Dein neu­es Theme ist kom­plett anpass­bar, du kannst auch eige­ne Templates ver­wen­den oder die Dateien des Parent-Themes über­ar­bei­ten. Denn WordPress über­prüft zuerst den Ordner des Child-Themes nach Template-Dateien. Sind dort kei­ne vor­han­den, wer­den die Dateien des Parent-Themes genutzt.

Das bedeu­tet, dass eine Datei header.php im Child-Theme Ordner ver­wen­det wird, und eben nicht die Datei des Parent-Themes. Möchtest du die Anzeige einer bestimm­ten Datei ändern, kopie­re sie ein­fach aus dem Parent-Theme in dein Child hin­ein. Nun kannst du die Anzeige kom­plett ändern oder bestimm­te Elemente hin­zu­fü­gen.

Zwei Beispiele: Beitragsbilder ändern und statische Share-Buttons

Beispiel 1: Die Anzeige der Beitragsbilder umkehren

Kopiere dir die Datei content.php aus dem Parent- in den Child-Ordner. Der Original-Code der Datei in den Zeilen 14 bis 27 sieht so aus:

<?php
   // Post thumbnail.
   twentyfifteen_post_thumbnail();
?>

<header class="entry-header">
   <?php
   if ( is_single() ) :
      the_title( '<h1 class="entry-title">', '</h1>' );
   else :
      the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
   endif;
   ?>
</header><!-- .entry-header -->

Spaßeshalber keh­ren wir den Code nun ein­mal um und set­zen das Beitragsbild unter­halb der Überschrift ein.

<header class="entry-header">
   <?php
      if ( is_single() ) :
         the_title( '<h1 class="entry-title">', '</h1>' );
      else :
         the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
      endif;
   ?>
</header><!-- .entry-header -->

<?php
   // Post thumbnail.
   twentyfifteen_post_thumbnail();
?>

Natürlich muss unser CSS noch etwas ange­passt wer­den, damit das Endergebnis rich­tig gut aus­sieht.

/*
 Theme Name:   Twenty Fifteen Child
 Description:  Twenty Fifteen Child Theme
 Author:       Andreas Hecht
 Author URI:   http://techbrain.de
 Template:     twentyfifteen
 Version:      1.0.0
 Text Domain:  twenty-fifteen-child
*/

/* Alle Deine Änderungen fuegst Du unterhalb ein */

body {
    color: #666;
    background: #444;
}
h1.site-title {
    font-size: 38px;
}
h1.site-title a {
    color: #900;
}
#main {
    padding-top: 10px;
}
h2.entry-title, h1.entry-title {
    font-family: Arial, sans-serif;
    font-size: 38px;
    padding-top: 20px;
    margin-bottom: 20px;
}
h2.entry-title a{
    color: #900;
}
h1.entry-title {
    color: #444
}

Das Endergebnis im Screenshot:

Das Endergebnis mit der umgekehrten Reihenfolge von Bild und Überschrift.

Das Endergebnis mit der umge­kehr­ten Reihenfolge von Bild und Überschrift.

Beispiel 2: Statische Share-Buttons hinzufügen

Auch die­se Aufgabe erle­di­gen wir mit der content.php Datei. Du musst also kei­ne ande­re Datei in den Child-Ordner legen.

Teil 1: Das Snippet für die functions.php

<?php
// Ab hier kopieren
/**
* Statische Teilen Buttons mit Druck-Button
* Passe noch die URL Deiner Facebook-Seite an. Der zweite Link von unten.
*
*/
function tb_share_buttons() {
?>
<div class="share-container">
<div class="share-buttons">
<a class="facebook social" title="Bei Facebook empfehlen" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Teilen</span></a>
<a class="twitter social" title="Bei Twitter empfehlen" href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span>Twittern</span></a>
<a class="googleplus social" title="Bei Google+ empfehlen" href="https://plusone.google.com/_/+1/confirm?hl=de&url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Google+</span></a>
<a class="fb-like social" href="https://www.facebook.com/TechBrain-552504691587032" target="_blank" rel="nofollow" title="Meine Facebook-Seite Liken"><span>Like</span></a>
<a class="druck social-tooltip" href="javascript:window.print()" title="Beitrag ausdrucken">Drucken</a>
</div>
</div>
<?php }
function tb_fontawesome() {
?>    
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" type='text/css' media='all' />
<?php }
add_action( 'wp_enqueue_scripts', 'tb_fontawesome' );

Die Buttons benö­ti­gen gleich zwei Funktionen. Nummer eins erzeugt die Buttons und Nummer zwei fügt den für die kor­rek­te Anzeige nöti­gen Icon-Font »Font Awesome« dei­nem Header hin­zu.

Teil 2: Das CSS

Damit die Buttons kor­rekt ange­zeigt wer­den, benö­ti­gen wir noch etwas CSS. Je nach Theme muss die Breite der ein­zel­nen Buttons in Zeile neun noch ange­passt wer­den. Für unser Twenty Fifteen Child habe ich es bereits erle­digt.

/* =============================================================================
 STATISCHE SHARE-BUTTONS
============================================================================= */

div.share-buttons.top {margin-top: 0 !important; max-width: 100%; margin-bottom: 15px }
div.share-container {padding-bottom: 20px; border-bottom: 3px solid #eee}
.share-buttons { padding: 10px; margin: 20px 0 0 0; background: #f5f5f5;  max-width: 100%; display: inline-block; overflow: hidden}
.share-buttons a, .share-buttons a:hover { color: #fff !important; text-decoration: none !important; border-bottom: none !important}
.share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.druck, .share-buttons a.fb-like { display: block; width: 112px;  font-size: 16px; font-size: 1rem; padding: 6px 0; text-align: center; opacity: 0.7; filter: alpha(opacity=70); color: #fff; float: left; font-family: Arial, sans-serif;}
.share-buttons a:hover, .share-buttons a:active, .share-buttons a:focus { opacity: 1; filter: alpha(opacity=100); text-decoration: none !important; color: #fff !important; border-bottom: none !important}
.share-buttons a.facebook { background: #3e64ad; }
.share-buttons a.twitter { background: rgb(0, 172, 237); }
.share-buttons a.googleplus { background: #cd3627; }
.share-buttons a.fb-like {background: #4267b2}
.share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.fb-like { margin-right: 5px; }
.share-buttons a.druck { margin-right: 0;}
a.druck{background:#13475e;}
a.druck:before{content:'\f02f';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.facebook:before{content:'\f09a';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.twitter:before{content:'\f099';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.googleplus:before{content:'\f0d5';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.fb-like:before{content:'\f164';font-family:FontAwesome;font-size:16px;padding-right:8px}

Teil 3: Die kor­rek­te Positionierung in der content.php

<?php // unterhalb dieser Zeile kopieren, den Bereich .entry-content austauschen ?>

<div class="entry-content">
<?php
/* translators: %s: Name of current post */
the_content( sprintf(
    __( 'Continue reading %s', 'twentyfifteen' ),
    the_title( '<span class="screen-reader-text">', '</span>', false )
) );
wp_link_pages( array(
    'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
    'after'       => '</div>',
    'link_before' => '<span>',
    'link_after'  => '</span>',
    'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
    'separator'   => '<span class="screen-reader-text">, </span>',
) );
?>
<!-- Die statischen Share-Buttons. Anzeige nur auf single.php -->
<?php if ( is_single() ) : ?>
<?php echo tb_share_buttons(); ?>
<?php endif; ?>
<!-- Ende statische Share-Buttons  -->

</div><!-- .entry-content -->

Die kor­rek­te Position ist noch inner­halb des DIVs .entry-content gleich ober­halb des schlie­ßen­den </div> Tags.

Das Endergebnis unserer Bemühungen:

Wir erhal­ten wun­der­schön for­ma­tier­te Share-Buttons mit dazu pas­sen­den Icons für Facebook, Twitter, Google+, die Facebook-Seite und einen Button, der die Druck-Funktion des Browsers akti­viert.

Die statischen Share-Buttons am Ende eines Artikels.

Die sta­ti­schen Share-Buttons am Ende eines Artikels.

5 – Es wird ernst. Dateien inkludieren

Einer der Fallstricke in der Arbeit mit Child-Themes. Viele unbe­darf­te Anfänger schei­tern an die­ser so ein­fach erschei­nen­den Aufgabe, weil die Snippets aus dem Internet immer für eigen­stän­di­ge Themes gedacht sind. Daher kön­nen sie nicht funk­tio­nie­ren.

Wenn man eine Datei inklu­die­ren möch­te oder muss, bekommt man im Internet zum Beispiel den fol­gen­den Code:

require_once( get_template_directory() . '/my_included_file.php' );

Dieser klei­ne Tag ver­sucht eine Datei aus dem Parent-Theme zu laden. Denn die genutz­ten Templates des Child-Themes lie­gen dort. Da wir mit unse­rem Stylesheet das CSS des Parent-Themes über­schrei­ben, muss statt­des­sen der fol­gen­de Tag genutzt wer­den:

require_once( get_stylesheet_directory() . '/my_included_file.php' );

Der obi­ge Tag sucht sich die benö­tig­te Datei nun aus dem Child-Ordner her­aus. Nutze also stets die get_stylesheet_directory() Variante, dann bekommst du das gewünsch­te Ergebnis.

Prüfe jedes Snippet aus dem Internet, ob es auf die­sen klei­nen Unterschied modi­fi­ziert wer­den muss.

6 – Widget-Bereiche hinzufügen

Auch zusätz­li­che Widget-Bereiche sind pro­blem­los mög­lich. Wir könn­ten zum Beispiel einen Bereich erstel­len, der eigent­lich nicht vor­ge­se­hen ist, Widgets zu beher­ber­gen – der Footer. Füge den fol­gen­den Code in die functions.php dei­nes Child-Themes hin­ein:

<?php
//Ab hier kopieren
function twentyfifteen_child_widgets_init() {
register_sidebar( array(
'name'          => 'Footer Widget',
'id'            => 'footer-widget',
'description' => __( 'Ein zusätzlicher Widget-Bereich im Footer' ),
'before_widget' => '<div class="footer-widget">',
'after_widget'  => '</div>'
) );
}
add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );

Danach kopierst du dir die footer.php aus dem »Twenty Fifteen« Theme Ordner in dei­nen Theme-Ordner hin­ein und fügst vor­her noch die­sen klei­nen Code hin­zu:

<?php if ( is_active_sidebar( 'footer-widget' ) ) :
  dynamic_sidebar( 'footer-widget' );
  endif;
?>

An die­ser Stelle in der footer.php scheint der Code gut auf­ge­ho­ben zu sein:

<?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 id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
<?php if ( is_active_sidebar( 'footer-widget' ) ) :
dynamic_sidebar( 'footer-widget' );
endif;
?>
<?php
/**
 * Fires before the Twenty Fifteen footer text for footer customization.
 *
 * @since Twenty Fifteen 1.0
 */
do_action( 'twentyfifteen_credits' );
?>
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
</footer><!-- .site-footer -->

</div><!-- .site -->

<?php wp_footer(); ?>

</body>
</html>

Das Endergebnis:

Unser zusätzlicher Widget-Bereich im Footer.

Unser zusätz­li­cher Widget-Bereich im Footer.

Child-Theme Download

Das soeben erstell­te Child-Theme für Twenty Fifteen kannst du hier her­un­ter­la­den.

Das Erstellen eines Child-Themes aus einem vorhandenen, modifizierten Theme

Es ist so viel ein­fa­cher, ein Child-Theme von Anfang an zu gestal­ten. Wenn du jedoch bereits ein Theme stark modi­fi­ziert hast, ohne ein Child-Theme zuvor ange­legt zu haben, dann ist auch das mög­lich. Du musst alle Änderungen in das Child-Theme über­tra­gen, um damit sicher­zu­stel­len, dass eine etwai­ge Aktualisierung des Parent-Themes nicht alle Änderungen löscht.

Lies dir die fol­gen­den Schritte genau durch, damit du sie exakt Punkt für Punkt abar­bei­ten kannst. Diese Arbeit ist kom­pli­ziert, schwie­rig und mit viel Fummelei ver­bun­den.

  1. Mache zuerst ein Backup dei­nes Themes. Nutze dazu dei­nen FTP-Zugang und kopie­re dei­nen Theme-Ordner auf dei­nen Desktop. Erstelle von die­sem Ordner noch ein Backup und spei­che­re es an einer ande­ren Stelle. Einen die­ser Ordner wirst du zum Arbeiten nut­zen, der ande­re dient als Backup, falls alles schief läuft.
  2. Erstelle nun ein Child-Theme nach der Anleitung oben. Ein Ordner, ein lee­res Stylesheet, eine lee­re functions.php, und gege­be­nen­falls einen Screenshot.
  3. Besorge dir eine fri­sche, nicht modi­fi­zier­te Version dei­nes Themes.
  4. Teile dei­nen HTML-Editor mit­tig, damit du jeweils links die Original-Datei anzei­gen kannst und rechts die aus dei­nem modi­fi­zier­ten Theme. Prüfe für jede Template-Datei, ob du Änderungen getä­tigt hast.
  5. Übertrage alle Modifizierungen aus der functions.php in die Version dei­nes Child-Themes.
  6. Die geän­der­ten Dateien wan­dern in den Child-Theme-Ordner hin­ein. Prüfe hier­bei noch, ob du get_template_directory() gegen get_stylesheet_directory() tau­schen musst. Siehe wei­ter oben im Artikel.
  7. Nun kommt der Part, der wirk­lich etwas »Tricky« ist. Du musst nun die fri­sche Style.css-Version mit der von dir geän­der­ten Datei ver­glei­chen. Vielleicht hat dein HTML-Editor eine Funktion, die zwei Dateien auf Differenzen ver­glei­chen kann. Das wäre hilf­reich. Ich habe eine sol­che Funktion noch nie benö­tigt. Verfügst du nicht über die­se hilf­rei­che Funktion, dann musst du die Dateien dem Augenschein nach ver­glei­chen. Alle Änderungen wan­dern in eine eige­ne style.css Datei. Diese kommt dann mit allen Modifikationen ver­se­hen in den Child-Theme-Ordner hin­ein.
  8. Nachdem du das Gefühl hast, alle geän­der­ten Theme-Dateien und das erwei­ter­te CSS in den Child-Theme-Ordner gepackt zu haben, lade den Ordner in dein Theme-Verzeichnis wp-content/themes. Achte dar­auf, dass sich die fri­sche Version dei­nes Themes eben­falls im Theme-Verzeichnis befin­det.
  9. Logge Dich in dein WordPress ein und navi­gie­re zu den Themes. Nutze die Live-Vorschau, um dein frisch erstell­tes Child-Theme zu prü­fen. Wenn alles kor­rekt ange­zeigt wird, gut. Wenn nicht, prü­fe, in wel­chen Bereichen du noch etwas über­se­hen haben könn­test.
  10. Arbeite die feh­len­den Punkte ab.
  11. Prüfe erneut die gesam­te Website auf alle nöti­gen Funktionen und auf eine kor­rek­te Anzeige mit der Live-Vorschau. Wenn wirk­lich alles passt, akti­vie­re dein Child-Theme und erfreue dich dar­an.
  12. Mach so einen Scheiß nie wie­der:-)

Fazit

Nun hast du so ziem­lich alle wich­ti­gen Punkte in der Erstellung eines Child-Themes ken­nen­ge­lernt und weißt auch, war­um du immer eines nut­zen soll­test. Alle ande­ren Schwierigkeiten, die sich dir stel­len, musst du wie immer goo­geln. Denn lei­der ist es kaum mög­lich, alles Wissenswerte in einen ein­zi­gen Artikel zu brin­gen, da sich vie­le Probleme erst bei der Entwicklung dei­nes indi­vi­du­el­len Child-Themes zei­gen.

(Das Beitragsbild ent­hält ein Element von Depositphotos. Der Beitrag wur­de erst­mals im Oktober 2016 ver­öf­fent­licht und wird seit­dem regel­mä­ßig aktua­li­siert, zuletzt am 19. Februar 2019.)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

Ein Kommentar

  1. Es geht auch wesent­lich ein­fa­cher, in der Suchmaschine dei­nes Vertrauens nach ‘word­press child the­me gene­ra­tor’ gucken.

    z.B. https://childtheme-generator.com/create-child-theme gene­riert nach ein paar Eingaben das pas­sen­de Theme, das man dann nur noch im WordPress-Backend selbst hoch­la­den kann,

    Oder gleich direkt in WordPress mit dem Plugin https://wordpress.org/plugins/child-theme-generator/ wobei ich per­sön­lich der Ansicht bin ‘je weni­ger Plugins des­to bes­ser’ und das Plugin nach dem Generieren wie­der löschen wür­de.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.