Vor einer Woche habe ich darüber geschrieben, warum Sie in Ihrem OXID Shop immer ein Child-Theme verwenden sollten, sobald Sie eigene Anpassungen machen.

Heute möchte ich Ihnen wie versprochen zeigen, wie Sie ein solches Child-Theme schnell und sauber erzeugen.

Noch einmal zur Wiederholung: Ein Child-Theme ist keine Kopie des Parents, sondern enthält ausschließlich Dateien, die von denen des Eltern-Themes abweichen! Auch das habe ich in meinem letzten Beitrag bereits erklärt. Es gibt eine einzige Ausnahme, dazu kommen wir gleich.

Child-Theme ID und Verzeichnis

Als erstes legen wir also ein leeres Verzeichnis an, denn wir wollen erstmal nur das Child-Theme definieren und noch keine Anpassungen vornehmen. Der Verzeichnisname ist dabei gleichzeitig die ID des Themes, die eindeutig sein muss. Verwenden Sie hier ausschließlich Kleinbuchstaben und Ziffern, auf keinen Fall Trennstriche oder Sonderzeichen.

Wir benötigen das Verzeichnis mit identischem Namen gleich zwei Mal: im Ordner /application/views sowie im Ordner /out. Der erste Ordner enthält später die Templates und Übersetzungsdateien, der zweite alle Bilder, JavaScript- und CSS-Dateien.

Damit OXID das Verzeichnis als Theme erkennt, und auch weiß, von welchem Parent dieses Theme abgeleitet ist, gehört die Datei theme.php ins Theme-Verzeichnis in /application/views. Diese Datei ist wie folgt aufgebaut:

<?php
$aTheme = array(
     'id' => 'childthemeid',
     'title' => 'Theme Name',
     'description' => 'Das ist das Child-Theme für meinen Shop xyz',
     'thumbnail' => 'theme.jpg',
     'version' => '1.0',
     'author' => 'Bettina Ramm',
     //Define the following variables for the custom child themes:
     'parentTheme' => 'azure',
     'parentVersions' => array('1.4.1'),
);

Oben definieren Sie wichtige Daten Ihres Themes – die Theme-ID (id), die identisch ist mit dem Verzeichnisnamen Ihres Child-Themes, einen Namen, unter dem das Theme später im OXID Backend angezeigt wird, sowie eine Beschreibung, die Sie ebenfalls nach Belieben füllen können. Auch die Version sowie den Autor können Sie selbst festlegen, die Daten haben lediglich Informationscharakter und werden im OXID Backend zum Theme angezeigt.

theme.jpg ist übrigens ein optionaler Screenshot, den man dem Theme hinzufügen kann. Die Datei gehört auf dieselbe Ebene wie die theme.php.

Wichtig sind dann noch die beiden vorletzten Zeilen. Als parentTheme tragen Sie hier die ID (= Verzeichnisnamen) des Parent-Themes ein. Als parentVersions reicht es aus, die aktuelle Version des Parent-Themes einzutragen, diese ist im OXID Backend ersichtlich (Menüpunkt Erweiterungen Themes und dann das Theme anklicken). Gegebenenfalls muss diese Angabe nach einem OXID Update angepasst werden, falls OXID die Versionsnummer des Parent-Themes ändert. Da dies aber nicht vorhersehbar ist, können Sie an dieser Stelle nichts weiter tun, als die aktuelle Version anzugeben.

Nötige Dateien kopieren

Ich habe oben geschrieben, dass es eine Ausnahme von der Regel gibt, dass nur die Dateien kopiert werden, die tatsächlich verändert werden.

Sie werden in aller Regel die CSS-Datei anpassen, in der alle Schriftgrößen, Rahmen, Farben usw. definiert sind – das ist die oxid.css (bzw. styles.min.css in Flow), die Sie somit in Ihr Child-Theme kopieren. In dieser Datei sind jedoch diverse Sourcen direkt referenziert, z. B. Fonts und Hintergrundbilder. Diese Dateien werden nicht mehr gefunden, wenn Sie ausschließlich die oxid.css in das Child-Theme umziehen – es müssen also sämtliche in dieser Datei referenzierten Dateien kopiert werden.

Wenn Sie sich nicht die Mühe machen und die CSS-Datei von oben bis unten prüfen und die Dateien einzeln kopieren wollen, kopieren Sie die Verzeichnisse bg, css und fonts aus /out/src/ sowie /out/img/ des Parent-Themes samt Inhalten.

Child-Theme aktivieren / anpassen

Nun ist Ihr Child-Theme einsatzfähig und kann im Backend aktiviert und beliebig angepasst werden.

Um Anpassungen zu machen, holen Sie sich die betreffende Datei aus dem Parent, ändern Sie sie und laden Sie sie dann ins entsprechende Verzeichnis im Child-Theme.

Ein Theme in ein Child-Theme umwandeln

Wenn Sie bereits mit einer Theme-Kopie arbeiten, diese nun aber sauber in ein Child-Theme umwandeln wollen, liegt etwas mehr Arbeit vor Ihnen.

Sie müssen dazu wissen, von welchem Ursprungstheme das Child-Theme einmal abgeleitet wurde. Sehr hilfreich ist es, wenn Ihnen das Ursprungstheme noch unangepasst im Original vorliegt. Haben Sie zwischenzeitlich bereits Updates vorgenommen, muss der Vergleich der Dateien eben mit dem aktuellen Stand des Parent-Themes vorgenommen werden.

Bearbeiten Sie zuerst die theme.php und ergänzen Sie die nötigen Informationen zum Parent (parentTheme und parentVersions) wie oben beschrieben.

Anschließend machen Sie einen Verzeichnisvergleich Ihres Themes mit dem Original-Theme und entfernen sämtliche Dateien (bis auf die oben genannten Ausnahmen) aus Ihrem Theme, die mit dem Original-Theme identisch sind.

Zum Vergleichen gibt es Tools wie z. B. Beyond Compare.

Übrig bleiben sollte ein bereinigtes Child-Theme, das nur die Dateien enthält, die vom Eltern-Theme abweichen.

kostenloses eBook SEO für OXID eShop

10 SEO Tipps für Ihren OXID eShop - kostenlos

Laden Sie sich Ihr kostenloses eBook herunter und optimieren Sie Ihren Shop ganz einfach selbst.

 

Thema: Zeit, Geld & Nerven | Stichworte: , , ,