Magento-Themes einfacher erstellen und modifizieren

In diesem Artikel beschreibe ich ein zeitsparendes Vorgehen zum Arbeiten mit Magento-Themes.

Einführung

Ich gehe ich davon aus, dass Sie mit den Prinzipien der Erstellung eines Magento-Themes vertraut sind, andernfalls wäre Designer’s Guide to Magento ein guter Einstieg.

Wird Magento in den Verzeichnissen des verwendeten Themes nicht fündig, wird die notwendige Datei aus dem Verzeichnis des Base-Themes geladen. Das Base-Theme von Magento ist in app\design\frontend\base\default gespeichert.

Das Verzeichnis des Base-Theme ist unantastbar; Anpassungen am Template sollten auf keinen Fall an Dateien in diesem Verzeichnis durchgeführt werden. Ist eine Anpassung des Templates gewünscht, wird die Datei aus dem eigenen Theme-Verzeichnis bearbeitet. Verwendet Magento eine Datei aus dem Base-Theme, ist sie in das eigene Theme-Verzeichnis inklusive der Ordnerstruktur zu kopieren und erst dann anzupassen.

Um beispielsweise einen Conversion-Pixel auf der Seite „Vielen Dank für Ihren Einkauf“ einzubauen, wird die Datei success.phtml in das eigene Theme-Verzeichnis kopiert und erst dort mit einem statischen Block erweitert, der den Code für den Conversion-Pixel aufnehmen soll:

cp -r app\design\frontend\base\default\template\checkout\success.phtml app\design\frontend\default\my_theme\template\checkout\success.phtml

Bei vielen Template-Anpassungen oder beim Aufbau eines neuen Templates wird diese Prozedur sehr zeitraubend.

Zeitsparendes Arbeiten mit Magento-Themes

Als Abhilfe kann das gesamte Verzeichnis des Base-Theme in das eigene Theme-Verzeichnis kopiert werden (1). Anschließend werden alle Dateien durch rekursive Umbenennung „deaktiviert“ (2). Das lästige Kopieren einzelner Dateien des Base-Theme erübrigt sich; stattdessen wird ausschließlich im eigenen Theme-Verzeichnis gearbeitet. Ist eine Anpassung gewünscht, wird die betroffene Datei im eigenen Theme-Verzeichnis durch Umbenennen „aktiviert“ und danach bearbeitet (4). Vor dem Umbenennen kann eine Kopie der Datei angelegt werden (5), sodass die originale Datei aus dem Base-Theme-Verzeichnis stets zur Hand bleibt.

1. Das Base-Theme wird in das eigene Theme-Verzeichnis my_theme kopiert:

Linux:

shell> cp -r app/design/frontend/base/default app/design/frontend/default/my_theme

Windows:

shell> xcopy /S /E app\design\frontend\base\default app\design\frontend\default\my_theme\

2. Alle Theme-Dateien werden durch rekursive Umbenennung deaktiviert. Hierzu wird jedem Dateinamen  „-disabled“ angehängt:

Linux:

Das aktuelle Verzeichnis ist das Startverzeichnis für die rekursive Umbenennung. Wechseln Sie deshalb vor dem Aufruf erst in das eigene Theme-Verzeichnis. Der folgende Befehl fügt rekursiv jedem Dateinamen „-disabled“ an, sodass „beispiel.phtml“ in „beispiel.phtml-disabled“ umbenannt wird.

Mit dem Parameter -n kann der Befehl zu Testzwecken im Leerlauf ausgeführt werden, Abbruch ist mit STRG+C möglich:

shell> cd app\design\frontend\default\my_theme\
shell> find -type f -exec rename -n 's/$/-disabled/' '{}' ';'

Entfernen Sie den Parameter -n, nach dem die Simulation erfolgreich war:

shell> find -type f -exec rename 's/$/-disabled/' '{}' ';'

Windows:

Für rekursive Umbenennung unter Windows wird der folgende Code in der Stapelverarbeitungsdatei renr.bat im eigenen Theme-Verzeichnis gespeichert:

for /r %%x in (%1) do ren "%%x" %2

