26 avril 2017 | VBE-CREATION

Comment optimiser son thème enfant et allez plus loin avec les thèmes wordpress ?

Les thèmes wordpress se décomposent en de nombreux fichiers. Nous vous proposons dans ce tutoriel de découvrir une astuce pour chercher où agir.

Qu’est-ce qu’un thème enfant ?

WP donne accès à la mise en forme des pages. Par l’intermédiaire du panneau d’administration, dans le menu Apparence/Editeur, vous pouvez réaliser diverses opérations pour modifier l’affichage de vos pages. Ce procédé est intéressant mais pas judicieux car vos modifications risquent d’être écrasées par la mise à jour du thème. Le thème enfant permet de réaliser des modifications durables sans toucher aux fichiers d’origines. Un thème enfant est un complément du thème principal appelé « thème parent ». Dans le moteur WordPress, le thème enfant est prioritaire sur le thème parent. Toutefois, dans le cas où le thème enfant serait défectueux, le thème parent sera chargé par défaut. Il existe beaucoup de tutos sur internet. Beaucoup sont en anglais sous l’appellation wordpress child theme ou child theme wordpress.

Thème enfant, comment le créer ?

La mise en place d’un thème enfant se limite à trois étapes obligatoires

1. Créer un dossier dans l’arborescence des thèmes
2. Créer un fichier style.css
3. Créer un fichier functions.php

Dans le tuto vidéo ci-dessus, vous pouvez suivre pas à pas les étapes pour créer un thème enfant WP.

Commencez la création du thème enfant wordpress

Thème WP, accueillir le thème enfant

Tout d’abord, il faut commencer par créer un nouveau dossier dans l’arborescence des thèmes wp-content/themes. Le nom donné à ce dossier sera le nom du thème enfant. Utiliser un nom sans majuscules, espaces ni caractères spéciaux. Le tiret du 6 (-) peut être utilisé.

Fichier style.css pour relier thème enfant et thème parent

Ensuite, dans le dossier précédemment créé, il faut ajouter un fichier que l’on nommera « style.css ». Dans ce fichier, il faudra créer un entête sous forme de commentaire, voir exemple ci-dessous :

/*
Theme Name: theme-enfant
Template: theme-parent
*/

Attention à pas mettre d’espace à la fin des paramètres « Theme Name, Template » (mettre les « : » à la fin des mots sans espace). Attention également à bien respecter la casse et l’orthographe pour les noms de thème enfant et thème parent.

Fichier functions.php pour charger le CSS du thème parent wordpress

Enfin, le thème enfant hérite des propriétés CSS du thème parent, à condition de le demander. Il faut donc dans un fichier functions.php, placé à la racine du thème enfant (à côté du style.css), inscrire les lignes suivantes :

<?php
// fonction qui charge la feuille de style du thème parent
function montheme_enqueue_styles() {
wp_enqueue_style(
'styleParent', get_template_directory_uri() . '/style.css'
);
}
// exécution de la fonction
add_action(
'wp_enqueue_scripts', 'montheme_enqueue_styles'
);
?>

A cette étape là, notre thème enfant est fonctionnel. Il ne nous reste plus qu’à l’activer. Pour cela, il faut se rendre dans le panneau d’administration de notre site WordPress, aller dans Apparence/Thèmes et cliquer sur le bouton « Activer » présent sur notre thème enfant.

.

Associer une image au thème enfant

Dans le panneau d’administration WP, le thème enfant apparaît sans image. Il faut ajouter un fichier « screenshot.jpg » ou « .png » à la racine du thème enfant. Cette image doit avoir pour dimension 880 x 660 pixels.

Ajouter une description au thème enfant

On peut ajouter des compléments d’informations pour décrire notre thème enfant. Pour cela, complétez le fichier « style.css », comme indiqué ci-dessous

/*
Theme Name: theme-enfant
Template: theme-parent
Description:  Décrire le thème enfant ici
Author:       Ajouter un nom d'auteur
Author URI:   Ajouter un lien vers l'auteur
Version:      1.0.0 Ajouter ici un numéro de version
*/

26 avril 2017 | VBE-CREATION