Das Child-Theme-Dilemma

33
Das Child-Theme- Dilemma WordCamp Cologne 2015 Torsten Landsiedel

Transcript of Das Child-Theme-Dilemma

Das Child-Theme-Dilemma

WordCamp Cologne 2015Torsten Landsiedel

Hallo!

Torsten LandsiedelWordPress-Webworker

Moderator im Supportforum

Mitglied im Redaktionsteam de.w.org

Translation Contributor und Editor

Co-Orga WP Meetup Hamburg

Co-Orga WordCamp Hamburg

@zodiac1978

Child-Themes-Nutzung

Wer hat schon mal Child-Themes genutzt?

Child-Themes-Nutzung

Warum?

Child-Theme-Probleme

SicherheitErweiterungen

Geschwindigkeit

Sicherheitsprobleme

Eltern-Themesearch.php (mit Sicherheitslücke)

Child-Themesearch.php (mit Sicherheitslücke)

Eltern-Theme search.php (ohne Sicherheitslücke)

Child-Themesearch.php (mit Sicherheitslücke)

Update

Überschreibt

Kein Update!Überschreibt

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!

Fehlende Erweiterungsmöglichkeiten

Framework-Theme + Kauf-Child-Theme?

WordPress.org-Theme + Child-Theme?

Wohin mit den eigenen Anpassungen?

Es gibt keine Grandchild-Themes :(

Fehlende Erweiterungsmöglichkeiten

Warum sollte es keine Grandchild-Themes geben?

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

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/

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

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

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 …)

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' );

Performance-Probleme

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

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

Hey Torsten!

Trink’ mal einen Schluck Wasser.

Sprich nicht zu schnell.

Und frag’ mal, ob alle mitkommen.

:)

Child-Theme-Probleme

SicherheitErweiterungen

Geschwindigkeit ✓

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

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.

Idee 1: Child Theme Lite

Problem:Wieviele Themes bieten so etwas an?

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().

Idee 2: Child Theme Template Check

DEMO!

Child Theme Template Check

Voilá!

Child Theme Template Check

Child Theme Template Check

https://github.com/Zodiac1978/tl-template-checker

- This is a Twitter opportunity! -

Child-Theme-Probleme

Sicherheit ✓Erweiterungen (✓)Geschwindigkeit ✓

● 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!

Danke für euer Feedback!

Diskussion!

Fragen? Gegenmeinungen? Alternative Lösungen?

Theme-Shop/Theme-Entwickler und Interesse an der Umsetzung?

Lasst uns darüber sprechen!

@zodiac1978http://torstenlandsiedel.de/kontakt

Danke für eure Zeit!

Kommt gut nach Hause! :)