Thèmes WordPress

Thème enfant WordPress – Pourquoi et comment l’utiliser?

23 février 2016

Thème enfant WordPress – Pourquoi et comment l’utiliser?

De part sa simplicité d’utilisation, WordPress s’adresse à tout le monde. Il y a ceux qui veulent simplement faire un site/un blog avec les plugin et les thèmes à leur disposition et ceux qui veulent prendre les choses en mains, contrôler totalement leurs sites et être indépendants dans leur gestion.

Si vous connaissez un tant soit peu le codage HTML, CSS et / ou PHP, vous pourrez tout changer dans WordPress, et avoir un site que sera unique, fait à votre manière.

Lorsqu’il s’agit de personnaliser un site WordPress, un nombre impressionnant de personnes optent pour la modification directe du thème. Cela signifie qu’ils modifient, ou ajoutent des fichiers dans le dossier du thème actuel, mais cela ne se passe généralement pas sans un certain nombre de problèmes.

Pourquoi et comment utiliser un thème enfant?

Pourquoi et comment utiliser un thème enfant

Le premier et le plus gros inconvénient est que toutes les modifications apportées au thème, de cette manière, seront perdues dès la prochaine mise à jour du thème par le développeur. En conséquence, tous ceux qui auront personnalisé leur thème directement ne seront pas en mesure de mettre leur thème à jour (ce qui est mauvais pour la sécurité), ou alors une fois la mise à jour terminée, ils constateront, avec dépits que toutes leurs personnalisations ont disparu. Quoi qu’il en soit, la situation est loin d’être idéale.

Et si au lieu de modifier votre thème, vous utilisiez un thème enfant? Cela vous permettrait d’apporter un certain nombre de modifications à votre site WordPress, sans jamais avoir à toucher aux fichiers originaux du thèmes. Qu’en pensez-vous? C’est une bonne idée, non?

Cela tombe bien, car dans l’article d’aujourd’hui, nous allons parler des thèmes enfant WordPress, ce qu’ils sont, comment les créer, simplement, et comment les personnaliser pour rendre votre site unique.

Un thème enfant, c’est quoi?

Un thème enfant est un thème qui hérite des styles et des fonctionnalités d’un autre thème, appelé dans ce cas, le « thème parent ». Il est possible de créer un thème enfant à partir de n’importe quel thème WordPress, même les thèmes de base comme Twenty Sixteen et ses prédecesseurs.

Les thèmes d’enfants sont utilisés lorsque vous souhaitez apporter des modifications à un site sans pour autant vouloir modifier le code ou les fichiers originaux de votre thème de base. Cela permet de mettre à jour votre thème original (qui sert de moteur au thème enfant), sans perdre toutes les modifications que vous avez apporté à votre site.

Comment créer un thème enfant?

Il existe deux méthodes pour créer un thème enfant. Vous pouvez le créer avec un plugin, ou le créer manuellement.

Il existe plusieurs plugin pour vois aider à créer un thème enfant, je vous recommande Child Theme Configurator, car c’est un plugin simple à mettre en oeuvre et à utiliser

Si vous préférez créer un thème enfant manuellement, voici comment faire:

Créer manuellement un thème enfant en 5 étapes

Pourquoi et comment utiliser un thème enfant - Thème Clean Box

1. Créez un dossier sur votre ordinateur

La première chose à faire est de créer un dossier sur votre ordinateur dans lequel vous aller stocker votre thème enfant. Dans notre exemple, je vais utiliser le thème gratuit Clean Box comme thème parent, je vais donc nommer mon dossier cleanbox-enfant.

2. Créez une feuille de style

A présent ouvrez un fichier texte ordinaire (avec le bloc-notes de Windows ou TextEdit sous Mac) et ajoutez les lignes ci-dessous au début du fichier (n’oubliez pas de changer les noms pour qu’ils correspondent à vos thèmes parents et enfants)

/*
Theme Name: Clean Box Theme Enfant
Template: cleanbox
*/
ATTENTION
Le nom du thème doit être exactement le même que le nom du dossier du thème parent. Si le dossier utilise des minuscules (« theme »), vous devez utiliser des minuscules. Si le nom du dossier comprend des lettres majuscules ( « Theme »), vous devez utiliser des majuscules.

