Codex

fr:Thèmes Enfant

Languages: English • Français • 日本語 • 한국어 • Português do Brasil • Русский • Slovenčina • ไทย • 中文(简体) • (Add your language)

Page d'accueil du Codex en français - Télécharger WordPress en français
Les utilisateurs francophones se retrouvent sur le site WordPress-Francophone, notamment sur son forum d'entraide.

Un thème WordPress enfant est un thème qui hérite des fonctionnalités d'un autre thème, appelé parent et qui vous permet de modifier et/ou d'ajouter des fonctionnalités au thème parent. Un thème enfant est le moyen le plus sûr et le plus facile de modifier un thème existant que vous vouliez faire quelques petits changements ou des modifications plus importantes. Au lieu de modifier directement les fichiers du thème, vous pouvez créer un thème enfant. Un thème enfant hérite de tous les modèles et de toutes les fonctionnalités de son thème parent, mais vous permet d'effectuer des modifications sur le thème de parent parce que le code dans le thème de l'enfant écrase code dans le thème parent.

Contents

Pourquoi Utiliser un Thème Enfant ?

Si vous souhaitez modifier un thème existant, il est préférable de le faire en créant un thème enfant plutôt qu'en modifiant directement le thème parent. Il y a plusieurs raisons pour utiliser des thèmes enfants :

  • Si vous modifiez un thème existant et qu'il est mis à jour, vos modifications seront perdues. Avec un thème enfant, vous pouvez mettre à jour le thème parent (qui peut être important en terme de sécurité ou de fonctionnalité) tout en conservant vos modifications.
  • Cela peut accélérer le temps de développement.
  • C'est une excellente façon de commencer si vous êtes en train d'apprendre le développement de thème WordPress.

Comment Créer un Thème Enfant ?

  • Structure du répertoire du thème enfant
    Créez un répertoire dans votre répertoire de thèmes pour contenir les fichiers du thème enfant. Le répertoire des thèmes est wp-content/themes. Vous pouvez nommer le répertoire comme vous voulez, mais il est d'usage d'utiliser le nom du répertoire du thème parent avec "child" (enfant) qui lui est accolé. Ainsi, par exemple, si vous faites un enfant du thème twentytwelve, le nom de votre répertoire serait twentytwelve-child.
  • Dans le répertoire du thème enfant, créer un fichier nommé style.css. C'est le seul fichier nécessaire pour faire un thème de enfant. La feuille de style doit commencer par les lignes suivantes : 
/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://example.com/
Description:    Thème enfant pour le thème Twenty Twelve
Author:         Votre nom ici
Author URI:     http://example.com/about/
Template:       twentytwelve                             
Version:        0.1.0
*/
ATTENTION : Attention : il ne faut pas mettre d'espace avant le signe : pour les noms de champ dans l'en-tête, comme on le fait habituellement en français, sans quoi cela risque de poser problème.

Vous pouvez modifier chacune de ces lignes en fonction de votre thème. Les seules lignes nécessaires sont le nom du thème et le modèle. Le modèle est le nom du répertoire du thème parent. Dans ce cas, le thème parente est le thème TwentyTwelve, de sorte que le modèle est twentytwelve, qui est le nom du répertoire où le thème TwentyTwelve réside. Si vous voulez faire un thème enfant à partir du thème dont le nom du répertoire est quelque-chose-nom-répertoire, vous devrez alors utiliser Template: quelque-chose-nom-répertoire.

  • Le style du thème enfant thème va écraser la feuille de style du thème parent, mais il y a des chances pour que vous vouliez inclure la feuille de style du thème parent. Pour ce faire, vous devez commencer la feuille de style du thème enfant avec la ligne suivante: 
@import url("../twentytwelve/style.css");

Remplacer twentytwelve avec le nom du répertoire de votre thème parent. Cette ligne doit être présente après le code d'en-tête et avant toute autre règle CSS. Si vous mettez les autres règles CSS avant la @import, cela ne fonctionnera pas.

  • Activez le thème enfant. Connectez-vous au tableau de bord de votre site, et aller dans Administration Panels > Apparence > Thèmes. Vous y verrez votre thème enfant. Cliquez sur Activer.

Fichiers de Modèle

Si vous voulez changer plus que le style, le thème de votre enfant peut écraser n'importe quel fichier dans le thème parent : il suffit pour cela d'inclure un fichier du même nom dans le répertoire du thème enfant, et il va écraser le fichier équivalent dans le répertoire du thème parent. Par exemple, si vous souhaitez modifier le code PHP pour l'en-tête du site, vous pouvez inclure un header.php dans le répertoire du thème de votre enfant, et ce fichier sera utilisé à la place du fichier header.php du thème parent.

Vous pouvez également inclure des fichiers dans le thème enfant qui ne sont pas inclus dans le thème parent. Par exemple, vous pouvez créer un modèle plus spécifique que ceux que l'on trouve dans le thème de votre parent, comme un modèle pour une page spécifique ou une catégorie archive. Voir la hiérarchie de modèle pour plus d'informations sur la façon dont WordPress décide du modèle à utiliser.

Utiliser functions.php

