Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. WordPress
  3. Les thèmes enfants
Extrait - WordPress Conception et personnalisation des thèmes (4e édition)
Extraits du livre
WordPress Conception et personnalisation des thèmes (4e édition)
3 avis
Revenir à la page d'achat du livre

Les thèmes enfants

L’objectif

Pour simplifier la création de votre premier thème, vous pouvez opter pour la création d’un thème enfant (child theme en anglais), basé sur un thème parent.

Le principe est simple et efficace : vous partez avec un thème contenant les fonctionnalités essentielles que vous souhaitez utiliser, avec une architecture et un design globalement adéquat vis-à-vis de votre projet. Vous prenez donc comme base ce thème qualifié de thème parent. Vous créez ensuite un thème enfant basé sur le thème parent en y ajoutant les fonctionnalités qui vous manquent et en adaptant les styles CSS pour que le design soit en accord avec votre projet.

Ainsi vous n’avez pas à tout refaire, vous partez sur des bases saines d’un point de vue code, design, fonctionnalités et interface d’administration. De plus, autre avantage non négligeable, si le thème parent évolue avec les nouvelles versions de WordPress, la mise à jour de celui-ci va automatiquement se répercuter sur le thème enfant.

Il est toujours conseillé de créer un thème enfant plutôt que de modifier le thème original. Si vous transformez le thème parent plus ou moins en profondeur, vous perdez tout le bénéfice des mises à jour correctives du thème. En créant...

Le dossier du thème enfant

Nous allons créer un nouveau dossier pour notre thème enfant, nommez-le twentytwentychild.

Nous y placerons bien sûr les fichiers constitutifs. Puis nous créerons le package et nous installerons le thème dans notre site WordPress comme nous l’avons vu dans le chapitre Gérer les thèmes.

La vignette du thème enfant

Pour la vignette du thème enfant affichée dans l’administration des thèmes, nous vous proposons de reprendre celle du thème parent et d’y ajouter un texte par-dessus.

Les dimensions optimales sont de 1200 x 900 pixels.

images/C11-001N.png

La feuille de style du thème enfant

1. Le fichier CSS

Dans le dossier de notre thème enfant, pour que le thème soit valide, il faut obligatoirement créer une feuille de style CSS. Nous la nommons style.css.

Comme nous l’avons vu précédemment, la feuille de style commence par un commentaire où sont indiquées un certain nombre d’informations.

Voilà le début de la feuille de style du thème enfant :

/* 
Theme Name: Twenty Twenty Child 
Theme URI: https://mon-site.org/themes/twentytwenty-child/ 
Author: l'équipe Mon site 
Author URI: https://mon-site.org/equipe-mon-site/ 
Description: TwentyTwenty Child est un thème enfant du thème WordPress 
TwentyTwenty. 
Version: 0.1 
Tags: blog, one-column, custom-background, custom-colors, custom-logo, 
custom-menu, editor-style, featured-images, footer-widgets, 
full-width-template, rtl-language-support, sticky-post, theme-options, 
threaded-comments, translation-ready, block-styles, wide-blocks, 
accessibility-ready 
Template: twentytwenty 
*/ 

Voici les principaux éléments de ce commentaire :

  • Theme name : nom du thème qui apparaîtra dans la gestion des thèmes dans l’administration de WordPress.

  • Theme URI : accès à la page web du thème.

  • Author : nom de l’auteur de ce thème.

  • Author URI : accès à la page...

Les autres fichiers

Maintenant nous allons modifier le pied de page. C’est le fichier footer.php qui gère l’affichage de pied de page. Nous n’allons pas modifier le fichier du thème parent, mais créer un fichier pour le thème enfant. Il faut naturellement respecter la structure des dossiers dans le thème enfant.

 Dans le dossier du thème parent twentytwenty, dupliquez le template footer.php.

 Dans le dossier du thème enfant twentytwentychild, déplacez-y le fichier dupliqué footer.php.

Le fichier dupliqué doit avoir strictement le même nom et être dans la stricte même arborescence.

Voici un exemple d’une très simple personnalisation dans l’élément <div class= "footer-credits"> :

<div class="footer-credits"> 
   ... 
   <!-- Personnalisation du pied de page --> 
   <p class="powered-by-wordpress">Site créé par 
<a href="http://www.netplume.net">netPlume</a></p> 
   ... 
</div> 

Voici l’affichage que nous obtiendrons :

images/C11-003N.png

Il en sera de même pour les autres fichiers de structure que vous souhaitez personnaliser. Voilà donc la solution la plus raisonnable et la plus sûre : dupliquez le template du thème parent dans le dossier du thème...

Le fichier functions.php

1. L’ouverture des fichiers

Nous l’avons vu précédemment, le fichier functions.php permet entre autres de paramétrer le thème utilisé. Dans le cas de l’utilisation d’un thème enfant, c’est bien le fichier functions.php du thème parent qui est utilisé. Il ne faut pas faire une duplication du fichier parent dans le dossier du thème enfant, cela va provoquer une erreur, car le fichier functions.php de l’enfant ne va ni remplacer, ni écraser celui du parent. Les deux fichiers seront ouverts : d’abord celui de l’enfant, puis celui du parent.

2. Ajouter une fonction

Nous allons très simplement personnaliser l’interface d’administration de WordPress. Par défaut, en bas à gauche de l’administration, vous avez les remerciements de WordPress :

images/C11-004.png

Nous allons créer une fonction pour masquer ce message.

 Créez et ouvrez le fichier functions.php du thème enfant qui est initialement vide.

 Saisissez ce code :

<?php 
/** 
Personnalisation du thème enfant 
**/ 
 
// Masquer les remerciements WordPress 
function masquer_merci_wp(){ 
 return ''; 
} 
add_filter ('admin_footer_text','masquer_merci_wp'); 
  • Nous créons une fonction personnelle, nommée masquer_merci_wp().

  • Cette...

Installer le thème enfant

 Une fois votre thème enfant créé, compressez-le pour créer une archive au format .zip et installez-le dans l’administration de votre site WordPress.

images/C11-004N.png

Lors de l’installation, WordPress a bien repéré qu’il s’agit d’un thème enfant du thème parent Twenty Twenty.

images/C11-005N.png

Vous pouvez cliquer sur le lien Activer.

Le thème enfant est bien installé et activé.

images/C11-006N.png

 Dans la gestion des thèmes, au survol de ce thème enfant, cliquez sur le bouton Détails du thème.

Il est clairement indiqué que ce thème est un thème enfant : Ceci est un thème enfant de Twenty Twenty.

images/C11-007N.png