Talk über die Probleme von Child-Themes in WordPress (inkl. Lösung per Plugin) vom WordCamp Cologne 2015

1. Das Child-Theme-
Dilemma
WordCamp Cologne 2015
Torsten Landsiedel

2. Hallo!
Torsten Landsiedel
WordPress-Webworker
Moderator im Supportforum
Mitglied im Redaktionsteam de.w.org
Translation Contributor und Editor
Co-Orga WP Meetup Hamburg
Co-Orga WordCamp Hamburg
@zodiac1978

3. Child-Themes-Nutzung
Wer hat schon mal Child-Themes genutzt?

4. Child-Themes-Nutzung
Warum?

5. Child-Theme-Probleme
Sicherheit
Erweiterungen
Geschwindigkeit

6. Sicherheitsprobleme
Eltern-Theme
search.php (mit
Sicherheitslücke)
Child-Theme
search.php (mit
Sicherheitslücke)
Eltern-Theme
search.php (ohne
Sicherheitslücke)
Child-Theme
search.php (mit
Sicherheitslücke)
Update
Überschreibt
Kein Update!Überschreibt

8. Erweiterungsmöglichkeiten
Pluggable Functions:
if ( ! function_exists( 'theme_special_nav' ) ) {
function theme_special_nav() {
// Do something.
}
}
Aber Achtung!
Jetzt muss der Code selber gewartet werden!

9. Fehlende
Erweiterungsmöglichkeiten
Framework-Theme + Kauf-Child-Theme?
WordPress.org-Theme + Child-Theme?
Wohin mit den eigenen Anpassungen?
Es gibt keine Grandchild-Themes :(

10. Fehlende
Erweiterungsmöglichkeiten
Warum sollte es keine Grandchild-Themes geben?

11. Fehlende
Erweiterungsmöglichkeiten
This idea of releasing advanced child themes just creates
the same problem child themes were meant to solve:
upgradability.
– Justin Tadlock
http://justintadlock.com/archives/2010/08/16/frameworks-parent-child-
and-grandchild-themes

12. Performance-Probleme
Viele Child-Themes nutzen @import
@import url(../parent-theme/style.css);
Ein @import verhindert paralleles Laden
in allen Browsern.
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

13. Lösung:
Style de-registrieren und Parent- und Child-Styles neu
registrieren und enqueuen
function twentytwelve_child_scripts() {
wp_deregister_style( 'twentytwelve-style' );
wp_register_style( 'twentytwelve-style',
get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'twentytwelve-child-style',
get_stylesheet_uri(), array( 'twentytwelve-style' ) );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_child_scripts', 11 );
Performance-Probleme

14. Noch einfacher:
Parent Style enqueuen. Fertig. Funkioniert dann, wenn
get_stylesheet (und nur das) im Parent genutzt wird.
// Faster than @import
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() .
'/style.css' );
}
Performance-Probleme

15. Performance-Probleme
Neues Problem:
Viele Themes sind dafür leider nicht gebaut.
Stylesheet sind hart codiert in header.php:
<link rel="stylesheet" type="text/css" media="all"
href="<?php bloginfo( 'stylesheet_url' ); ?>" />
(Ältere Elmastudio-Themes machen das leider auch …)

16. Performance-Probleme
Oder das Theme ist inkompatibel zu Child-Themes
gebaut (durch Nutzung von get_stylesheet_directory()
im Eltern-Theme z.B.)
Oder das de-registrieren ist etwas komplizierter:
wp_enqueue_style( 'base_styles',
get_template_directory_uri() . '/css/base.css' );
wp_enqueue_style( 'responsive_styles',
get_template_directory_uri() . '/css/mobile.css' );
wp_enqueue_style( 'ie_styles',
get_template_directory_uri() . '/css/ie.css' );

17. Performance-Probleme
Komplizierter für Anfänger:
alles raus und in richtiger Reihenfolge wieder rein ...

18. Performance-Probleme
Justin Tadlocks geniale Lösung im Eltern-Theme:
function my_enqueue_styles() {
/* If using a child theme, auto-load the parent theme style. */
if ( is_child_theme() ) {
wp_enqueue_style( 'parent-style',
trailingslashit( get_template_directory_uri() ) . 'style.css' );
}
/* Always load active theme's style.css. */
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
http://justintadlock.com/archives/2014/11/03/loading-parent-styles-for-child-themes

19. Hey Torsten!
Trink’ mal einen Schluck Wasser.
Sprich nicht zu schnell.
Und frag’ mal, ob alle mitkommen.
:)

20. Child-Theme-Probleme
Sicherheit
Erweiterungen
Geschwindigkeit ✓

21. Idee 1: Child Theme Lite
“Child themes from theme developers should be nothing
more than a stylesheet and a few functions.”
– Justin Tadlock
http://justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild-themes

22. Idee 1: Child Theme Lite
Child Theme darf nur functions.php und
style.css enthalten.
Alle Änderungen am Theme werden nur
per Hook oder Filter gemacht.
Das passiert ausschließlich per Plugin.
Das Child-Theme bleibt updatefähig.

23. Idee 1: Child Theme Lite
Problem:
Wieviele Themes bieten so etwas an?

24. Idee 2: Child Theme Template Check
Jede Template-Datei im Theme bekommt eine
Versionsnummer im Header.
@version 1.0.0
Überprüfung der Versionsnummer per Plugin
(oder noch besser per WordPress-Core).
Unterscheide aufzeigen per wp_text_diff().

25. Idee 2: Child Theme Template Check
DEMO!

26. Child Theme Template Check
Voilá!

27. Child Theme Template Check

28. Child Theme Template Check
https://github.com/Zodiac1978/tl-template-checker
- This is a Twitter opportunity! -

29. Child-Theme-Probleme
Sicherheit ✓
Erweiterungen (✓)
Geschwindigkeit ✓

30. ● Ist Werkzeuge der richtige Ort, oder wäre Design der bessere
Ort für den Menüpunkt?
● Issue auf Github eröffnen:
https://github.com/Zodiac1978/tl-template-checker/issues
Mitmachen? Gerne!

31. Danke für euer Feedback!

32. Diskussion!
Fragen? Gegenmeinungen? Alternative Lösungen?
Theme-Shop/Theme-Entwickler und
Interesse an der Umsetzung?
Lasst uns darüber sprechen!
@zodiac1978
http://torstenlandsiedel.de/kontakt

33. Danke für eure Zeit!
Kommt gut nach Hause! :)