Tutoriel d’installation d’un thème enfant

Par ce tutoriel, nous allons aborder la création d’un thème enfant sous WordPress, comme nous l’avons installé avec le tutoriel précédent.

Qu’est ce qu’un thème enfant ?

Un thème enfant est un thème basé sur le thème principal ( ou thème parent ). Il reprend toutes les fonctionnalités du parent, sans le modifier, ainsi on peut apporter des modifications, et en cas de mise à jour du thème parent, on ne perd rien.

Dans le principe, tout fichier placé dans le thème enfant et portant le même nom ( sensible à la casse ) prendra le dessus et écrasera le fichier d’origine (à l’exception de functions.php).

Comment faire le thème enfant ?

Pour faire ce thème enfant, nous allons avoir besoin du thème d’origine ( thème parent ) et de deux fichiers que nous allons créer.
On va commencer par allez dans le dossier wordpress, qui pour notre projet est le dossier « Source »

puis dans le dossier « wp-content »:

De la nous irons dans le dossier « themes », là où sont référencé les thèmes installés.

Nous allons prendre en explemple le thème twentyseventeen :

  • la première chose à faire est donc de créer le dossier du thème enfant : nous allons l’appeler « twentyseventeen-enfant » (on essaye de garder un nom explicite pour éviter de se perdre dans ses dossiers);
  • il faut allez dans le dossier enfant que l’on vient de faire, et créer deux fichiers (en passant par son IDE) : « functions.php » et « style.css » (parce que c’est comme ça !);

Pour la suite, nous allons coder un peu (ou copié/collé, au choix !).
Dans le ficher « functions.php », nous allons implanter le code qui va nous permettre d’écraser ou de combiner le fichier « style.css » du parent ( sans passer par le ‘@import css’).
Voici donc le code que l’on va intégrer :

<?php
/**
** activation theme
**/
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}

Une fois que nous avons fini de jouer avec le fichier « functions.php » ( ou copié/collé !), nous allons ensuite nous occuper du fichier « style.css » de ce beau thème enfant.
Voyons donc le code que nous allons intégrer :

/*
Theme Name: twentyseventeen-enfant
Description: Theme enfant de Moi WPServeur
Author: Moi
Author URI: https://www.site_de_blog.wp
Template: twentyseventeen
Version: 0.1.0
*/

Description ligne par ligne du fichier style.css :

-Theme Name : Le nom que je veux donner à mon thème enfant
-Description : La description de mon thème enfant celle qui apparaîtra dans mon gestionnaire de thème WordPress
-Author : L’auteur du thème enfant, en l’occurrence c’est vous
-Author URI : L’url du site de l’auteur parce qu’un peu de pub ne fait pas de mal
-Template : Le nom du thème parent en l’occurrence le nom du répertoire tel qu’il est écrit sur le FTP
-Version : La version de votre thème enfant à titre indicatif

Petits détails à ne pas oublier sinon votre thème enfant ne fonctionnera pas :

-Ne jamais mettre d’espace avant les deux points. "Theme Name:" fonctionnera mais "Theme Name :" ne fonctionnera pas
-Pour l’attribut Template : Si votre thème dans l’admin se nomme par exemple “wpserveur” mais que le nom affiché dans le répertoire FTP est “WPserveur” alors il faudra obligatoirement respecter la casse et écrire WPserveur et non wpserveur
-Pour le reste, vous pouvez ne rien mettre, cela fonctionnera quand même !

Et voilà, avec tout cela, votre thème enfant est créé !

PS : Désormais, si vous voulez modifier votre single.php ou votre header.php, rien de plus simple! Copiez-les du parent vers le thème enfant et modifiez-les ! Vous pouvez également ajouter des fonctions dans le functions.php de votre enfant, tout en sachant que le functions.php du parent sera toujours chargé en dernier et qu’il prendra le dessus en cas de fonctions identiques.

source : https://wpformation.com/theme-enfant-wordpress/

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.