Votre guide ultime pour travailler avec les thèmes enfants WordPress

Si vous souhaitez personnaliser les thèmes que vous achetez chez HeroThemes, peut-être si vous créez des sites Web pour vous-même ou vos clients en utilisant une conception sur mesure, vous aurez besoin de pouvoir exploiter la puissance des thèmes enfants WordPress.

À la base, l'utilisation de thèmes enfants vous rendra plus efficace - conserver le code que vous utilisez pour chaque projet dans votre propre thème parent, ou utiliser un thème parent prêt à l'emploi comme l'un des nôtres, signifiera que vous adhérez à Principes DRY (Ne pas se répéter).

Mais poussé plus loin, vous pouvez utiliser des thèmes enfant et parent pour créer des réseaux de sites avec une base de code de base, vous pouvez créer des thèmes personnalisés basés sur des cadres de thème tiers, ou vous pouvez même créer votre propre thème parent avancé à utiliser comme cadre de thème . Dans cet article, je vais donner un aperçu rapide de l'essentiel des thèmes enfants, puis je vais vous montrer quelques techniques plus avancées. Vous apprendrez:

• comment utiliser un thème enfant pour adapter un thème parent tiers ou un cadre de thème aux besoins de votre projet
• comment WordPress hiérarchise les fichiers de modèle dans chacun des thèmes parent et enfant
• comment remplacer les fonctions du thème parent dans le fichier de fonctions de votre thème enfant.

Comprendre les thèmes parent et enfant

En théorie, n'importe quel thème peut jouer le rôle de thème parent, bien que certains soient mieux conçus pour ce rôle (dont le nôtre !). Si vous utilisez l'un de nos thèmes et que vous souhaitez le modifier pour votre propre projet, il est préférable d'utiliser un thème enfant pour ce faire plutôt que de pirater le thème principal, ce qui signifie que vous perdrez toutes vos modifications lors de la mise à jour. le thème aux versions futures. Pour créer un thème enfant, il vous suffit de créer un nouveau thème et d'ajouter ce qui suit au début de sa feuille de style. Mon exemple ci-dessous utilise le thème HeroThemes HelpGuru comme parent, mais vous pouvez utiliser n'importe quel thème, y compris un autre produit HeroTheme tel que KnowAll.

Commencez à créer votre base de connaissances dès aujourd'hui !

Notre thème KnowAll comprend un thème enfant pour vous aider à personnaliser votre site de base de connaissances

Obtenir le thème

/*
Theme Name: My child theme
Theme URI: URL of the theme or site it's used for
Description: Description of what the theme is for and its main features.
Author: Your name
Template: helpguru
Version: 1.0
*/
@import url("../helpguru/css/style.css");

Les lignes importantes sont ces deux :

Template: helpguru
@import url("../helpguru/css/style.css");

La première section spécifie le modèle, qui indique à WordPress qu'il s'agit d'un thème enfant et que son parent est le thème HelpGuru. Notez que vous utilisez ici le nom du dossier du thème parent et non le nom du thème (donc ci-dessus j'ai utilisé 'helpguru', pas 'HelpGuru').

La deuxième section importe la feuille de style du thème parent, ce qui signifie que tous les styles du thème parent seront activés dans votre thème enfant. Vous ajoutez ensuite votre propre style sous cette déclaration @import - cela signifie que le style des deux thèmes sera utilisé, mais lorsqu'une déclaration existe dans les deux feuilles de style pour le même élément, le CSS du thème enfant prévaudra en raison de la cascade (car le style de votre thème enfant le style vient après le style du thème parent).

Un thème enfant peut consister en une feuille de style et rien d'autre si vous le souhaitez, auquel cas tout ce que vous l'utiliserez pour faire est de remplacer une partie du style du thème parent. Vous pouvez également ajouter des fichiers de modèle supplémentaires et/ou un fichier de fonctions, auquel cas vous devrez comprendre comment WordPress accède aux fichiers de modèle à partir de vos thèmes parent et enfant.

Fichiers de modèle de thème parent et enfant

La façon dont WordPress utilise les fichiers modèles dans les thèmes parents et enfants est assez simple. Lorsqu'une page donnée (ou une publication, ou tout autre type de contenu) est affichée, WordPress utilisera le fichier de modèle le plus pertinent du thème parent ou enfant selon la hiérarchie des modèles. S'il trouve deux versions du même fichier modèle, il utilisera celle du thème enfant. Cela signifie que les fichiers de modèle de votre thème enfant remplaceront les fichiers de modèle du thème parent dans deux scénarios :