Contrairement au fichier style.css, le fichier functions.php du thème enfant n'écrase pas son homologue du parent. Au lieu de cela, il est chargé en plus du fichier functions.php du parent. (Plus précisément, il est chargé avant celui du parent.)

De cette façon, le functions.php du thème enfant fournit une méthode intelligente, sans problème de modification des fonctionnalités d'un thème parent. Admettons que vous vouliez ajouter une fonction PHP à votre thème. Le moyen le plus rapide serait d'ouvrir son fichier functions.php et mettre la fonction là. Mais ce n'est pas très intelligent : La prochaine fois que votre thème est mis à jour, votre fonction va disparaître. Mais il existe une autre façon intelligente de le faire : vous pouvez créer un thème enfant, puis ajoutez un fichier functions.php à l'intérieur, et ajouter votre fonction à ce fichier. La fonction va faire exactement le même travail à partir de là aussi, avec l'avantage qu'elle ne sera pas affectée par les mises à jour futures du thème parent. Ne copier pas le contenu complet du fichier functions.php du thème parent dans le fichier functions.php dans le thème enfant.

La structure du fichier functions.php est simple : Une balise PHP d'ouverture au début, une balise de fermeture PHP à la fin, et, entre eux, vos instructions PHP. Vous pouvez mettre à l'intérieur autant ou aussi peu de fonctions que vous le souhaitez. L'exemple ci-dessous montre un fichier functions.php élémentaire qui fait une chose simple : Ajouter un lien de favicone dans l'élément head de vos pages HTML. 

function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'favicon_link' );

Astuces pour les développeurs de thèmes. Le fait que le fichier functions.php d'un thème enfant est chargé en premier signifie que vous pouvez faire des fonctions utilisateur de votre thème pluggable - c'est à dire, remplaçables par un thème enfant - en les déclarant de manière conditionnelle. Par exemple : 

if (! function_exists ('theme_special_nav')) {
    theme_special_nav fonction () {
        / / Faire quelque chose.
    }
}
</ Pre>

De cette façon, un thème enfant peut remplacer une fonction PHP du thème parent simplement en le déclarant au préalable.

=== Référencement / Inclusion de Fichiers Dans Votre Thème Enfant ===

Lorsque vous avez besoin d'inclure des fichiers qui se trouvent dans la structure de répertoires de thème de votre enfant, vous allez utiliser [[Function_Reference/get_stylesheet_directory|get_stylesheet_directory()]]. Parce que le fichier style.css du thème parent est remplacé par le fichier style.css du thème enfant et votre style.css réside à la racine de votre thème enfant, la fonctions get_stylesheet_directory() pointe vers sous-répertoire de votre thème enfant (et pas le répertoire du thème parent).

Voici un exemple, en utilisant <code>require_once</code>, qui montre comment vous pouvez utiliser get_stylesheet_directory() lors du référencement d'un fichier stocké dans la structure du répertoire de thème de votre enfant.

<pre>
require_once( get_stylesheet_directory(). '/my_included_file.php' );

Autres Informations Utiles

Utilisation de Formats d'Article

Un thème enfant hérite des formats d'article tels que définis par le thème parent. Mais, lors de la création de thèmes enfant, il faut savoir que l'utilisation de add_theme_support('post-formats') va surcharger les formats définis par le thème parent, rien y ajouter.

Support RTL

Pour prendre en charge les langages RTL, ajoutez un fichier rtl.css à votre thème enfant contenant : 

/*
Theme Name: Twenty Twelve Child
Template: twentytwelve
*/

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

WordPress charge automatiquement le fichier rtl.css seulement si is_rtl(). Même si le thème parent n'a pas de fichier rtl.css, il est recommandé d'en ajouter un à votre thème enfant.

Internationalisation

Les thèmes enfants, un peu comme les autres extensions, peuvent être préparés à être traduits dans d'autres langues en utilisant les fonctions gettext. Pour plus d'informations sur le sujet, veuillez vous référez à I18n pour les développeurs WordPress (en anglais). Cette section traitera des considérations particulières en matière d'internationalisation des thèmes enfants.

  • Commencez par ajouter un répertoire de langues. Quelque chose comme my-theme/languages​​/ fonctionne plutôt bien.
  • Ensuite, un textdomain doit être chargé. load_child_theme_textdomain() peut être utilisé dans functions.php pendant l'action after_setup_theme. Les éléments suivants permettent de l'illustrer : 
<?php
/**
 * Setup My Child Theme's textdomain.
 *
 * Declare textdomain for this child theme.
 * Translations can be filed in the /languages/ directory.
 */
function my_child_theme_setup() {
	load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>

À ce stade, les chaînes codées en dur dans le thème enfant sont prêts pour être traduit. Voici un simple exemple d'un écho de la phrase "Code is Poetry" : 

<?php
_e( 'Code is Poetry', 'my-child-theme' );
?>

Le domaine de texte défini dans load_child_theme_textdomain() doit être utilisé pour traduire toutes les chaînes dans le thème enfant. Dans le cas où un fichier du thème parent a été inclus, le textdomain doit être changé à partir de celui défini dans le parent par celui du thème enfant.

Resources

Retrieved from "http://codex.wordpress.org/fr:Th%C3%A8mes_Enfant"

Codex Resources