Comprendre comment WordPress crée un code à partir des thèmes enfants

Si vous avez déjà apporté des modifications à un thème tiers, ou si vous utilisez un cadre de thème, vous connaissez les thèmes enfants.

Ils constituent une importante caractéristique de WordPress, vous offrant la flexibilité nécessaire pour personnaliser n’importe quel thème parent sans les perdre lorsque le thème est mis à jour. Je les utilise pour apporter des modifications sur des thèmes tiers, ou sur le thème du cadre que j’ai développé moi-même.

Cependant, il peut parfois être difficile de savoir si WordPress utilisera le code de votre thème parent ou de votre thème enfant. Lorsqu’il s’agit de fichiers de modèle, de feuilles de style et de fichiers de fonctions, il peut être difficile de déterminer lequel est utilisé et à quel moment.

Dans cet article, je vais démystifier tout cela. Je vais vérifier chaque type de fichier et déterminer quand WordPress va utiliser le code de votre thème parent et quand il va utiliser celui de votre thème enfant.

Feuilles de style

Votre thème parent et votre thème enfant auront tous deux une feuille de style, car aucun thème ne fonctionnera sans feuille de style.

Dans votre thème enfant, votre feuille de style contiendra une ligne de code qui indique à WordPress qu’il s’agit d’un thème enfant et lequel est le thème parent.

Voici le thème que j’utilise pour mon site Web, qui est un thème enfant. Il s’ouvre sur un texte commenté qui dit à WordPress ce qui se passe avec le thème :

 

/*

Theme Name: LearnWP

Theme URI: http://rachelmccollin.com/

Description: Theme for Learn WP website. Child theme of compass framework

Author: Rachel McCollin

Template: compassframework

Version: 1.0

Tags: two-columns, fluid, responsive, mobile, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, editor-style

*/

 

Remarquez la ligne qui commence par template. Cela indique à WordPress qu’il s’agit d’un thème enfant et que le thème du dossier compassframework est le thème parent.

WordPress utilisera les fichiers de modèle de thème à la fois du thème enfant et du thème parent (d’autres fichiers seront disponibles sous peu). Mais si vous voulez retirer le style de votre thème parent, vous devez le mettre en file d’attente dans le fichier functions.php de votre thème enfant.

Ajoutez ce qui suit au fichier functions.php de votre thème enfant. Si votre thème n’a pas ce fichier, créez-en un en vous assurant d’ajouter une balise ouvrante <?php au début du fichier (vous n’avez pas besoin d’ajouter une balise fermante à la fin).

 

function wpmu_enqueue_parent_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}

add_action( ‘wp_enqueue_scripts’, ‘wpmu_enqueue_parent_styles’ );

 

Le code ci-dessus suggère que le thème parent n’a qu’une seule feuille de style. Si le vôtre a plusieurs feuilles de style, alors vous devrez mettre chacune d’elles en file d’attente.

Une fois que c’est fait, les styles de votre thème parent seront utilisés sur votre site. Si vous ajoutez également des styles à votre thème enfant, vous devrez également mettre cette feuille de style en file d’attente. Le code ci-dessous garantit que s’il y a duplication, les styles du thème enfant remplaceront ceux du thème parent :

function wpmu_enqueue_styles() {

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’ ), );

}

add_action( ‘wp_enqueue_scripts’, ‘wpmu_enqueue_styles’ );

Cette opération met d’abord la feuille de style du thème parent en file d’attente, puis celle du thème enfant. Comme les styles du thème enfant sont retirés en dernier, ils remplaceront ceux du thème parent si vous ajoutez un style pour un élément qui a déjà un style dans le thème parent. Elle définit également la feuille de style du thème parent comme étant attachée à la feuille de style du thème enfant, garantissant que la feuille de style du thème enfant ne peut être chargée que si celle du thème parent l’est déjà.

Remarque : vous avez peut-être déjà vu une ligne dans la feuille de style du thème enfant utilisée pour cet effet dans le passé. Ce n’est plus la meilleure pratique, car cela ralentit le chargement des feuilles de style. Vous devriez plutôt utiliser le fichier de fonctions.