Sauvegardez à présent ce fichier dans le dossier de votre thème enfant en le nommant « style.css« . Vous pouvez aller plus loin et ajouter du code CSS dans ce fichier si vous savez ce que vous voulez ajouter.

Remarque: Le haut de la feuille de style peut contenir beaucoup plus d’informations, mais elles ne sont pas nécessaires. Nous reviendrons sur ce point plus loin..

3. Création du fichier functions.php

A présent, ouvrez un nouveau fichier texte, et placez le code suivant au début du fichier :

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Sauvegardez ce fichier dans le dossier de votre thème enfant avec comme nom: functions.php

IMPORTANT: Les utilisateurs de Windows qui utilisent le bloc-note pour créer ce fichier, doivent impérativement enregistrer le fichier en utilisant des guillemets (« functions.php »). Si vous ne le faites pas, votre fichier sera enregistré comme un fichier texte ordinaire, au lieu d’un fichier avec l’extension PHP requise.

Pourquoi et comment utiliser un thème enfant - Enregistrement du fichier fonctions

Vous devriez maintenant avoir deux fichiers dans le dossier de votre thème enfant: votre feuille de style (style.css) et votre fichier de fonctions (functions.php).

fichiers contenus dans le dossier du thème enfant

 

4. Compressez le dossier du thème enfant

Afin que WordPress puisse installer votre thème enfant, il va falloir le compresser au format ZIP.

Pour ce faire, vous pouvez utiliser un programme tel que 7-Zip, ou si la configuration de votre ordinateur le permet, cliquez droit sur le dossier et recherchez une fonction telle que « Compresser ».

Fichiers contenus dans le dossier enfant

Une fois le dossier compressé, vous devriez avoir une version zippée et une copie décompressée de votre thème enfant.

5. Téléchargez le fichier zippé sur votre site

Téléchargez à présent le thème enfant zippé sur votre site, et activez le comme n’importe quel autre thème.

Captures d’écran

Si vous le souhaitez, Vous pouvez également ajouter une capture d’écran à votre thème enfant. WordPress recommande une taille de 880 × 660 pixels avoir un bon résultat sur les écrans haute définition. Cela dit, il ne sera affiché qu’en 387 × 290 pixels.

Faites votre capture d’écran, enregistrez la avec le nom screenshot.jpg ou screenshot.png, et placez la dans le dossier principal de votre thème enfant.

Si votre thème enfant ne fonctionne pas

Si le thème enfant ne fonctionne pas, essayez d’ajouter la ligne de code ci-dessous à la feuille de style du thème enfant (style.css) juste sous de l’en-tête.

@import url("../theme/style.css")

Notez que le nom du thème parent « theme » , dans ce cas devra être modifié pour correspondre au nom du thème parent.

Si cela ne fonctionne toujours pas, retirez le code du fichier de fonctions (functions.php).

Si continuez à rencontrer des problèmes, contactez l’auteur du thème parent.

Plus d’informations sur l’entête de la feuille de style

Comme je l’ai mentionné précédemment, l’entête de la feuille de style de votre thème enfant peut contenir beaucoup plus d’informations, si vous le souhaitez. Toutefois, elles ne sont pas utiles pour le bon fonctionnement du thème.

Voici un exemple des différentes informations que vous pouvez insérer dans la zone d’entête du fichier style.css, si vous le souhaitez.

/*
Theme Name: Clean Box Enfant
Theme URI: http://monsite.fr/cleanbox-enfant/
Description: Clean Box Theme Enfant
Author: Hubert Bloginfos
Author URI: http://monsite.fr
Template: Clean Box
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Black, Dark, Editor Style, Featured Image Header, Featured Images, Flexible Header, Fluid Layout, Gray, Left Sidebar, Light, Responsive Layout, Right Sidebar, Silver, Two Columns, White
Text Domain: cleanbox-enfant
*/

5 cas fréquents d’utilisations d’un thème enfant