• si votre thème enfant contient un fichier modèle qui est plus haut dans la hiérarchie que ceux du thème parent ;
• ou si vos thèmes parent et enfant contiennent tous deux une version du fichier de modèle requis.

Décider des fichiers de modèle de thème parent ou enfant

WordPress utilisera la hiérarchie des modèles pour déterminer le fichier de modèle à utiliser, mais cela interagit avec les fichiers que vous avez dans chacun de vos thèmes parent et enfant. Pour faire simple, WordPress passe par trois étapes :

1. Il identifie le type de contenu affiché.
2. Il parcourt la hiérarchie des modèles jusqu'à ce qu'il trouve un fichier pour afficher ce contenu, dans le thème parent ou enfant.
3. Si le fichier est présent à la fois dans le thème parent et enfant, il utilise celui du thème enfant.

Illustrons cela par un exemple. Le tableau ci-dessous montre l'ensemble des fichiers modèles dans deux thèmes hypothétiques, dont l'un est l'enfant de l'autre. Les fichiers que j'ai mis en surbrillance sont prioritaires.

Ainsi, dans l'exemple ci-dessus, regardons quels fichiers modèles seraient utilisés pour afficher certains types de contenu :

• Les publications uniques pour le type de publication personnalisé 'produit' seraient affichées à l'aide single-product.php à partir du thème enfant.
• Les messages uniques pour d'autres types de messages (y compris les messages normaux) seraient affichés en utilisant single.php du thème enfant.
• Les pages statiques seraient affichées en utilisant page.php du thème parent.
• Les listes de la catégorie widgets seraient affichées à l'aide category-widgets.php du thème enfant.
• D'autres listes de catégories seraient affichées en utilisant category.php du thème parent.
• D'autres listes d'archives seraient affichées en utilisant archive.php du thème parent.
• Les résultats de la recherche seraient affichés à l'aide de search.php à partir du thème parent.
• 404 pages seraient affichées en utilisant 404.php du thème parent.
• D'autres pages sans fichier de modèle spécifique seraient affichées en utilisant index.php du thème enfant.

Aller plus loin - Remplacer la fonctionnalité du thème parent

En plus de remplacer ou de compléter les fichiers CSS et/ou modèles dans un thème parent, vous pouvez utiliser un thème enfant pour remplacer la fonctionnalité dans le thème parent ou pour ajouter des fonctionnalités supplémentaires.

Avertissement! Si vous utilisez uniquement votre thème enfant pour ajouter des fonctionnalités supplémentaires, vous feriez peut-être mieux d'écrire un plugin. Malheureusement, les fichiers de fonctions dans les thèmes parent et enfant n'interagissent pas de la même manière que les feuilles de style, en fait ils fonctionnent dans le sens opposé (déroutant, je sais). WordPress appelle les fonctions de votre thème parent après celles de votre thème enfant, ce qui signifie qu'elles peuvent remplacer les fonctions du thème enfant. Je sais que cela semble un peu pénible : vous avez créé un thème enfant car c'est ce que vous voulez sur votre site, n'est-ce pas ? Eh bien, heureusement, il existe des moyens de surmonter cela. La première méthode est celle que vous utilisez dans votre thème enfant, et c'est pour définir la priorité lors de l'attachement de vos fonctions à l'action ou aux crochets de filtre pertinents. La seconde se fait dans le thème parent, et c'est pour rendre vos fonctions pluggables. J'y reviendrai dans un instant, mais regardons d'abord la méthode dans votre thème enfant.

Utilisation de la priorité pour remplacer la fonctionnalité du thème parent

Pour activer chaque fonction que vous ajoutez dans votre thème enfant, vous devrez l'attacher à un crochet d'action ou à un crochet de filtre à l'aide add_action() ou add_filter() . Les add_action() et add_filter() ont trois paramètres :

• $tag - l'identifiant unique de l'action ou du hook de filtre
• $function_to_add – le nom de votre fonction
• $priority - la priorité avec laquelle vous voulez accrocher votre fonction (dont plus très prochainement)

