Comment personnaliser son site web WordPress grâce au thème enfant

Thème enfant WordPress, child themes Créer un thème enfant dans WordPress est le meilleur moyen de personnaliser un thème existant. Des bonnes feuilles issues de l'ouvrage "WordPress - Conception et personnalisation des thèmes", chez Eni.

Cet article est tiré de l'ouvrage "WordPress - Conception et personnalisation des thèmes", de Christophe Aubry, publié chez Eni. Il s'adresse à toute personne connaissant déjà WordPress et souhaitant débuter dans la création de nouveaux thèmes ou la personnalisation de thèmes existants (voir sur le site d'Eni).

A. 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 sur le thème parent 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 le transformez plus ou moins en profondeur, vous perdez tout le bénéfice des mises à jour correctives du thème. En créant un thème enfant, vous adaptez le thème à vos besoins, sans modifier l'intégrité du thème parent. C'est l'idéal.

Pour cet exemple, nous allons partir du thème par défaut de WordPress 3.5, le thème Twenty Twelve qui est une belle « vitrine » du potentiel de WordPress.

B. Le dossier du thème enfant

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

Vous y placerez bien sûr les fichiers constitutifs. Puis vous créerez le package et vous installerez le thème dans votre site WordPress comme nous l'avons vu dans le chapitre Gérer les thèmes.

C. 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.

wordpress theme enfant
Ajouter un texte par-dessus l'image du thème parent.  © Eni

D. 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 créer une feuille de style CSS. Nous la nommons simplement style.css.

 

Comme nous l'avons vu dans le chapitre Un thème simpliste, 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: TwentyTwelve Child
Theme URI: http://www.netplume.net/twentytwelvechild.html
Author: Christophe AUBRY
Author URI: http://www.netplume.net
Description: C'est un thème enfant du thème parent TwentyTwelve
Version: v0.1
Tags: light, gray, white, one-column, two-columns, right-sidebar,
flexible-width, custom-background, custom-header, custom-menu
Template: twentytwelve
*/


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 Web de l'auteur de ce thème.

- Description : description de ce thème.

- Version : version du thème proposé.

- Tags : mots-clés caractérisant ce thème, utilisé pour la recherche des thèmes.

- Et le plus important : Template: twentytwelve. C'est ici que vous indiquez le nom du thème parent. Vous devez indiquer le nom du dossier du thème parent en respectant scrupuleusement la casse (majuscules et minuscules) du nom.

2. Importer les styles parents

Maintenant il faut récupérer les styles du thème parent dans la feuille de style du thème enfant. Nous allons tout simplement utiliser une règle d'importation.

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

- Nous utilisons la règle d'importation de feuille de style @import url().

- Nous indiquons le chemin d'accès à cette feuille de style :

- .. : nous remontons l'arborescence des fichiers d'un cran.

- /tewtytwelve/ : nous entrons dans le dossier du thème parent nommé twentytwelve.

- Nous importons la feuille de style nommée style.css.

3. Créer les styles enfants

Nous venons d'importer les styles du thème parent dans la feuille de style du thème enfant. Donc pour le moment il n'y a aucun changement. Le design reste le même. Il faut donc créer nos propres styles. Nos styles enfants seront prioritaires sur les styles parents.

Comme nous reprenons les styles parents, il faut reprendre les mêmes noms de sélecteur.

Par exemple nous souhaitons modifier la couleur du titre du site dans l'en-tête et le mettre en italique :

 h1.site-title a {
color: purple;
font-style: italic;
}

Voilà l'affichage :

wordpress theme enfant 2
Affichage du titre du site dans l'en-tête. © ENI

Et il en va de même pour tous les styles que vous souhaitez adapter à vos besoins.

E. Les autres fichiers

Maintenant, imaginons que vous vouliez personnaliser le pied de page pour vous ou votre client. Nous l'avons vu précédemment, c'est le fichier footer.php qu'il faut modifier. Mais bien sûr ce n'est pas le fichier du thème parent qu'il faut travailler, mais bien celui du thème enfant.

Pour le moment il n'y a pas de fichier footer.php dans le dossier du thème enfant. Il nous suffit tout simplement d'en créer un ou de dupliquer celui du thème parent et de placer cette copie dans le dossier du thème enfant. Ensuite, vous y apportez les modifications voulues.

Voilà une simple modification apportée dans le fichier footer.php : nous ajoutons un texte après le lien vers WordPress.

 ...
<div class="site-info">
  <?php do_action( 'twentytwelve_credits' ); ?>
  <a href="<?php echo esc_url( __( 'http://wordpress.org/',
'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing
Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s',
'twentytwelve' ), 'WordPress' ); ?></a>
  &nbsp;&bullet;&nbsp;Site basé sur le thème Twenty Twelve et personnalisé
  </div><!-- .site-info -->
...

À l'affichage :

wordpress
Affichage du Footer  © Eni

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 fichier du thème parent dans le dossier du thème enfant.

Conséquence de cette duplication du fichier footer.php : la mise à jour du thème parent ne se fera pas sur le thème enfant. Pour bénéficier des nouveautés du thème parent, il faudra alors modifier le fichier footer.php du thème enfant.

F. Le fichier functions.php

1. L'ouverture des fichiers 

Nous l'avons vu précédemment, le fichier functions.php permet 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 voulons ajouter une nouvelle fonction à notre thème WordPress : proposer des nouvelles tailles pour l'insertion des images. Cette fonctionnalité est faite pour notre thème enfant, c'est pourquoi nous créons un fichier functions.php dans le dossier de notre thème enfant. Cette nouvelle fonction va s'ajouter aux fonctions du thème parent.

Voici le code qu'il faut saisir (URL de la source du code) :

<?php
// Add new image sizes
function lc_insert_custom_image_sizes( $image_sizes ) {
  // get the custom image sizes
  global $_wp_additional_image_sizes;
  // if there are none, just return the built-in sizes
  if ( empty( $_wp_additional_image_sizes ) )
     return $image_sizes; 
  // add all the custom sizes to the built-in sizes
  foreach ( $_wp_additional_image_sizes as $id => $data ) {
     // take the size ID (e.g., 'my-name'), replace hyphens with spaces,
     // and capitalise the first letter of each word
     if ( !isset($image_sizes[$id]) )
        $image_sizes[$id] = ucfirst( str_replace( '-', ' ', $id ) );
  }
  return $image_sizes;
}
function lc_custom_image_setup () {
  add_theme_support( 'post-thumbnails' );
  add_image_size('Mini Square', 70, 70, TRUE);
  add_image_size('Square', 100, 100, TRUE);
  add_image_size('Featured Tabs', 150, 225, TRUE);
  add_image_size('Featured', 640, 220, TRUE);
  add_filter( 'image_size_names_choose', 'lc_insert_custom_image_sizes' );
}
add_action( 'after_setup_theme', 'lc_custom_image_setup' );
?>


3. Utiliser les nouvelles tailles d'image

Dans un article, à l'ajout d'une image, dans la zone RÉGLAGES DE L'AFFICHAGE DU FICHIER ATTACHÉ, dans la liste déroulante Taille nous visualisons bien les nouvelles tailles :

wordpress theme enfant 3
Les nouvelles tailles apparaissent. © ENI

G. Installer le thème enfant

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

Dans la gestion des thèmes, le thème enfant est clairement indiqué comme tel et le nom du thème parent est aussi indiqué.

wordpress theme enfant 4
Dans la gestion des thèmes, le thème enfant est clairement indiqué comme tel.  © ENI

Wordpress / Open source