M3202 — TD #4

Thème enfant

Pour personnaliser un thème (et pas pour en créer un), on ne modifie pas le thème, mais on crée un thème enfant.

Un thème enfant est un thème qui hérite le fonctionnement et le style d'un autre thème (dit parent), mais il peut avoir des règles CSS différentes et plus de fichiers modèles.

Pourquoi ne pas modifier directement un thème ?

Les thèmes ont des mises à jours. En utilisant un thème enfant, vous pouvez mettre à jour le thème parent sans écraser vos modifications

Quand on modifie un thème, on se limite à changer les règles CSS, modifier quelques textes...

Il est plus difficile de changer sa structure ou ses fonctionnalités. Donc cherchez bien votre thème parent.

Créer un thème enfant

Pour créer un thème enfant, il faut faire 3 choses :

1. créer un répertoire pour le thème enfant
2. créer son fichier style.css
3. créer son fichier functions.php

Le répertoire

Normalement, le thème enfant s'appelle comme son parent, mais avec le suffixe -child.

Il faut le placer dans wp-content/themes/

style.css

Dedans, il faut créer un fichier style.css qui contient au moins le code suivant :

/*
 Theme Name:   Twenty Sixteen Child
 Template:     twentysixteen
*/

En pratique, vous allez copier le fichier style.css du thème parent et modifier l'en-tête.

functions.php

Il faut aussi créer un fichier functions.php qui contient seulement ceci :

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // Remplacer parent-style
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
?>

En plus de renommer cette fonction et son appel dans le add_action, il faut modifier la valeur de la variable $parent_style (appelé handle).

Le handle du thème parent se trouve dans son fichier functions.php. Il faut chercher dans les fonctions wp_enqueue_style().

Exercice #1

Créez un thème enfant pour le thème «Twenty Sixteen» en suivant les étapes précédentes.

Vous devez rendre le répertoire racine de votre thème enfant.

Une fois votre thème enfant a été créé, il est visible sur le back office de votre site web.

Exercice #2

Prenez une capture d'écran du back office de votre site WordPress, où on voit le thème enfant.

Activez-le.

Personnaliser un thème enfant

Chaque fichier du thème enfant (sauf functions.php !) écrase le même fichier dans le thème parent.

• Si vous ne voulez pas modifier un fichier du thème parent, alors ne le mettez pas dans le thème enfant.
• Si vous voulez modifier un fichier du thème parent, copiez-le dans le répertoire du thème enfant et modifiez-le.

Typiquement, vous allez copier le fichier style.css, modifier l'en-tête, et puis vous modifiez les règles CSS comme vous voulez.

Vous pouvez aussi copier un fichier modèle (template file) pour le modifier : changer un texte, ajouter une classe...

Le fichier functions.php du thème enfant est chargé avant le fichier functions.php du thème parent, il ne l'écrase pas.

Si une fonctions dans le fichier functions.php du thème parent est entourée d'un if (functions_exists(..., alors on peut la redéfinir dans le fichier functions.php du thème enfant.

Exercice #3

Faites le nécessaire pour que, dans la page web d'un article, les liens vers les articles précédent et suivant soient comme dans le thème «Twenty Seventeen».

Exercice #4 (optionnel)

Remplacez les textes «X réflexions sur Y», «Laisser un commentaire» (le titre) et «Laisser un commentaire» (le bouton) par des textes moins sérieux.

Exercice #5 (optionnel)

Modifiez les règles CSS pour que, dans la page d'accueil, l'espace entre l'auteur de l'article et le contenu de l'article soit plus petit.