Fichiers de modèle / Template

Examinons maintenant les fichiers de modèle de thème. Celui que WordPress utilisera pour afficher une page sur votre site dépendra de deux choses : la hiérarchie des modèles et le fait que vous utilisez un thème enfant.

Supposons donc que vous visualisez la page d’archive de la catégorie « WordPress » sur votre site. WordPress utilisera la hiérarchie des modèles pour trouver le fichier le plus pertinent :

• Un fichier de modèle d’archive pour cette catégorie spécifique, en utilisant le fichier slug : category-wordpress.php
• Un fichier de modèle d’archive pour cette catégorie spécifique, en utilisant l’ID : category-23.php
• Un fichier d’archive de catégorie générale : category.php
• Un fichier d’archive général: php
• Un fichier fourre-tout : php

WordPress les recherchera dans les thèmes parent et enfant. Lorsqu’il trouvera le premier fichier dans la hiérarchie, il l’utilisera, que ce soit dans le thème parent ou dans le thème enfant.

Il y a une exception : lorsque le fichier de modèle le plus pertinent a une version dans les thèmes parent et enfant, il utilise le fichier du thème enfant, et ignore celui du thème parent. C’est l’une des utilisations les plus courantes des thèmes enfant.

Voici quelques exemples, en utilisant l’exemple de la catégorie ci-dessus :

• Si votre thème enfant contient les fichiers php et index.php, et votre thème parent les fichiers category.php et index.php, alors WordPress utilisera le fichier category.php du thème parent parce que c’est le plus haut dans la hiérarchie.
• Si votre thème enfant contient les fichiers php et index.php, et votre thème parent les fichiers archive.php et index.php, il utilisera le fichier archive.php de votre thème enfant.
• Si votre thème enfant contient les fichiers php et index.php, et votre thème parent les fichiers archive.php et index.php, il utilisera le fichier category.php du thème enfant, car il est le plus haut dans la hiérarchie.

Ainsi, si vous voulez remplacer un fichier de modèle dans votre thème parent, créez une copie de ce fichier dans le thème enfant avec le code que vous voulez.

Fonctions

Le dernier type de fichier affecté par les thèmes enfant et parent est le fichier de fonctions de thème. Ceci s’applique également aux fonctions ajoutées à vos thèmes via les fichiers inclus.

Les fonctions de votre thème enfant se chargeront avant celles de votre thème parent, en supposant qu’elles soient attachées au même crochet. C’est l’inverse des feuilles de style et des fichiers de modèle et cela signifie que si vous ne faites pas attention, les fonctions de votre thème parent pourraient remplacer celles de votre thème enfant.

Il est important de noter que nommer une fonction dans votre thème enfant avec le même nom que dans votre thème parent peut provoquer une erreur. WordPress n’aime pas quand deux fonctions ont le même nom. L’exception à cette règle est lorsque vous utilisez une fonction dans votre thème enfant pour remplacer une fonction extensible dans votre thème parent.

Fonctions extensibles

Vous pouvez reconnaître une fonction extensible parce qu’elle sera enveloppée dans une vérification conditionnelle pour une autre fonction portant le même nom. En d’autres termes, le thème parent vérifie si une fonction portant le même nom a déjà été lancée via le thème enfant. Si c’est le cas, il ne lance pas la fonction dans le thème parent. Ainsi, si votre thème parent possède des fonctions extensibles, vous pouvez facilement les remplacer dans votre thème enfant.

if ( ! function_exists( ‘compass_posted_on’ ) ) {

function compass_posted_on() { ?>

<section class= »entry-meta »>

<?php echo get_the_date(); ?>

</section>

<?php }

}

add_action ( ‘compass_postmeta_before’, ‘compass_posted_on’ );

Dans un thème enfant, je peux nommer une autre fonction avec le même nom qui l’écrasera :

Celle-ci sera lancée à la place de la fonction du thème parent, à cause de cette vérification conditionnelle. Vous n’avez pas besoin d’utiliser add_action() dans votre thème enfant pour lancer la fonction, car la fonction add_action() dans le thème parent le fera pour celle de votre thème enfant. La raison est que celle-ci n’est pas concernée par cette vérification conditionnelle.

