Ein Child Theme erstellen – Wie mit Entwicklertools arbeiten, um CSS zu bearbeiten? – 28.04.2016

Im letzten Treffen zeigte uns Mark Howells-Mead die wichtigsten Schritte zum Anlegen eines Child-Themes sowie die Nutzung der Chrome Developer Tools.

Eine Schritt–für-Schritt-Anleitung hat er auf seiner Webpage kurz und verständlich festgehalten. Ein Blick hinein lohnt sich:

https://wp.mhm.li/2016/04/css-aus-dem-parent-theme-in-ein-child-theme-laden/

Warum ein Child-Theme?

  • Oft reichen die Anpassungsoptionen des Themes nicht aus. (WP-Backend: Design/Anpassungen).
  • Änderungen an der Datei style.css werden beim nächsten Theme-Update überschrieben bzw. sind wieder weg.
  • Ein Child-Theme ist in wenigen Schritten angelegt und die Änderungen sind zukunftssicher angelegt.

Schritte zu einem Child-Theme

  1. Zugang zu den Theme-Dateien z.B. über FTP oder Filemanager.
  2. In WP-Content sind alle Themes gespeichert. Unter Themes einen neuen Ordner mit dem Namen des Child-Themes anlegen.
  3. Im Ordner Child-Themes 2 Dateien hinzufügen: style.css und function.php
  4. Nun die Datei style.css mit dem Parent-Theme verknüpfen. Dafür muss der nachfolgende Kommentar /* */ eingefügt und angepasst werden. Hinweis: Oft ist dieser ganz oben im style.css des Parent-Themes zu finden oder einfach kopierbar von Marks Seite.Kommentar Child-ThemeAnschliessend muss der gewählte Child-Theme Name nach „Theme Name“ eingegeben werden und ganz wichtig bei „Template“ den Namen des Parent-Themes eintragen. Somit ist die Verknüpfung erstellt.
  5. Dann die CSS-Regeln des Parent-Theme ins Child-Theme laden. Dafür die function.php öffnen, nachfolgenden Code einfügen und anpassen. Code kopierbar auf Marks Site. 🙂Code wp_enqueueAnschliessend die Felder in rot anpassen. Der Präfix «twentysixteen_permanenttourist_ch» im obigen Beispiel ist mit dem eigenen, einmaligen Namen zu ersetzen. Hinweis: Die Funktion get_template_directory_uri () weist auf das Parent-Theme hin.
  6. Im WP-Backend das Child-Theme noch aktivieren. Et voilà!

Grafische Anpassungen mit Developer Tools

Mit den Developer Tools lassen sich definierte CSS Styles leicht herausfinden und direkt im Browser anpassen. Die Anpassungen sind nur temporär und nach der Aktualisierung der Seite sind die Änderungen wieder weg. Der angepasste CSS kann jedoch einfach kopiert und ins Style Sheet eingefügt werden.

Am einfachsten wird das Tool über den nachfolgenden Shortcut geöffnet. Oder über das Menu/Tools/Developer Tools.

Shortcut Google Developer Tools

Weitere Shortcuts: http://anti-code.com/devtools-cheatsheet/

Zur Einsicht des CSS eines Elements einfach den Cursor auf das Element platzieren, rechter Mausklick und Untersuchen/Prüfen wählen. Das Tool zeigt dann meist unten rechts in grau an, um welchen CSS es sich handelt.

Bei einfach aufgebauten Themes ist es keine grosse Sache den CSS anzupassen. Hingegen bei komplexen Themes ist dies schon schwieriger. Welcher CSS ist wie zugeordnet oder gar vererbt.

Zusätzlich sieht man auch wie die Webseite auf den verschiedenen Endgeräten dargestellt wird.

Weitere Infos, wie vielfältig das Tool eingesetzt werden kann: https://developers.google.com/web/tools/chrome-devtools/

Geeignete Text-Editoren

Es gibt eine breite Bandbreite von Text-Editoren. Vom einfachen PSPad bis hin zu ausgeklügelten Varianten. Genannt wurde von jedem in der Gruppe ein anderer Editor:

Warum nicht selbst ein Theme entwickeln?

Wer ein Theme nicht nur anpassen will, sondern selbst eines entwerfen will, gibt es 2 hilfreiche Tools. Bei diesen Tools sind alle Dateien bereits angelegt, die ein Theme braucht.