Qu’est-ce qu’un Child Theme et pourquoi utiliser cette technique ?
Un Child Theme est la methode recommandée pour modifier un thème existant. Un thème enfant est un thème qui hérite des mêmes fonctionnalités que son parent.
Parce qu’un thème, aussi optimisé qu’il soit, n’est pas toujours à notre goût, que les changements apportés directement dans ce thème seront écrasés à la prochaine mise à jour, que le temps de développement est long et laborieux, WordPress met à notre disposition un outil très utile qui est le Child Theme.
Aucune installation de plugin n’est nécessaire pour utiliser cette technique. Tout ce dont vous aurez besoin, ce sont les accès FTP à votre serveur et un bon éditeur de texte.
Création du Child Theme
Pour cette démonstration, nous utiliseront le thème WordPress Twenty Sixteen.
Le Child Theme est très simple à mettre en place. Il suffit d’un répertoire (/twentysixteen_child) et d’une feuille de style à l’intérieur ce répertoire (style.css). C’est tout ce qu’il faut pour créer le child theme mais « functions.php » est nécessaire afin de mettre correctement en file d’attente les feuilles de style.
Connexion au serveur via FTP
Tout d’abord, pour créer notre Child Theme de Twenty Sixteen, nous devront nous connecter via FTP à notre serveur web et naviguer jusqu’au répertoire contenant les thèmes wordpress.
Création du répertoire et des fichiers nécessaires au child-theme
Une fois à l’intérieur du dossier themes/, nous allons créer un nouveau répertoire nommé « twentysixteen_child » et à l’intérieur de celui-ci, une feuille de style « style.css ».
Éditons maintenant le fichier style.css afin faire reconnaitre le nouveau thème par WordPress.
À l’aide d’un éditeur de texte, nous allons ajouter ces lignes à l’intérieur du fichier.
twentysixteen/style.css
/* Theme Name: Twenty Sixteen Child Description: Twenty Sixteen Child Theme Author: Team-Ever Author URI: https://www.team-ever.com/ Template: twentysixteen Version: 0.1 */
Après avoir sauvegardé ce fichier sur notre serveur, le nouveau child-theme que nous venons de créer est disponible dans Apparences -> Thèmes.
Configuration du Child-Theme
Modifier le style
Pour modifier le style du child-theme, rien de plus simple. Il suffit d’ajouter au fichier style.css les régles CSS qui nous intéressent. Cette feuille de style sera chargée juste avant celle de son thème parent.
Ajouter/modifier des fonctions
La première fonction à créer est celle qui va mettre en file d’attente la feuille de style du thème parent pour le bon fonctionnement du child theme.
twentysixteen/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' );
}
Pour ajouter des fonctions ou modifier des fonctions existante, il faudra créer, à la racine du Child-Theme, un fichier « functions.php » qui lui aussi sera chargé avant celui du thème parent.
Voici un exemple de contenu du « functions.php » de notre Child-Theme :
if (!function_exists('blog_favicon')) {
function blog_favicon() {
echo '';
}
add_action('wp_head', 'blog_favicon');
}
Modification des templates
Chaque template du thème parent peut facilement être écrasé (override) par le Child-Theme en créant un fichier du même nom et possédant la même position dans l’arborescence que le fichier à modifier dans le thème parent.
Par exemple, si l’on veut créer un nouveau template pour « twentysixteen/css/editor-style.css », il faudra créer le fichier « twentysixteen_child/css/editor-style.css » et celui-ci sera chargé à la place du fichier original.
Conclusion
Avec un Child-Theme, le travail de développement sur un thème existant est beaucoup plus simple et accessible. Aussi, lors de mise à jour du thème parent, les modifications apportées restent intactes. Cela permet de customiser le thème à souhait et en même temps de rester à jour dans les fonctionnalités et les performances.
En espèrant que ce tuto vous sera utile ! = )
Imprimer
Laisser un commentaire