Die Datei wird anschließend auf der Kommandozeile ausgeführt. Das aktuelle Verzeichnis ist das Startverzeichnis für die rekursive Umbenennung. Wechseln Sie deshalb vor dem Aufruf erst in das eigene Theme-Verzeichnis.

shell> cd app\design\frontend\default\my_theme\
shell> renr *.phtml *.phtml-disabled
shell> renr *.xml *.xml-disabled

Sie können alle Dateien auch in einer Zeile umbenennen, wobei allerdings auch die renr.bat in renr.bat-disabled umbenannt wird:

shell> renr * *-disabled

Wenn die Datei renr.bat erwartungsgemäß funktioniert, können Sie die Ausgabe der Stapelverarbeitung mit @ECHO OFF ausblenden:

@ECHO OFF
for /r %%x in (%1) do ren "%%x" %2 

3. a) Wenn Sie für das neue Theme als Grundlage das Base-Theme verwenden wollen, wären Sie mit dem Vorbereiten des eigenen Theme-Verzeichnisses fertig. Nun muss noch das Base-Skin-Verzeichnis kopiert werden:

shell> cp -r skin/frontend/base/default/ skin/frontend/default/my_theme/

Unter Windows verwenden Sie den Befehl xcopy (s. Punkt 1).

3. b) Wenn Sie ein anderes Theme als Grundlage für die Gestaltung des neuen Themes verwenden (z. B. modern), kopieren Sie die Dateien dieses Themes in das vorbereitete Theme-Verzeichnis my_theme:

shell> cp -r app/design/frontend/default/modern/ app/design/frontend/default/my_theme/

Verwenden Sie in diesem Fall auch das skin-Verzeichnis des Grundlage-Themes an Stelle des Base-Skin-Verzeichnisses:

shell> cp -r skin/frontend/default/modern/ skin/frontend/default/my_theme/

4. Die anzupassende .phtml-disabled wird in einem Editor geöffnet und unter .phtml gespeichert. Anschließend kann die Datei editiert werden.

5. Um Verwirrung auszuschließen, wird die .phtml-disabled sinngemäß in .phtml-original umbenannt.

So sieht beispielsweise das Verzeichnis app/design/frontend/default/my_theme/template/checkout nach Anpassung der Datei success.phtml aus:

Magento-Theme Anpassung

6. Auch wenn die „deaktivierten“ Dateien im eigenen Theme-Verzeichnis nicht stören, können diese, nach dem die Arbeiten am neuen Theme abgeschlossen wurden, rekursiv entfernt werden.

Tipp: Magento-Training „Magento-Themes erstellen und anpassen“

5 Gedanken zu „Magento-Themes einfacher erstellen und modifizieren“

  1. „Als Abhilfe kann das gesamte Verzeichnis des Base-Theme in das eigene Theme-Verzeichnis kopiert werden“

    Es ist KEINE gute Idee:
    Bei jedem Magento-Update/Upgrade, bei dem Theme-Dateien betroffen sind, müssten nämlich sämtliche Änderungen manuell in das eigene Theme übernommen werden.
    Also „Kopieren“ ja, aber nicht alles, sondern nur die Templates, die tatsächlich angepasst werden (müssen).

    1. Das ist richtig, aber nur wenn man nach dem zitierten Satz nicht weiterliest! Denn nach dem Kopieren werden alle Dateien in allen Unterverzeichnissen durch Umbenennung „deaktiviert“, d. h. sie sind für Magento unsichtbar, aber der Designer arbeitet mit einer fertigen Ordnerstruktur und muss nicht ständig zwischen dem Base-Theme und dem eigenen Theme-Verzeichnis wechseln.

  2. Hallo Pawel,

    vielen Dank erst einmal für das Teilen Deines Wissens. Hat mir bei einem Magento 1.7.x Shop sehr geholfen.
    Kann die von Dir beschriebene Technik auch eins zu eins bei der aktuellen 1.9 Version verwendet werden oder gibt es Einschränkungen von denen Du weist?

    Bis denn
    Chefkoch

Schreibe einen Kommentar

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