Créer Des Thèmes Enfants Pour Votre Framework de Thème WordPress

() translation by (you can also view the original English article)

Le framework de thème que vous avez conçu sera utilisé en tant que thème parent pour les sites que vous développez. En d'autres termes, à chaque fois que vous développerez un site original avec un nouveau design, des ajouts ou des modifications de fonctions, vous devrez créer un thème enfant.

La manière la plus évidente de procéder est de se lancer dans la conception de templates dans votre thème enfant pour qu'ils priment sur les templates de votre framework mais compte tenu des hooks d'action et de filtre que vous avez mis en place dans votre framework, cette approche n'est peut être pas toujours la bonne.

Dans cet article, je vais vous donner un aperçu de quelques techniques que vous pouvez appliquer pour utiliser au mieux votre framework et améliorer votre productivité.

Les points traités sont les suivants:

Créer des thèmes enfants primaires
Enrichir son code grâce aux "filter hooks" du framework
Ajouter du code avec les "action hooks" du framework
Créer des fichiers de template dans votre thème enfant
Quand utiliser plutôt un plugin

Créer des thèmes enfants primaires

Le but principal du développement de votre framework de thème est d'adopter le principe DRY (Don't Repeat Yourself, ne vous répétez pas), qui s'applique également à vos thèmes enfants.

Votre framework, contient le coeur de votre code pour de nouveaux projets. Créer un ou plusieurs thèmes enfants primaires à utiliser avec celui-ci peut vous permettre d'améliorer votre efficacité.

Lorsque vous décidez d'opter pour cette démarche, prenez en considération votre travail et les sites que vous développez:

Est-ce que vous créez beaucoup de sites pour des clients du même secteur d'activité qui ont des besoins similaires?
Est-ce que vous désirez proposer des templates de site à bas prix pour des plus petits clients?
Y a t-il des fichiers de template que vous avez tendance à créer pour la majorité de vos nouveaux projets?
Y a t-il des fonctionnalités que vous devez inclure sur certains sites mais pas sur d'autres? (Par exemple, j'utilise deux thèmes enfants primaires, un avec un module de commentaires et l'autre sans
Y a t-il des styles que vous avez tendance à utiliser pour la plupart de vos projets, ou utilisez vous des styles orientés objets ou des préprocesseurs CSS pour la plupart de vos projets?
Y a t-il des librairies ou des ressources que vous utilisez sur la plupart de vos projets, ou sur un proportion importante?
Avez-vous deux ou trois catégories principales sur lesquelles vous pouvez baser vos projets, où chaque catégorie implique un travail de développement similaire?

Si vous avez répondu oui à une de ces question alors, développer un ou plusieurs thème enfant primaires pourrait vous faire gagner du temps. Vous pourriez créer une suite de thème enfant avec le code de base que vous répétez dans vos projets, ainsi vous n'auriez pas à réécrire ce code (ou créer ces fichiers) pour chaque nouveau projet.

Note: Si vous ajoutez du code à chaque nouveau projet, ajoutez-le au framework plutôt qu'aux thèmes enfants, possiblement en utilisant un hook pour pouvoir le faire primer sur le framework dans le cas d'un besoin futur.

Même si vous avez répondu non aux question ci-dessus, il est intéressant de créer un thème enfant primaire de base avec une feuille de style et un fichier de fonction vide; ajoutez dans la feuille de style les instructions dont WordPress a besoin pour accéder au thème parent de votre framework:

/*
 Theme Name:   My Theme Framework Child
 Theme URI:
 Description:  Starter Child Theme
 Author:       Rachel McCollin
 Author URI:   https://rachelmccollin.co.uk
 Template:     wptutsplus-theme-framework-part6
 Version:      1.0.0
 Tags:         
 Text Domain:  tutsplus
*/


@import url("../wptutsplus-theme-framework-part6/style.css");