Comme mentionné précédemment, vous pouvez utiliser un thème enfant lorsque vous avez besoin de modifier les fichiers de votre thème.

Il existe 5 scénarios courants dans lesquels utiliser un thème enfant est une excellente idée.

1. Lorsque vous modifiez le style de votre siteChanger de style

Cette utilisation est probablement la façon la plus courante de l’utilisation d’un thème enfant. Supposons que dans un article il y a une image et que je souhaite ajouter plus d’espace autour de celle-ci. Pour effectuer cette opération, vous pouvez ajouter du code CSS à la feuille de style de votre thème enfant, comme par exemple:

div#attachment_12043 {
     padding-right: 30px;
     padding-bottom: 30px;
 }

IMPORTANT: Il est important de noter que vous ne devez insérer que le style que vous modifiez dans la feuille de style de votre thème enfant.

2. Lors de l’ajout de nouvelles fonctionsajouter des fonctions

Le fichier de fonctions (functions.php) peut être utilisé pour ajouter toutes sortes de nouvelles fonctionnalités à votre thème.

Le code du fichier de fonctions est identique au code d’un plugin. Vous pourrez probablement trouver, sur Internet, des bouts de code, à insérer dans votre fichier de fonctions, qui vous aideront à ajouter des fonctionnalités à votre thème enfant.

3. Lors de la modification des fichiers existants

Une autre façon d’utiliser un thème enfant est lorsque vous souhaitez modifier un fichier du thème parent, comme le fichier single.php ou le fichier footer.php, etc.

modification des fichiers existantsLa meilleure façon de le faire, est de copier le fichier existant depuis de votre thème parent, et de le mettre dans le dossier de votre thème enfant. Vous pourrez ensuite l’éditer sans risquer d’abîmer quoi que ce soit.

Supposons que je veuille changer le crédit du thème dans le pied de la page, en remplaçant, par exemple, le lien vers le site WordPress.org et en mettant à la place un lien vers mon site.

Pour ce faire, il faut copier le contenu du fichier footer.php du thème parent et créer un nouveau fichier footer.php dans le thème enfant (soit dans le dossier du thème enfant sur le serveur ou sur votre ordinateur).

Coller le code du fichier original et vous pourrez modifier le code du fichier footer.php du thème enfant.

4. Pour créer un modèle de page

Une des principales raisons qui poussent de nombreuses personnes à utiliser un thème enfant, est pour leur permettre de créer de nouveaux modèles de pages sur leur site.Modèle de page

Un modèle de page est une sorte de mini thème que vous créez selon vos désirs, et qu’ensuite vous assignez à une page.

5. Lors de l’utilisation de champs personnalisés

WordPress est livré avec, pour chaque article, un certain nombre de champs auxquels vous êtes déjà habitués, comme le champ titre, le champ principal, et le champ extrait. Mais saviez-vous que vous pouvez également ajouter d’autres champs dans un article ou une page? On les appelle des champs personnalisés.

Il existe différentes façons d’ajouter des champs personnalisés, mais la plus simple est d’utiliser un plugin appelée Advanced Custom Fields.

Advanced Custom Fields

A titre d’exemple, disons que, sur mon blog, je passe en revue des restaurants et qu’il me faut des champs supplémentaires que j’ai besoin d’utiliser régulièrement, comme:

  • le type de restaurant
  • l’emplacement
  • les prix
  • etc.

Après la mise en place de nouveaux champs personnalisés avec le plugin  Advanced Custom Fields, j’obtiens le code à ajouter dans mon fichier modèle.

Supposons que l’un des champs personnalisés est une appréciation  finale (Oui/Non) qui indique si je recommande le restaurant ou pas.

Si je veux le mettre dans mon fichier single.php, par exemple, je vais copier le contenu du fichier single.php de mon thème parent, et créer un nouveau fichier single.php pour mon thème enfant.

Ne modifiez pas les fichiers originaux, utiliser des thèmes enfants

Modifier le code des fichiers originaux du thème que vous utilisez peut très facilement vous amener à un désastre. Les thèmes enfants sont un moyen sûr et facile de modifier ce que vous souhaitez, sans avoir à craindre de perdre votre travail lors d’une prochaine mise à jour du thème.

