Veuillez noter que je publie maintenant mes articles sur Apical, ma plateforme d'apprentissage.

Développer un thème enfant

Attention
Vous trouverez une version plus à jour de cet article sur Apical, votre plateforme d'apprentissage :
https://apical.xyz/fiches/le_theme_enfant/Pourquoi_un_theme_enfant

Apical, ma plateforme d'apprentissage

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

Catégories

4 commentaires