Le thème enfant

Un thème enfant doit avoir au minimum deux fichiers :

  1. style.css
  2. functions.php

Chacun des fichiers styles comporte des données en commentaire en haut du fichier : 

/*
Theme Name:  My Child Theme. Child for Twenty Twenty Three.
Theme URI:  https://wordpress.org/themes/twentytwentythree/
Description: Child theme for the Twenty Twenty Three theme.
Author:  Frima formation
Textdomain:  wordpress
Author URI:  https://frima-formations.ch
Template:  twentytwentythree
Version:  1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Ces lignes sont essentielles pour que sinon WordPress puisse reconnaître le thème. La ligne la plus importante est celle du template, sans celle-ci, le thème ne sera pas identifier comme thème enfant. Ci-dessous, la description de chacune d'elles :

  • Theme Name : Le nom unique du thème.
  • Theme URI : Où les utilisateurs peuvent trouver le code ou la documentation du thème.
  • Description : Texte descriptif pour aider les utilisateurs à comprendre ce que fait le thème.
  • Author : votre nom
  • Textdomain : cela est utilisé pour l'internationalisation. Utilisez le domaine de texte comme deuxième paramètre dans toutes les fonctions d'internationalisation.
  • Author URI : Le site web de l'auteur.
  • Template : Le dossier où le thème parent est stocké. Utilisez le nom du dossier et non le nom du thème. Sans cette ligne, votre thème ne fonctionnera pas comme un thème enfant.
  • Version : Le numéro de version
  • Licence : La licence, qui doit être GNU
  • License URI : Le lien vers les informations sur la licence.

Créer un thème enfant et une feuille de style custom pour wordpress

Made by Janine Margueron with Scribe

Comment créer un thème enfant pour Wordpress. Cet exemple est basé sur le thème twenty twenty-three, mais vous pouvez choisir n'importe quel thème de base et adapté les informations selon celui-ci.

1. Ouvre ton dossier wordpress complet (usuellement sous htdocs de mamp) dans un éditeur de texte. Rends toi sous wp-content > themes

2. Clique droit sur le dossier du themes et crée un nouveau dossier.\ \ L'interface peut être différente puisque je n'utilise pas nécessairement le même éditeur que toi. Tu trouver l'option sous divers nom : new folder, new directory, create folder . Version français : nouveau dossier, créer un dossier, etc...tu l'auras compris ça peut être diversifié au niveau du nom, mais l'option tu l'as.

3. Donne lui un nom, usuellement, on écrit le nom_du_theme_parent-child pour savoir de quel theme de base on part.\ \ Dans mon cas, j'utilise le thème Twenty Twenty Three, je vais donc le nommer twentytwentythree-child mais vous pouvez utiliser n'importe quel autre thème parent.

4. Dans ce dossier, tu vas créer un nouveau fichier. Sur ton dossier enfant, tu fais un clique droit > créer fichier ou new file. Là aussi, le terme peux changer selon ton éditeur.

5. On va nommer ce fichier style.css

6. Copie [[Cmd]] + [[c]] et Colle [[Cmd]] + [[v]] le contenu ci-dessous dans le fichier style.css que tu viens de créer.\ \ /*\ Theme Name: Twenty Twenty-Three Child\ Theme URI: https://wordpress.org/themes/twentytwentythree\ Description: Twenty Twenty-Three Child Theme\ Author: John Doe\ Author URI: http://example.com\ Template: twentytwentythree\ Version: 1.0.0\ */

body {\ background: red; /* pour tester le bon fonctionnement */\ }

7. Dans mon cas, je suis toujours basé sur le thème Twenty Twenty Three. Il te faudra remplacer les informations par celle de ton thème parent.\ \ Remplace :

  • Theme Name par : nom de ton thème parent Child

  • Thème URI par le lien du thème parent

  • L'auteur et auteur URI tu peux entrée des informations à toi

  • /!\ Le plus important sera le Template, où il faudra impérativement entrée le nom de ton thème parent sans faute de frappe ou autre

> À l'étape suivante, je te montre où trouver ces informations

8. Rends-toi sous themes > ton_theme_parent .\ \ Le nom du dossier du thème parent, en vert ci-dessous, est celui que tu dois précisément utiliser pour lié le Template.\ \ Ensuite, tu peux ouvrir le fichier style.css pour trouver les autres informations.

9. Voici un exemple du fichier style.css du thème Twenty Twenty Three

10. Une fois tes informations correctement configurés dans le fichier style.css du ton thème enfant. On va lui ajouter un nouveau fichier. Clique droit sur ton dossier et créer fichier.

11. Nomme ton fichier : functions.php

12. Copie [[Cmd]] + [[c]] et Colle [[Cmd]] + [[v]] le contenu ci-dessous dans le fichier functions.php que tu viens de créer.\ \

<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentytwentythree-style' for the Twenty
Twenty-Three theme.
wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style',
get_stylesheet_directory_uri() . '/style.css',
array($parent_style),
wp_get_theme()->get('Version')
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
?>

13. Il faudra modifier le parent-style pour qu'il corresponde à votre thème parent. Une fois de plus c'est le nom du dossier qui fait foi. Dans le cas du thème Twenty Twenty-Three on aura donc twentytwentythree-style

14. Rends-toi dans ton admin de wordpress.\ Sous l'onglet Appearance sous les themes, tu devrais y voir le thème actif et un thème supplémentaire avec le nom que tu lui à donner. Dans mon cas, le Twenty Twenty Three

15. Active ton thème enfant en cliquant sur celui-ci puis Activate

16. Rends-toi sous sur la prévisualisation de ton site via le localhost.\ Si tout est configuré correctement, ton fond devrais être passée en rouge. Tu peux donc éditer ta feuille de style comme tu le souhaites.