Comment personnaliser le thème WordPress avec le thème enfant ?

Si vous avez créé votre propre site internet en utilisant WordPress vous êtes sûrement passé par un thème. Que vous l'ayez téléchargé d'un répertoire de thème ou bien utilisé par défaut, il arrive un moment où ce dernier ne correspond pas exactement à vos attentes.

Comment personnaliser votre thème afin qu'il corresponde à votre vision ?

Il existe plusieurs méthodes pour personnaliser un thème :

Si votre site utilise un thème fait sur-mesure pour votre site, vous pouvez le modifier directement car vous n'avez aucun risque de perdre toutes vos modifications à la prochaine mise à jour. 

Malgré cela, faites toujours attention quand vous modifiez un thème directement même s'il est personnalisé. Il est conseillé de toujours garder une copie, "propre", sans modifications de votre thème. Vous pouvez également créer un thème enfant à partir de votre thème personnalisé.

Si vous utilisez un thème téléchargé via un répertoire de thèmes, il est conseillé de ne jamais modifier directement le thème. À la prochaine mise à jour du thème vos modifications seront écrasées et vous perdrez toutes vos personnalisations. Ceci est également valable si vous modifiez une extension WordPress.

Si vous souhaitez faire des modifications fonctionnelles à votre thème, il est conseillé de passer par une extension. Une extension peut être très simple comme l'ajout d'un champ dans une publication. 

Créer une extension plutôt qu'ajouter du code dans le fichier functions.php permet de garder les modifications si vous changez de thème dans le futur. Il existe un grand nombre d'extensions gratuites qui permettent d'étendre les fonctionnalités de WordPress. Vous pouvez les retrouver sur le répertoire d'extensions du logiciel libre : https://fr.wordpress.org/plugins/

Répertoire d'extensions de WordPress

Dans les extensions les plus célèbres on retrouve Woocommerce qui permet de transformer votre site WordPress en site ecommerce. 

Si vous hésitez entre la création d'une extension ou l'ajout du code directement dans le thème posez-vous cette question : 

• Est-ce que je souhaite garder ces modifications si je modifie le design de mon site dans le futur ? 

Si la réponse est oui alors ces modifications sont fonctionnelles et vous devriez créer ou installer une extension.

La dernière option pour personnaliser votre thème est la création d'un thème. Si vous souhaitez faire des modifications à la conception de votre thème, comme des modifications graphiques, il est conseillé de créer un thème enfant.

Un thème enfant fonctionne en duo avec son thème parent. Quelques lignes de code indiquent à WordPress qu'il doit utiliser le thème parent comme base tout en remplaçant certaines parties par les informations contenues dans le thème enfant. 

Ainsi vos changements faits dans le thème enfant viendront outrepasser les informations contenues dans le thème parent.

Un thème enfant a besoin de deux fichiers pour fonctionner :

Si un fichier n'est pas présent dans le thème enfant, WordPress utilisera ceux du thème parent pour fonctionner.

Vous pouvez ajouter tous types de fichiers dans votre thème enfant comme par exemple les fichiers modèles ou des polices d'écriture.

Si vous souhaitez creuser la gestion des fichiers par WordPress je vous conseille ce site https://wphierarchy.com/ qui explique comment WordPress choisit quel modèle utiliser.

Tout d'abord vous pouvez retrouver des informations sur les thèmes enfants ainsi que leur création dans la documentation WordPress : https://developer.wordpress.org/themes/advanced-topics/child-themes/

Comme expliqué précédemment, un thème enfant a besoin de 2 fichiers pour fonctionner. Nous allons tout d'abord créer le fichier style.css

Commencez par créer un nouveau dossier dans votre installation WordPress à cette adresse wp-content/themes. Il est déconseillé de faire cela sur un site en production, passez toujours par un site test que vous pourrez migrer sur votre site en production plus tard.

Dans le nouveau dossier de votre thème enfant, créez le fichier style.css et ajoutez ces indications :

/*
Theme Name:   Twenty Fifteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentyfifteen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twentyfifteenchild
*/

Ce sont les fameuses informations indiquant que ce thème est un thème enfant et qu'il est lié à un thème parent ici twentyfifteen. 

Modifiez les informations en fonction de votre thème. La ligne la plus importante est celle de la Template. Cette dernière indique quel est le thème parent.

Vous devriez voir votre thème enfant apparaître dans la liste des thèmes de wordpress (Apparence/thèmes). Avant de pouvoir l'activer nous devons créer le deuxième fichier, functions.php

C'est dans ce fichier que vous pourrez faire appel aux différents hooks mis à disposition par WordPress. Nous devons également faire appel à la feuille de style que nous venons tout juste de créer ainsi qu'à la feuille de style du thème parent.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Maintenant que vous avez créé la base de votre thème enfant, vous pouvez l'activer directement dans votre interface WordPress : Apparence → Thèmes

Activer son thème enfant

Conclusion

Les thèmes enfants permettent de personnaliser votre thème sans prendre le risque de tout perdre ou de "casser" le thème que vous venez d'acheter. 

Le thème enfant cherche à améliorer le thème parent et non le repenser totalement. Si c'est votre cas, il est peut-être plus judicieux de changer de thème parent ou de créer un thème sur-mesure. 

N'ayez pas peur de mettre à jour votre thème parent, ce dernier n'impactera pas les changements que vous avez faits sur votre thème enfant.

Si vous avez aimé cet article et que vous vous posez des questions sur votre architecture technique, n'hésitez pas à contacter Digital 64. Nos experts vous conseilleront sur les meilleures pratiques afin d'améliorer la performance et la sécurité de votre site.