,

Sinn von Childthemes & wie man Sie erstellt

Wie man ein Childtheme erstellt.

Nachdem nun das Camtheme in der Beta Version an alle Teilnehmer versendet wurde, kam immer wieder die Frage auch auf, wie man bestehendes CSS wo verändern kann bzw. nachdem dann wieder ein Update heraus kam, die selbst gemachten Änderungen wieder verschwunden waren.

Abgesehen von der Möglichkeit seine eigenen Styles auch im Backend hinterlegen zu können, sollte man seine eigenen Anpassungen an das Theme mit einem sog. Childtheme vornehmen. Im Grunde ist dies sehr einfach und in diesem Artikel erkläre ich, wie man dies macht.

Die Vorbereitungen

Anhand des Camthemes werde ich in diesem Tutorial erklären, wie man daraus ein Childtheme erstellt und seine eigenen Änderungen darin ablegen kann, die bei Theme Updates dann nicht überschrieben werden und somit erhalten bleiben.

  1. Lege im Ordner wp-content/themes/ das Verzeichnis camtheme-child an (sieht dann so aus: wp-content/themes/camtheme-child).
  2. Nun legst Du eine style.css in diesem Childtheme-Ordner mit folgendem Inhalt an:
  3. Kopiere die screenshot.png aus dem Original-Theme in dein Childtheme Verzeichnis.
  4. Wahlweise (& falls notwendig) kannst Du auch eine leere functions.php ins das Childtheme-Verzeichnis mit folgendem Inhalt anlegen:
  5. Aktiviere im Backend unter Design > Themes dein neues Childtheme.

Einstellungen, Widgets oder Menüs die vorher im Original Theme eingestellt wurden werden nach Aktivierung des Childthemes übernommen und beibehalten.

Unterhalb der Kommentare in der style.css sowie in der functions.php kannst Du nun deinen eigenen Code definieren und Anpassungen machen.

Wie ändert man denn am besten nun die Styles?

Viele Wege führen nach Rom, ich habe aber immer eine Variante, wie ich da vorgehe und bisher hat sich diese immer am besten bewährt. Mit der obigen Anweisung „@import „../camtheme/styles.css“ wird die Original style.css vom Original Theme bereits im CSS zuvor importiert. Alles andere was man darunter dann notiert, hebt eventuelle vorher im Original Theme eingestellte Styles wieder auf.

In einem Video-Tutorial was ich noch nachreiche werde ich das mal präsentieren, wie ich das mache. Im Grunde ist es eigentlich sehr simpel wenn man CSS versteht und man kommt schnell zum Ziel.

Was ist, wenn ich einen PHP WordPress Hook zusätzlich einfügen möchte?

Genau deshalb kann man eine leere functions.php im Childtheme Ordner anlegen, die dann im Anschluss an die Originale ausgeführt wird. Z.b. kann man dort dann eigene WordPress Hooks und Filter definieren.

Zusammengefasst

Egal welches Theme man auch verwendet, wenn man Änderungen vornehmen möchte, sollte man immer zuerst ein Childtheme von diesem erstellen, damit die eigenen Änderungen bei einem (automatischen) Update nicht plötzlich wieder verschwunden sind.

Insbesondere kann man so z.B. auch spezielle Styles für Plugin-Widgets etc. notieren, die sich dann wie gewünscht ins Layout einordnen oder aber auch z.b. die nervigen diversen Metas von WordPress per Hook entfernen:

Hinweis: Im Camtheme muss dieses Beispiel (die Metas aus dem Head entfernen) nicht eingefügt werden, da diese standardmäßig im Camtheme implementiert sind.

3 Kommentare
  1. Juliette
    Juliette says:

    Hallo
    Ein gute Anleitung für die Erstellung eines Child-Themes und nützliche Hinweise für die Bearbeitung.
    Doch leider wie immer eine Frage hinterher:
    Was passiert, wenn sich relevante Funktionen einer geänderten Datei (zB Ergänzungen, Änderung in der single.php) durch ein Update ergeben, denn die würden sich ja denn wphl nicht „von selbst“ in das Child-Theme“ übertragen.

    Grüße
    Juliette

    Antworten
    • wpler
      wpler says:

      Moin,

      natürlich nicht, wenn man die im Child-Theme kopiert hat. Zumindest halte ich es so, dass die Theme-Template-Dateien nach dem Erscheinen der finalen Version möglichst nicht mehr geändert werden, lediglich noch die internen Scripte (Klassen, Funktionen, etc.). Sollte es aber dennoch passieren, achte ich mal in Zukunft darauf dies zu dokumentieren, was sich in welcher Datei geändert hat, damit man dies dann in seiner Child-Datei ebenfalls anpassen kann.

      Grüße,
      Stefan

      Antworten

Trackbacks & Pingbacks

  1. […] tue dies bitte auch. Die meisten Änderungen werden unter der Haube passieren und wenn man ein Childtheme des Camthemes angelegt hat, haben die Änderungen der Templates der Version 2.0 auch keine […]

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

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