Ne jetez pas le bébé avec l'eau du bain

J’espère qu’à présent, le processus de construction d’un thème enfant WordPress est plus clair pour vous après la lecture de cet article.

Et vous, comment faites vous lorsque vous souhaitez apporter desmodifications à votre thème? Changez vous le code original au risque de tout perdre, ou utilisez vous un thème enfant? Vos commentaires sur le sujet sont, comme d’habitude, les bienvenus.

séparateur de texte

Cet article vous a intéressé? Partagez le pour en faire profiter plus de monde. Merci!

10 commentaires
  1. Gély Patrick

    Mon thème enfant ne fonctionnait pas, malgré que les modifications faites sur dreamweaver soient reconnues dans l’éditeur de Wordpress le style.css du thème parent prenait le dessus. J’ai trouvé sur votre blog la solution, j’ai retiré le code du fichier functions.php. Ce fichier functions.php est-il utile au thème enfant ? Merci Cordialement Patrick Gély

  2. Hubert

    Bonjour Patrick, Si vous mettez le fichier functions.php dans le thème enfant, il prendra le dessus sur celui de thème parent, donc cela peu poser problèmes si vous faites des modifications.

  3. Michel

    Bonjour, Sur un site en construction, pour obtenir des présentations particulières sur des pages spécifiques, j'utilise 3 thèmes enfants comprenant chacun une feuille de style personnalisée. Pour affecter ces différents thèmes, aux pages concernées, j'utilise le plugin" Multiple Themes".Il serait peut-être plus simple de créer des "modèles de page" attachés à un seul thème. Avez vous un avis sur ce choix ?Cordialement, Michel

  4. Hubert

    Bonjour Michel, La solution, vous l'avez trouvée, créez des modèles et appliquez les aux pages en question. Cela allégera votre site et diminuera le temps de chargement des pages.

  5. Loïc

    Bonjour,petite question, si l'on utilise uniquement les configurations du thème dans le "thème option", sans ajouter ou modifier le CSS, le thème enfant n'a pas d'utilité ? Le thème enfant ne sert que si des modifications sont apportés dans le code ? Si l'on change des paramètres dans Thème option et que l'on fait une mise à jour du thème est-ce que les configurations sont conservées ? Merci d'avance pour la réponse.

  6. Hubert

    Bonjour Loïc, Le thème enfant, vous l'avez bien compris, ne sert que lorsque des modifications sont apportées dans le code, afin d'éviter que celles-ci soit effacées lors d'une mise à jour du thème. Si vous ne faites que des modifications via le panneau d'option du thème, rien ne sera perdu en cas de mise à jour.

  7. Jibé49

    Bonjour, J’utilise le plugin "Multiple Themes", et donc des thèmes enfants. (du thème Firmasite) Lorsque je change le bandeau d'un thème enfant, le changement se répercute sur le thème parent. Et je ne le veux pas ! Et là je ne sais plus comment m'en sortir... Si quelqu'un a une idée. Merci JB

  8. Hubert

    Bonjour Jacques, A priori, vous utiliser le thème Firmasite sur votre site, et non pas un thème enfant, voilà qui pourrait expliquer pourquoi le bandeau s'applique.

  9. Tamatech

    Bonjour, J'étais en galère avec mon thème et j’appréhendais les MàJ. j'avais lu une multitude d'articles sur les thèmes enfants, sans jamais vraiment en comprendre tenants et aboutissants. Et puis je suis tombé sur le vôtre. J'ai résolu mes problèmes de thème-enfant en un après midi. Simple, didactique, sans chichis, efficace en un mot. Merci !

  10. Léa

    Bonjour, Merci pour votre article, je vais faire mon site sur le thème enfant pour plus de sécurité. Mais lorsque des mises à jour seront faites sur mon thème, apparaîtront-elles néanmoins sur le thème enfant sur lequel je travaillerai ? Merci d'avance. Léa

Laisser un commentaire

You have to agree to the comment policy.

-20% sur ElegantThemes.com Maintenant !Cliquez-ici !
+