Child Theme Aufbau 1 – Das Gerüst

Photo by HebiFot from pixabay

Photo by HebiFot from pixabay

 

In diesem Abschnitt erlenen Sie den child theme Aufbau. Damit schaffen wir das Gerüst für zukünftige Änderungen. Aber in diesem Step erzielen wir noch keine funktionellen Veränderungen, wir legen nur den Grundstein dazu.

Es ist wirklich super einfach:

Man erstellt ein Verzeichnis, der Name ist beliebig, sollte sich aber von anderen, installierten Themes unterscheiden. Für meine Mantra-Theme (liegt im Verzeichnis „mantra“)  habe ich dann den Verzeichnisnamen „mantra_us“ für die Child-Theme gewählt.

Darin legt man mit dem Notepad, oder besser mit Notepad++ eine Datei „style.css“ an, die etwa wie folgt aussieht:

 

 

 

/*
Theme Name: mantra_us
Description: Child theme for the Mantra
theme Author: Uwe Sprenger
Author URI: https://uwesprenger.de/
Template: mantra
Version: 0.1
*/
@import url(„../mantra/style.css“);

Ganz wichtig sind die grün markierten Einträge, der Rest ist Dokumentation und Kommentar. Der Theme Name muss dem Verzeichnis Namen entsprechen. Das Template dem Namen/Verzeichnis der Parent Theme. Und ganz wichtig: Es muss Gross- und Kleinschreibung beachtet werden. Schaut euch mit Filezilla oder einem anderen FTP Client das Verzeichnis wp-content\themes an und übernehmt die dortige Schreibweise der Parent-Theme exakt.

Wichtig ist auch das Import-Statement, damit wird das Style-Sheet der Parent-Theme übernommen. Wichtig: Es wirkt jeweils die letzte Definition. Nachdem die Parent-Style.css als erstes importiert wird, könnt ihr in eurer style.css also jedweden Style verändern, indem ihr ihn nach dem Import-Statement eintragt. Aber das kommt später.

Das so erstellte Verzeichnis (mit der einen Datei), wird nun per FTP in das Theme-Verzeichnis (wp-content\themes) kopiert. Und jetzt kommt die Stunde der Wahrheit:

Ihr wechselt ins Dashboard, und dort könnt ihr die neu erscheinende Theme „mantra_us“ aktivieren. (Ist sie nicht da? Dann habt ihr sicherlich die Groß- und Kleinschreibung nicht exakt übernommen oder das Verzeichnis nicht an den richtigen Ort kopiert. )

Bitte jetzt nicht erschrecken, wenn die Theme noch etwas seltsam aussieht:

Ihr müsst evtl. einige WordPress Einstellungen wiederholen, da diese unter dem Theme-Namen in der Datenbank gespeichert sind. Da der sich geändert hat, sind  diese Einstellungen weg. (Das Header Image, ggf. die Zusatzmenues muss man erneut zuweisen). Bei mir kam es auch zu einer mysteriösen Verschiebung der Sidebar Widgets, was sich aber leicht beheben lies.

Je nach Theme müssen evtl. auch die Theme-spezifischen Einstellungen wiederholt werden.  Im Falle Mantra sind die Theme-Settings in der DB gespeichert und greifen auch bei der Child-Theme. Bei anderen Themes kann es sein, dass auch diese Settings ggf. nachgeholt werden müssen.

Damit ist euer erster Step auch schon beendet. Ihr habt eine funktionsfähige Child-Theme als Basis für eure individuellen Veränderungen.

Wenn ihr wollt könnt ihr nun eure Einträge in den CSS Anpassungen der Theme löschen, und ganz explizit in die style.css euer Child-Theme eintragen. Es sollte dann wie gewohnt funktionieren.

Eure style.css könnte dann etwa wie folgt aussehen (hier mein Beispiel für die Mantra Theme)

/*
Theme Name: mantra_us
Description: Child theme for the Mantra
theme Author: Uwe Sprenger
Author URI: https://uwesprenger.de/
Template: mantra
Version: 0.1
*/
@import url("../mantra/style.css");


/* Entfernung der Artikel prev/next Links oben und unten */

#nav-above { display: none !important; }
#nav-below { display: none !important; }
/* Textexpander Layout */
.te_div {background: #F4F4F4;
margin: 8px 0 0 12px;
padding: 8px;
border: 4px solid #DDDDDD;
font-size: 14px;
}

/* Textbereich in Contact Form grösser */
.textarea-905 textarea
{height:100px;}

/* Caption bei Bildern kleiner */
#content .wp-caption  {
padding:2px 7px 4px;
}

/* Veränderung der Bullet-Position bei Aufzählungen. Mantra STD war 51% statt 7px */
entry-content ul>li { background: url(../mantra/images/bullet.png) left 7px no-repeat; 
}

Wenn ihr diesen Step geschafft habt, dann geht’s jetzt daran die Ernte einzufahren.
Wir bauen uns ein paar einfache aber nützliche Shortcodes, ohne dafür ein Plugin zu benötigen:

Child Theme Erstellung Step 2- Shortcodes

Bookmark the permalink.

About Uwe Sprenger

Uwe Sprenger ist ein IT Generalist, der in seiner Freizeit immer gerne neue Möglichkeiten ausprobiert. Und so ist hier dieses Blog zu Wordpress im entstehen. Beruflich bin ich (zur Zeit) intensiv im Lizenz Management unterwegs.  

One Response to Child Theme Aufbau 1 – Das Gerüst

  1. Pingback: UweS Blog - Navigation - Das Konzept

Schreibe einen Kommentar

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

10 + 10 =