Avec add_filter() vous pouvez utiliser un quatrième paramètre facultatif, $arguments , mais ce n'est pas particulièrement pertinent pour les thèmes enfants. Dans la plupart des cas, seuls les deux premiers paramètres (tous deux obligatoires) sont utilisés, mais vous pouvez utiliser le paramètre facultatif $priority pour remplacer une fonction du thème parent par la fonction de votre thème enfant. Plus la priorité est élevée, plus il se charge tard : la valeur par défaut est 10 , donc si le thème parent ne spécifie pas de priorité, vous définissez simplement la priorité de votre thème enfant sur un nombre supérieur à 10. Voyons comment cela travaux. Imaginez que vous travaillez avec un enfant du thème HelpGuru et que vous souhaitez remplacer la fonctionnalité du menu et ajouter la vôtre. Ce thème inclut la fonction ht_theme_setup() pour configurer le thème (y compris l'enregistrement des menus, l'ajout de la prise en charge des images en vedette, etc.), qui est attachée au crochet d'action after_setup_theme . Le code dans le fichier de fonctions de HelpGuru est le suivant :

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}
add_action( 'after_setup_theme', 'ht_theme_setup' );

Pour remplacer les éléments de la fonction ht_theme_setup() (mais pas tous : nous y reviendrons sous peu) dans votre thème enfant, vous devez écrire une fonction qui remplace les éléments de la fonctionnalité fournie par HelpGuru et l'attacher à l'action after_setup_theme hook, en spécifiant une priorité supérieure à 10 :

function my_theme_setup() {
// contents of function
}
add_action( 'after_setup_theme', 'my_theme_setup', 15 );

Lorsque WordPress rencontre ces fonctions attachées au même crochet, il déclenche d'abord celle de priorité inférieure, c'est-à-dire celle du thème parent. Il déclenchera alors celui qui a la priorité la plus élevée à partir de votre thème enfant, ce qui signifie qu'il peut remplacer la fonction du thème parent. Comme je l'ai mentionné ci-dessus, il existe une autre méthode, qu'il est recommandé d'écrire dans vos thèmes afin qu'ils puissent être plus facilement utilisés comme thèmes parents, et c'est de rendre vos fonctions enfichables.

Utilisation de fonctions enfichables pour autoriser un remplacement de thème enfant

Comme WordPress passe la fonction dans le thème parent après celles de votre thème enfant, vous pouvez coder les fonctions de votre thème parent afin qu'elles recherchent une fonction portant le même nom dans le thème enfant et si elle existe, la fonction du thème parent n'est pas passé. Vous faites cela avec une instruction conditionnelle, comme celle que nous avons vue ci-dessus dans HelpGuru :

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}

Si aucune fonction du même nom n'a déjà été passée (par exemple dans le thème enfant), la fonction du thème parent sera passée. Mais si WordPress a déjà rencontré une fonction portant ce nom, il ignorera la fonction pluggable (c'est-à-dire celle du thème parent). Pour que cela fonctionne, il vous suffit de créer des fonctions dans votre thème enfant avec le même nom que celles de votre thème parent que vous souhaitez remplacer. Donc, pour remplacer la fonction ht_theme_setup() dans son intégralité, vous devez l'utiliser dans votre thème enfant :

function ht_theme_setup() {
// contents of function
}

C'est ça! Écrivez simplement une autre fonction avec le même nom et elle remplacera celle du thème parent. Remarque : cette technique ne fonctionnera que si vous créez votre propre thème parent - ne soyez pas tenté de modifier le fichier de fonctions dans un thème parent tiers pour les rendre pluggables. Après tout, tout l'intérêt de créer un thème enfant est que vous ne touchez pas au parent !

Résumé

Comme j'espère l'avoir démontré, travailler avec des thèmes enfants peut augmenter votre efficacité en tant que développeur WordPress, surtout si vous développez des sites personnalisés pour des clients ou pour vous-même. À tout le moins, l'utilisation d'un thème enfant d'un thème existant tel que l'un de nos HeroThemes peut rendre votre flux de travail de développement plus rapide et plus efficace, car cela vous évite de faire le même travail encore et encore.

Vous pouvez aller plus loin en utilisant les fichiers de modèle et le fichier de fonctions du thème enfant pour remplacer ou compléter les fonctionnalités du thème parent. Et si vous voulez vraiment exploiter au maximum les thèmes enfants, vous pouvez créer votre propre thème parent, ce qui vous donne un point de départ rapide pour tous les nouveaux projets et vous permet d'ajouter beaucoup plus à vos thèmes enfants avec moins d'effort que de partir de zéro. .