Utiliser le paramètre de priorité pour lancer les fonctions du thème parent en premier

Quand je dis que les fonctions de votre thème enfant seront lancées avant celles de votre thème parent (lorsqu’elles sont attachées au même crochet), je suppose qu’elles n’ont pas la priorité qui leur est attribuée.

La priorité est le troisième paramètre des fonctions add_action() et add_filter(). Plus élevé est le chiffre que vous lui attribuez, plus tard la fonction sera lancée. Ainsi, si un crochet a quatre fonctions attachées à lui, avec la priorité accordée à 5, 10, 20 et 30, alors elles seront lancées dans l’ordre numérique croissant. Peu importe les chiffres que vous utilisez. J’ai tendance à utiliser des chiffres arrondis afin d’avoir un espace vide au cas où j’aurais besoin d’insérer une autre fonction à une date ultérieure.

Si vous n’appliquez aucune priorité à une fonction, WordPress lui donne la priorité par défaut de 10. Donc s’il y a une fonction dans votre thème parent sans priorité attachée, et que vous voulez lancer une autre fonction sur le même crochet depuis votre thème enfant, et qu’elle soit lancée après celle du thème parent, donnez-lui une priorité supérieure à 10.

Prenons la fonction extensible que j’ai utilisée auparavant, qui n’a aucun paramètre de priorité pour la fonction add_action(). Si vous voulez lancer un autre code immédiatement après l’avoir lancé à partir de votre thème enfant, utilisez la priorité comme suit :

function compasschild_postmeta() { ?>

<section class= »entry-meta2″>

<?php the_author_posts_link(); ?>

</section>

<?php }

add_action ( ‘compass_postmeta_before’, ‘compasschild_postmeta’, 20 );

Ceci ajoutera une autre section avec le nom de l’auteur de l’article et un lien vers sa page d’archive, après la date.

Supprimer le crochet / le  hook d’une fonction

Si une fonction de votre thème parent n’est pas extensible, mais que vous voulez renommer une fonction dans votre thème enfant pour l’écraser, vous pouvez toujours le faire. Vous devrez supprimer le crochet de la fonction du thème parent pour la lancer, ce qui signifie qu’elle ne se lancera pas. Vous renommez ensuite une fonction avec un nom différent dans votre thème enfant pour l’écraser, et l’attacher au même crochet.

Imaginons que ma fonction compas_posted_on() extensible dans l’exemple ci-dessus n’est pas extensible. Dans le thème parent, elle ressemble à ceci :

fonction compass_posted_on () {?>

< section class =  » entry-meta  » >

<? php echo get_the_date (); ? >

</ section >

<? php }

add_action ( ‘ compass_postmeta_before ‘ , ‘ compass_posted_on ‘ );

Pour l’écraser, vous devez d’abord supprimer le crochet à l’aide de la fonction remove_action(), que vous attachez au crochet wp_head :

fonction wpmu_remove_compass_posted_on_action () {

remove_action (‘compass_postmeta_before’, ‘compass_posted_on’);

}

add_action (‘wp_head’, ‘wpmu_remove_compass_posted_on_action’);

Vous codez ensuite une nouvelle fonction dans votre thème enfant avec un nom différent, et l’attachez au même crochet :

fonction compasschild_posted_on () {?>

< section class =  » entry-meta  » >

<? php echo ‘ <h3> Aujourd’hui ‘ s Date de : < / h3 > ‘ ; ?>

<? php echo get_the_date (); ?>

</ section>

<? php}

add_action ( ‘ compass_postmeta_before ‘ , ‘ compasschild_posted_on ‘ );

Comprendre les thèmes parent et enfant vous aidera à mieux les utiliser

Le guide ci-dessus vous aidera à mieux comprendre ce que WordPress va faire avec le code des thèmes parent et enfant lorsque vous utilisez des thèmes enfant. Il vous aidera à résoudre les problèmes lorsque le code que vous attendez n’est pas utilisé. Il vous aidera également à créer un code amélioré et plus efficace dans vos thèmes enfant.