Apparition Child Theme

Apparition Child Theme: Comprendre et Créer un Thème Enfant WordPress

L’apparition d’un thème enfant se révèle être une solution pratique et efficace pour ceux qui souhaitent personnaliser leur site WordPress sans toucher directement au code du thème parent. Dans cet article, nous allons explorer les thèmes parents et enfants, comment créer votre propre thème enfant avec des exemples concrets, et les bonnes pratiques à adopter pour maximiser votre expérience de développement.

Qu’est-ce qu’un thème parent et un thème enfant ?

Thèmes parents

Un thème parent est un thème complet, prêt à être installé et activé sur WordPress. Tous les thèmes qui ne sont pas spécifiquement des thèmes enfants fonctionnent comme des thèmes parents. Ils contiennent tous les fichiers nécessaires selon la documentation sur la structure des thèmes. Pour devenir un thème parent, il n’y a rien de spécial à faire, mis à part s’assurer que tous les fichiers requis sont présents.

Thèmes enfants

Un thème enfant est basé sur un thème parent et en hérite toutes les fonctionnalités et le design. Ce qui distingue un thème enfant, c’est la possibilité de modifier le thème parent sans toucher à son code. Cela peut permettre d’effectuer des changements de style ou des personnalisations plus élaborées tout en gardant le thème parent à jour sans perte de modifications. En somme, les thèmes enfants permettent :

• De rendre vos personnalisations portables et réplicables.
• De garder les personnalisations séparées du thème parent.
• D’éviter la perte de modifications lors des mises à jour du thème parent.
• De gagner du temps sur le développement, car vous n’écrivez que le code dont vous avez besoin.
• De constituer une première étape vers la création de thèmes complets.

Les thèmes petits-enfants

Actuellement, la création de thèmes petits-enfants n’est pas possible dans la hiérarchie standard des thèmes, qui ne comprend que des thèmes parents et enfants. Cependant, en matière de construction de thèmes de blocs, d’autres niveaux peuvent être disponibles sur l’interface avant du site, notamment des personnalisations faites par les utilisateurs. Ces dernières agissent comme une sorte de “thème petit-enfant”, bien que leur gestion se fasse via la base de données et non depuis le système de fichiers.

Comment créer un thème enfant

Pour illustrer la création d’un thème enfant, prenons comme exemple le thème par défaut “Twenty Twenty-Four” fourni avec WordPress.

Étape 1 : Créer un dossier pour le thème enfant

Commencez par donner un nom à votre thème enfant. Pour ce guide, appelons-le “Grand Sunrise”. Vous devez créer un nouveau dossier dans le répertoire wp-content/themes et nommez-le grand-sunrise.

Étape 2 : Créer le fichier style.css

Ensuite, créez un fichier nommé style.css, qui est le fichier absolument nécessaire pour qu’un thème enfant soit reconnu. Tous les fichiers style.css doivent contenir un “File Header” avec les champs requis spécifiés dans la documentation sur la feuille de style principale. Pour un thème enfant, il doit également inclure un champ Template :

css
/**
* Theme Name: Grand Sunrise
* Template: twentytwentyfour
* ...autres champs d'en-tête
*/

Étape 3 : Installer et activer le thème enfant

Pour activer votre thème enfant, assurez-vous qu’il se trouve dans wp-content/themes. La manière la plus simple consiste souvent à créer un fichier ZIP de votre thème et à l’importer via Apparence > Thèmes > Ajouter dans le tableau de bord WordPress. Une fois installé, allez dans Apparence > Thèmes et cliquez sur le lien “Activer” pour votre thème. Pour l’instant, il n’aura pas l’air différent de votre thème parent, car aucun changement n’a encore été effectué.

Étape 4 : Personnaliser votre thème enfant

Maintenant que vous avez un thème enfant actif, vous pouvez commencer à le personnaliser. Toutes les fonctionnalités documentées dans la documentation WordPress sont à votre disposition. Toutefois, certaines considérations doivent être gardées à l’esprit.

Chargement de style.css

Bien que cela soit optionnel pour les thèmes de blocs (car leur gestion de style se fait généralement par theme.json), il peut être nécessaire pour les thèmes classiques. Si vous souhaitez que tout code CSS dans style.css soit chargé, voici comment procéder dans votre fichier functions.php :

php
add_action( 'wp_enqueue_scripts', 'grand_sunrise_enqueue_styles' );
function grand_sunrise_enqueue_styles() {
wp_enqueue_style(
'grand-sunrise-style',
get_stylesheet_uri()
);
}

Si votre thème parent ne charge que sa propre feuille de style, vous devrez également enqueuer le style du thème parent :

php
add_action( 'wp_enqueue_scripts', 'grand_sunrise_enqueue_styles' );
function grand_sunrise_enqueue_styles() {
wp_enqueue_style(
'grand-sunrise-parent-style',
get_parent_theme_file_uri( 'style.css' )
);
}

Modèles, parties et motifs

Lorsque vous construisez un thème enfant, vous pouvez écraser n’importe quel modèle, partie ou motif existant dans le thème parent en ajoutant un fichier du même nom dans votre thème enfant. Vous pouvez également ajouter de nouveaux modèles et motifs qui n’existent pas dans le thème parent.

Utilisation de functions.php

Contrairement aux modèles, le fichier functions.php d’un thème enfant ne remplace pas ce fichier dans le thème parent. Au contraire, les deux fichiers sont chargés, avec le thème enfant chargé en premier. Cela vous permet d’ajouter de nouvelles fonctions sans risquer qu’elles soient supprimées lors d’une mise à jour du thème parent.

Il n’est pas recommandé de copier le code de functions.php d’un thème parent, car cela pourrait provoquer des erreurs dues à des noms de fonctions en double.

Référencement ou inclusion d’autres fichiers

Lorsque vous souhaitez inclure ou utiliser des fichiers personnalisés dans votre thème, il est essentiel d’utiliser la fonction appropriée pour obtenir le bon chemin ou URL basé sur le répertoire de votre thème enfant. Par exemple, pour inclure un fichier PHP via functions.php, utilisez get_theme_file_path() :

php
require_once get_theme_file_path( 'inc/functions-helpers.php' );

Pour faire référence à un fichier par son URL, comme une image ou une feuille de style, utilisez get_theme_file_uri().

Dans un dossier /assets/images, vous pourriez alors faire appel une image comme ceci :

php
$image = get_theme_file_uri( 'assets/images/bunny.jpg' );
<img src="<?php echo esc_url( $image ); ?>" alt="Bunny">

En conclusion

L’apparition d’un thème enfant est une stratégie formidable pour personnaliser un site WordPress tout en préservant la possibilité d’effectuer des mises à jour sur le thème parent sans perte d’optimisations. En suivant les étapes présentées, vous serez en mesure de créer et de personnaliser vos thèmes enfants à votre guise, facilitant ainsi votre parcours de développement web. Que vous soyez novice ou expert, l’utilisation des thèmes enfants comme l’Apparition Child Theme offre une flexibilité précieuse qui enrichit l’expérience de création sur WordPress.