Développer un thème enfant

Il est très rare qu'un thème corresponde exactement à nos besoin. Il y aura forcément quelques modification à y apporter : traduction d'éléments non internationalisés, ajustement du visuel, etc. C'est pourquoi tout site WordPress devrait utiliser un thème enfant.

Un thème enfant hérite de toutes les fonctionnalités du thème original, appelé thème parent, et lui apporte les modifications souhaitées sans toutefois modifier le thème parent.

Le développement d'un thème enfant, plutôt que de développer un thème de A à Z ou de modifier le code du thème parent, comporte deux avantages :

  • Votre thème bénéficiera de toutes les fonctionnalités déjà programmées dans le thème parent.
  • Les mises à jour du thème parent seront grandement facilitées puisqu'aucun de ses fichiers n'aura été modifié.

▼Publicité

Choisir le bon parent

Vous désirez créer un thème en vous basant sur un thème existant. Bonne idée ! Il faut cependant prendre soin de bien choisir le parent. En effet, les fonctionnalités présentes dans le parent seront disponibles dans l'enfant. Aussi, elles doivent :

  • répondre à vos besoins
  • être correctement codées

Il sera souvent nécessaire de faire quelques tests avant d'arrêter notre choix sur le bon parent.

Fichiers remplacés vs fichier complétés

Lorsque vous développerez votre thème enfant, certains de vos fichiers remplaceront ceux du thème parent alors que d'autres les compléteront. La connaissance de cette information vous aidera à faire un choix éclairé.

  • Le fichier functions.php complètera celui du thème parent. C'est pour cette raison que les fonctionnalités du thème parent seront héritées par l'enfant. Le fichier de l'enfant est chargé AVANT celui du parent. Dans le cas où les fonctions du parent sont définies avec la condition if ( !function_exists() ), le thème enfant pourra redéfinir complètement la fonction.
  • Les fichiers modèles (index.php, header.php, etc.) remplaceront ceux du thème parent. Il n'est cependant pas obligatoire de redéfinir ces fichiers. Si vous n'avez pas de fichier index.php, par exemple, c'est celui du parent qui sera utilisé.
  • La feuille de style (style.css) est le seul fichier obligatoire dans le thème enfant. Ce fichier remplace la feuille de style du parent mais il est possible d'y importer la feuille du parent.

Utiliser le dernier thème livré avec WordPress comme thème parent

Si vous hésitez sur le thème à utiliser comme parent, les thèmes livrés avec WordPress sont d'excellents choix. Les noms de ces thèmes suivent les années : Twenty Twelve, Twenty Thirteen, etc. Ces thèmes sont traductibles, adaptatifs et sobres et pourront être facilement ajustés pour répondre à vos besoins.

Création des fichiers de base

Tout comme un thème développé de A à Z, un thème enfant aura son propre dossier sous

www\votresite\wp-content\themes

C'est dans l'entête de la feuille de style qu'on indiquera que le thème est basé sur un autre thème.