Les champs requis ci-dessus sont Theme Name et Template, le reste est optionnel. Pour le Template, assurez-vous que vous utilisez le nom de dossier du framework, pas son nom. Il est utile de remplir les champs pertinents de votre thème.

La déclaration @import est, elle aussi, importante si vous souhaitez charger la feuille de style du framework. Tant que vous la placez au-dessus, la feuille de style du thème parent sera chargée avant n'importe quelle autre style de votre thème enfant. Ce qui veut dire que si nécessaire, vous pouvez ajoutez du style ou faire primer votre style sur celui déclaré par le framework.

Vous pouvez également créez un fichier functions.php primaire avec les fonctions que vous utilisez les plus fréquemment dans vos thèmes enfants. Vous pourrez choisir d'en supprimer ou d'en ajouter à vos projets spécifiques.

Enrichir son code grâce aux "filter hooks" du framework

Comme vous avez ajouter des styles à votre thème enfant, vous voudrez probablement changer le code produit par le framework.

Créer une fonction que vous attacherez ensuite à un "filter hook" est bien plus efficace que de créer un nouveau fichier de template pour le nouveau code; cependant, si vous vous retrouvez à le faire de manière répétée pour le même hook, vous pouvez considérer transformer le "filter hook" en "action hook" et écrire une nouvelle fonction pour chaque projet que vous activerez avec cet "action hook".

Dans un soucis d'efficacité, vous pouvez créer une série de fonctions pertinentes que vous placerez dans le fichier de fonctions de vos différents thèmes primaires ou même créer un plugin avec vos fonctions que vous activerez quand vous en aurez besoin. Je traiterais des plugins de manière plus détaillée plus tard dans cette série.

J'ai traité du processus de création des filter hooks dans une série précédente, mais pour récapituler, vous attachez une fonction à un filtre en utilisant la fonction add_filter(). Par exemple, pour enrichir le nom et le lien vers mon site colophon, j'ai créé deux fonctions comme suit:

function wptp_amend_colophon_name() {

  $name = 'Rachel McCollin';
	return $name;
	
}
add_filter( 'wptp_colophon_name', 'wptp_amend_colophon_name' );

function wptp_amend_colophon_link() {
	
	$link = 'http://rachelmccollin.co.uk';
	return $link;
	
}
add_filter( 'wptp_colophon_link', 'wptp_amend_colophon_link' );

Elles s'attachent à deux "filter hooks" de mon framework de theme: wptp_colophon_name et wptp_colophon_link, et changent ce qui est retourné par chacun d'entre eux.

Ajouter du code avec des action hooks

Votre framework de theme aura également des "action hooks" que vous pouvez utiliser pour insérer du contenu dans différents endroits de vos sites.

Si vous avez travaillé avec les fichiers sources de cette série de tutoriel, vous devez avoir sept action hooks:

avant le header
à l'intérieur du header
avant le contenu
après le contenu
dans la barre latérale
dans le footer
après le footer.

Disons par exemple que vous souhaitiez ajouter un bouton d'action dans la barre latérale. Vous pourriez créer un nouveau fichier sidebar.php , mais il serait plus efficace d'utiliser le hook wptp_sidebar à la place.

Pour faire cela, créez un fichier functions.php dans votre thème enfant et ajoutez-y le code suivant:

function wptp_cta() {?>

	<div class="cta">
		<p>Email us on <a href="mailto:mail@example.com">mail@example.com</a></p>
	</div>
	
<?php
}
add_action( 'wptp_sidebar', 'wptp_cta', 1 )

La fonction wptp_cta() crée le balisage du bouton d'action et la fonction add_action() l'exécute via le hook wptp_sidebar avec une priorité de 1 ainsi il apparait avant tout autre contenu activé par ce celui-ci.

Il y a beaucoup d'autre type de contenu que vous pourriez ajouter par le biais de vos action hooks comme par exemple un bouton de partage vers les réseaux sociaux au-dessus ou en-dessous du contenu, du contenu additionnel dans le footer, une barre de recherche dans le header et bien plus encore.

