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 ces 4 lignes :

/*
Theme Name:   Nom du Thème Enfant
Template:     repertoire-thème-parent
*/

1. Theme Name: donner un nom au thème enfant
2. Template: écrire le nom du répertoire du thème parent

Exemple :

/*
Theme Name:   Twenty Nineteen Child
Template:     twentynineteen
*/

functions.php

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

<?php
  add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
  function my_theme_enqueue_styles() {
   
      $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
   
      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')
      );
  }

1. Renommer la fonction my_theme_enqueue_styles et son appel dans le add_action
2. 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().

Exemple :

<?php
  add_action( 'wp_enqueue_scripts', 'twentynineteenchild_enqueue_styles' );
  function twentynineteenchild_enqueue_styles() {
   
      $parent_style = 'twentynineteen-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')
      );
  }

Une fois votre thème enfant a été créé, il est visible sur le back office de votre site web et vous pouvez l'activer.

Sinon, il y a un message d'erreur en bas de la page.

Exercice #1

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.

Vous pouvez aussi ajouter de nouveaux fichiers dans le thème enfant, comme des fichiers modèles (template files).

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 #2

Exercice #3

Conclusion

• Fichier modèle : copier et modifier. style.css, functions.php commencer de zéro