Paulina Hetman aka @PeHaa
Paulina Hetman aka @PeHaa
Ne fonctionne pas sans un autre thème, appelé parent
Hérite des fonctionnalités et des modèles du parent
Sans toucher au parent, un child thème permet :
Une MAJ du thème parent n'efface pas les modifications.
stylesheet : | ? ... |
template : | ? ... |
stylesheet : | ? ... |
template : | ? ... |
stylesheet : | ? ... |
template : | ? ... |
stylesheet : | theme-1 |
template : | ? ... |
stylesheet : | theme-1 |
template : | ? ... |
stylesheet : | theme-1 |
template : | theme-1 |
stylesheet : | ? ... |
template : | ? ... |
stylesheet : | theme-1-child |
template : | ? ... |
stylesheet : | theme-1-child |
template : | theme-1 |
Si un dossier dans wp-content/themes ne contient pas de style.css dans sa racine, tous ses sous-dossiers de premier niveau sont scannés en tant que thèmes potentiels.
Si un dossier dans wp-content/themes ne contient pas de style.css dans sa racine, tous ses sous-dossiers de premier niveau sont scannés en tant que thèmes potentiels.
template | vs | stylesheet |
TEMPLATEPATH | STYLESHEETPATH | |
get_template(); | get_stylesheet(); | |
get_template_directory(); | get_stylesheet_directory(); | |
... | ... | |
dossier du template | dossier du stylesheet | |
dossier du parent | ≠ | dossier du thème (child) |
template | vs | stylesheet |
TEMPLATEPATH | = | STYLESHEETPATH |
get_template(); | = | get_stylesheet(); |
get_template_directory(); | = | get_stylesheet_directory(); |
... | = | ... |
dossier du template | = | dossier du stylesheet |
dossier du parent | ≠ | dossier du thème (child) |
template | vs | stylesheet |
TEMPLATEPATH | ≠ | STYLESHEETPATH |
get_template(); | ≠ | get_stylesheet(); |
get_template_directory(); | ≠ | get_stylesheet_directory(); |
... | ≠ | ... |
dossier du template | ≠ | dossier du stylesheet |
dossier du parent | ≠ | dossier du thème (child) |
Important pour un thème child-ready:
Attention aux utilisations de : get_stylesheet_directory() et get_template_directory(). Ces fonctions ne sont pas interchangeables.
Ils ne seront plus équivalents si un child thème est activé.
Un fichier modèle dans le thème enfant (STYLESHEETPATH) écrase fichier modèle dans le thème parent (TEMPLATEPATH).
Un nouveau modèle peut être créé dans le thème enfant.
/* wp-includes/template.php */
if ( file_exists(STYLESHEETPATH . '/' . $template_name)) {
$located = STYLESHEETPATH . '/' . $template_name;
break;
} else if ( file_exists(TEMPLATEPATH . '/' . $template_name) ) {
$located = TEMPLATEPATH . '/' . $template_name;
break;
}
/* wp-settings.php */
if ( TEMPLATEPATH !== STYLESHEETPATH && file_exists( STYLESHEETPATH . '/functions.php' ) )
include( STYLESHEETPATH . '/functions.php' );
if ( file_exists( TEMPLATEPATH . '/functions.php' ) )
include( TEMPLATEPATH . '/functions.php' );
Le fichier functions.php créé dans le thème enfant permet d'ajouter facilement de nouvelles fonctions
/* pehaa-theme-child/functions.php */
function my_child_function() {
...
}
/* pehaa-theme/functions.php */
function my_function() {
...
}
Comment modifier my_function ?
/* pehaa-theme-child/functions.php */
function my_function() {
...
}
Fatal error: Cannot redeclare my_function()
/* pehaa-theme-child/functions.php */
function my_function() {
...
}
/* pehaa-theme/functions.php */
if ( !function_exists( 'my_function' ) ) :
function my_function() {
...
}
endif;
OK: my_function est déclaré dans le thème enfant.
Important pour un thème child-ready:
Déclarer les fonctions utilisateur de manière conditionnelle.
Vu souvent
/* child style.css */
@import url('../parent-theme/style.css');
/* Theme customization starts here */
/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
La méthode @import est une mauvaise pratique car le chargement de la page est ralenti.
Vu souvent
/* child style.css */
@import url('../parent-theme/style.css');
/* Theme customization starts here */
/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
Codex : Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice.
Codex
/* child : functions.php */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
/* twentyfifteen-child : functions.php */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
/* twentyfifteen : functions.php */
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
function twentyfifteen_scripts() {
...
// Load our main stylesheet.
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
...
}
1 (défault) : child apporte des modifications | 2 : le style est défini de zéro dans le child | 3 : le style du parent n'est pas modifié |
T S |
- S |
T - |
/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
$deps = array();
if ( apply_filters( 'load_template_css', is_child_theme() ) ) {
wp_enqueue_style( 'T-style', get_template_directory_uri().'/style.css', $deps );
$deps[] = 'T-style';
}
if ( apply_filters( 'load_stylesheet_css', true ) ) {
wp_enqueue_style( 'S-style', get_stylesheet_uri(), $deps );
}
}
Parent est activé : S-style est chargé
3e paramètre du 'wp_enqueue_style' (dépendances) garantit que 'T-style' (parent) sera chargé avant 'S-style' (child).
/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
$deps = array();
if ( apply_filters( 'load_template_css', is_child_theme() ) ) {
wp_enqueue_style( 'T-style', get_template_directory_uri().'/style.css', $deps );
$deps[] = 'T-style';
}
if ( apply_filters( 'load_stylesheet_css', true ) ) {
wp_enqueue_style( 'S-style', get_stylesheet_uri(), $deps );
}
}
Child est activé : T est S sont chargés (dans cet ordre)
3e paramètre du 'wp_enqueue_style' (dépendances) garantit que 'T-style' (parent) sera chargé avant 'S-style' (child).
le style est défini de zéro dans le child
/* child situation 2 : functions.php */
add_filter( 'load_template_css', 'do_not_load' );
function do_not_load() {
return false;
}
/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
$deps = array();
if ( apply_filters( 'load_template_css', is_child_theme() ) ) {
wp_enqueue_style( 'T-style', get_template_directory_uri().'/style.css', $deps );
$deps[] = 'T-style';
}
if ( apply_filters( 'load_stylesheet_css', true ) ) {
wp_enqueue_style( 'S-style', get_stylesheet_uri(), $deps );
}
}
le style n'est pas modifié
/* child situation 3 : functions.php */
add_filter( 'load_stylesheet_css', 'do_not_load' );
function do_not_load() {
return false;
}
/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
$deps = array();
if ( apply_filters( 'load_template_css', is_child_theme() ) ) {
wp_enqueue_style( 'T-style', get_template_directory_uri().'/style.css', $deps );
$deps[] = 'T-style';
}
if ( apply_filters( 'load_stylesheet_css', true ) ) {
wp_enqueue_style( 'S-style', get_stylesheet_uri(), $deps );
}
}
apply_filters( $tag, $value, $var, ... );
Retourne $value après avoir appelé toutes les fonctions attachées au $tag (dans un ordre précis)
do_action( $tag, $args );
Exécute toutes les fonctions attachées au $tag (dans un ordre précis)
add_filter( $tag, $function, $priority, $acccepted_args );
add_action( $tag, $function, $priority, $acccepted_args );
Attache une fonction au $tag dans l'ordre défini par $priority
/* twentyfifteen-child : functions.php */
add_action( 'twentyfifteen_credits', 'pehaa_credits' );
function pehaa_credits() {
echo 'Customized by PeHaa.';
}
/* twentyfifteen : footer.php */
do_action( 'twentyfifteen_credits' );
/* parent : functions.php */
require get_template_directory() . 'my_file.php';
on utilise :
/* parent : functions.php */
require apply_filters( 'my_file_directory', get_template_directory() ) . 'my_file.php';
ce qui permet d'ajouter et modifier 'my_file.php' dans le child :
/* child : functions.php */
add_filter( 'my_file_directory', 'my_stylesheet_dir' );
function my_stylesheet_dir() {
return get_stylesheet_directory();
}
Twitter: @PeHaa
Merci à tous et bon développement en 2015 !