Vous pourriez simplement vouloir ajouter du contenu dans des pages de types spécifiques, comme pour un post unique, auquel cas le moyen le plus évident serait de créer un nouveau template de single.php. Mais vous pouvez tout de même utiliser vos action hooks avec une condition:

function wptp_after_single_posts() {

	if( is_singular( 'post' ) ) { ?>
		
		<h3>Enjoyed this? Try reading more!</h3>
			
		<?php
		// query to list latest blog posts here
			
	}
	
}
add_action( 'wptp_after_content', 'wptp_after_single_posts' );

Cela créerait un requêtage de la base de données (utilisant WP_Query) qui retourne la liste des posts les plus récents, pour encourager les visiteurs à lire un autre contenu sur le site une fois terminée la lecture du post. La condition is_singular( 'post' ) assure que le contenu soit affiché uniquement dans le contexte d'un post unique et en l'attachant au hook wptp_after_content le contenu sera affiché après le contenu principal du post.

Créer des nouveaux fichiers de template

Parfois, vous ne pourrez pas réaliser les opérations souhaitées dans votre framework avec les hook d'action ou de filtre auquel cas vous serez obligé de créer de nouveaux fichiers de template au sein de votre theme enfant.

Il se peut que ces fichiers soit les mêmes que ceux stockés dans votre framework auquel cas les fichiers du theme enfant prendrons le dessus. Ces fichiers peuvent être aussi des nouveaux templates comme par exemple ceux d'une nouvelle catégorie, d'une taxonomie ou d'un type de post.

Si vous créez des fichiers de template dans votre thème enfant, utiliser les fichiers de template de votre framework comme point de départ peut faciliter les choses. Voici la démarche que j'utilise:

Identifier quel fichier de template vous devez créer en accord avec la hiérarchie des templates de WordPress
Créer un fichier vide avec la dénomination appropriée dans votre thème enfant
Identifier quel fichier de votre framework se rapproche le plus de votre nouveau fichier (toujours en accord avec la hiérarchie des templates de WordPress)
Copier son contenu dans votre nouveau fichier
Faire les améliorations requises dans votre nouveau fichier.

Procéder ainsi va vous éviter de dupliquer du code qui serait commun à votre nouveau fichier et aux fichiers existants dans votre framework, comme les appels d'inclusion de documents.

Quand utiliser plutôt un plugin

Une autre option qui s'offre à vous lorsque vous créez des sites basés sur un framework est l'utilisation de plugin en conjonction avec vos thèmes enfants. Un plugin ne remplacera pas complètement un thème enfant, mais il peut être utile dans les contextes suivants:

La fonctionnalité que vous souhaitez n'est pas dépendante du thème; autrement dit, vous souhaitez la conserver si le site change de thème à l'avenir. Par exemple, l'inscription de type de post customisés ou une taxonomie
Vous souhaitez utiliser cette fonctionnalité sur un certain nombre de site que vous créez mais pas suffisamment pour que cette fonctionnalité ne fasse partie d'un thème enfant primaire ou du framework lui-même.

Je traiterais du développement de plugin pour votre framework dans la prochaine partie de cette série.

En résumé

Votre framework de thème n'est que le point de départ de la librairie de code et des fichiers que vous créerez pour appuyez le développement de vos sites. Chaque site que vous créerez fonctionnera à partir d'un thème enfant qui aura le thème de votre framework pour parent.

Comme nous l'avons vu, vos thèmes enfants auront leurs propres styles et leurs propres fonctionnalités tout ceci grâce aux hooks d'action et de filtre de votre framework ou grâce aux nouveaux fichiers de template que vous aurez créés. Il est toujours bon d'opter pour la solution nécessitant le moins de code, votre site sera plus rapide et votre vie simplifiée!