Pour développer un thème enfant :

  • Créez un dossier sous www\votresite\wp-content\themes. Assurez-vous que le nom du dossier ne contienne ni espaces, ni accents, ni caractères spéciaux.
  • Dans ce dossier, un seul fichier est obligatoire : la feuille de style. Créez donc un fichier nommé style.css, dont l'encodage est UTF-8.
  • Dans la feuille de style, entrez un entête standard au format suivant. L'utilisation des termes anglais permettra à WordPress de reconnaître certaines informations, notamment le nom du thème et le nom de son auteur qui apparaîtront dans le tableau de bord sur la page permettant de choisir le thème.Notez qu'il ne doit pas y avoir d'espace avant les : pour que ça fonctionne.

    Fichier style.css du thème enfant

    /**

     * Theme Name:

     * Theme URI: (URL pour télécharger le thème)

     * Description:

     * Version: 1.0

     * Author:

     * Author URI:

     * Template: dossier_du_parent

     */

  • La feuille de style du thème enfant remplace celle du thème parent. La feuille de style du parent ne sera donc pas prise en compte. Il est cependant possible d'importer la feuille de style du parent en ajoutant la ligne suivante tout de suite après l'entête standard, avant toute règle CSS :

    Fichier style.css du thème enfant

    @import url("../dossier_du_parent/style.css");

  • Entrez ensuite les règles CSS permettant d'obtenir l'apparence désirée.
  • Une fois l'étape précédente réalisée, vous avez déjà un thème enfant fonctionnel. Il ne vous reste plus qu'à l'activer dans le tableau de bord. Vous pouvez compléter votre travail avec les étapes suivantes si vous avez besoin d'apporter des modifications à la programmation.
  • Au besoin, créez un fichier functions.php pour y écrire vos propres fonctions. Prenez note que le fichier functions.php ne remplace pas le fichier du parent, il le complète.
  • Au besoin, créez les fichiers modèles dont vous avez besoin (index.php, header.php, etc.). Notez que tous ces fichiers REMPLACENT ceux du thème parent.

Ne pas redéfinir un fichier modèle inutilement

Lorsque vous désirez modifier le code généré par le thème parent, il est tentant de redéfinir le fichier modèle en cause (ex : header.php) et d'y copier tout le contenu du fichier parent avant d'y apporter les modifications voulues. Cette technique fonctionne mais elle vous privera des ajouts et des corrections rendues disponibles par une éventuelle mise à jour du thème parent.

Si vous avez pris soin de bien choisir le thème parent, ce dernier devrait mettre à votre disposition de nombreux « hooks » vous permettant d'ajouter ou d'enlever du code sans devoir modifier le fichier original. De plus, les développeurs de thèmes de qualité publient de la documentation pour vous aider à utiliser ces « hooks ».

L'utilisation des « hooks » consistera à coder de nouvelles fonctions dans functions.php sans avoir à redéfinir les fichiers modèles.

Voici un exemple concret. Vous désirez développer un thème enfant basé sur twentyeleven. Par contre, vous ne désirez pas afficher une barre d'images dans la zone d'entête. Plutôt que de copier le code de header.php dans le dossier de votre thème, vous utilisez le « hook » suivant pour désactiver l'affichage de la barre d'images1.

Fichier functions.php du thème enfant (PHP)

// REMOVE TWENTY ELEVEN DEFAULT HEADER IMAGES

function wptips_remove_header_images() {

    unregister_default_headers( array( 'wheel', 'shore', 'trolley', 'pine-cone', 'chessboard', 'lanterns', 'willow','hanoi' ) );

}

add_action(  'after_setup_theme', 'wptips_remove_header_images', 11 );

Sources

1. « Replace/Remove Default Header Image Twenty Eleven Theme ». wptips. http://wpti.ps/functions/replace-remove-header-image-twenty-eleven-theme/

Pour plus d'information

« Thèmes Enfant ». Codex WordPress. http://codex.wordpress.org/fr:Th%C3%A8mes_Enfant

« 34 Free WordPress Theme Frameworks and Starter Themes (With A Comparison Chart) ». Web Resources Depot. http://www.webresourcesdepot.com/34-free-wordpress-theme-frameworks-and-starter-themes-with-a-comparison-chart/#wp-frameworks-comparison

« WordPress Twenty Eleven and Twenty Ten Themes Compared and Reviewed ». Resources for life. http://www.resourcesforlife.com/docs/item4940

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories

4 commentaires

  1. Bonjour Mme Lagacé,

    Tout d’abord, j’adore votre blog et toutes les informations que vous y mettez. Je vous suis régulièrement. C’est une source très inspirante pour moi et mon site web.
    Je ne suis pas développeur, je fais ça pour mon plaisir et l’enrichissement de ma petite compagnie.
    Je vous écrit maintenant car j’ai tenté de faire une thème enfant et je n’arrive pas à le faire et ce même si toute la documentation sur le web m’indique que ça se fait presque les doigt dans le nez.
    Je voulais voir avec vous s’il serait possible d’avoir un surplus d’information pour me permettre d’y arriver.
    Lorsque je fais la procédure que vous dite plus haut, lorsque j’active mon nouveau thème enfant, je pers ma side bar ainsi que mes menu du haut. Il semble qu’il me manque des morceaux. Je soupçonne un fichier custom.css d’en être la cause, mais celui ci, je ne sais pas quoi faire avec. Peut-être je me trompe ? Qu’en pensez-vous ?
    Mon thème est appply de wootheme, je l’aime bien, mais là je suis confronté à devoir faire une mise à jour et je n’ai pas de child 🙁
    Pourriez vous m’aider ? Me pointer peut-être la petite chose qui fait que je n’y arrive pas ?

    Merci d’avoir pris le temps de me lire et aussi, peut-être, de me donner un coup de main.

    Bonne journée

    Grégoire

    • Christiane Lagacé

      Bonjour Grégoire,

      Tout d’abord, merci pour vos mots d’encouragement. C’est grâce à des commentaires comme le vôtre que je trouve l’inspiration pour continuer mon blogue !

      Le comportement que vous décrivez semble tout à fait normal. Je l’ai moi-même vécu à plusieurs reprises. Je n’ai pas pris le temps de découvrir la raison technique derrière ce comportement, mais à chaque fois qu’on change de thème, il faut refaire quelques configurations dans le menu « Apparence », dont le choix du menu principal, l’affichage de l’image en bannière et le choix de l’image de fond.

      Ce travail supplémentaire n’est pas lié au fait que vous utilisiez un thème enfant ou un thème parent. En effet, lorsque je désire ajouter des éléments de programmation à un site existant, je ramène sur mon poste local une copie de tous les fichiers nécessaires et je recrée la base de données. Je dois manipuler cette dernière afin de remplacer l’adresse du site en ligne par l’adresse locale. Et à chaque fois, tout le site est présent et fonctionnel sur mon poste local… mais je dois ajuster le menu, l’image en bannière et l’image de fond.

      Rassurez-vous, cette opération est sommes toutes mineures et il ne vous faudra que quelques instants pour la réaliser. En fait, votre menu est encore là. Il faut simplement redire à WordPress que c’est lui qui doit être utilisé comme menu principal (Apparence / Menus / Onglet Gérer les emplacements). Selon les configurations disponibles dans votre thème, vous pourriez aussi avoir à ajuster les options Apparence / En-tête et Apparence / Arrière-plan.

      Salutations !

      Christiane

  2. Bonjour,
    Merci pour ces explications. claires, concises et faciles à comprendre. Je suis en train de changer de theme et me dit que c’est l’occasion de créer un theme enfant afin d’éviter de futurs problèmes de mise à jour du thème.
    Cependant, je ne suis pas développeur et n’ai pas le temps pour apprendre a coder pour l’instant. Je me demandais si une fois le thème enfant installé, j’aurais besoin de coder chaque modifications que j’effectuerais ou wordpress s’en occupera directement et enregistrera toutes ces modifications là où cela doit être… En des mots plus simples; est-ce que cela va compliquer la gestion de mon site ou pas.
    Merci pour votre retour,
    N.

    • Christiane Lagacé

      Bonjour Nicolas,

      Rassurez-vous, le fait de travailler avec un thème enfant ne compliquera en rien la gestion de votre site. Il existe bien quelques subtilités quand on programme avec un thème enfant, mais rien de très sorcier. Et si vous ne codez pas, le fait d’utiliser un thème enfant sera à peu près transparent pour vous. La seule chose : vous devrez avoir, dans votre dossier themes, le thème parent ET le thème enfants. Dans le cas le plus simple, le thème enfant ne sera composé que du fichier style.css.

      Bonne chance !

      Christiane