Un th\u00e8me enfant est un th\u00e8me reprenant toutes les fonctionnalit\u00e9s d’un th\u00e8me existant, qu’on appelera \u00ab\u00a0th\u00e8me parent\u00a0\u00bb.<\/p>\n\n\n\n
Les th\u00e8mes WordPress disponibles offrent d\u00e9j\u00e0 un large choix d’options pour les personnaliser. Mais, par exemple, disons que vous voulez modifier la couleur d’un ou plusieurs \u00e9l\u00e9ments, ou encore, rajouter une web font.<\/p>\n\n\n\n
Afin d’effectuer ces modifications, le premier r\u00e9flexe est de modifier le fichier En utilisant un th\u00e8me enfant, on est donc assur\u00e9 de disposer de la derni\u00e8re version de notre th\u00e8me, tout en gardant nos propres modifications.<\/p>\n\n\n\n\n\n\n\n Les fichiers d’un th\u00e8me enfant se placent au m\u00eame endroit qu’un th\u00e8me \u00ab\u00a0normal\u00a0\u00bb, c’est-\u00e0-dire dans le dossier Un th\u00e8me enfant doit contenir au moins deux fichiers : Le fichier Voici l’ent\u00eate (avec des commentaires ajout\u00e9s) utlis\u00e9 dans mon th\u00e8me actuel, qui est un th\u00e8me enfant de \u00ab\u00a0Twenty Eleven\u00a0\u00bb : <\/p>\n\n\n Apr\u00e8s cet ent\u00eate vous pouvez alors placer vos styles pour personnaliser encore plus votre th\u00e8me.<\/p>\n\n\n\n C’est le fichier La mise en attente d’une feuille de style se fait par la fonction Afin de s’assurer que notre fichier CSS soit charg\u00e9 en dernier (et donc b\u00e9n\u00e9ficie de la priorit\u00e9), il faut s’assurer de placer d’abord en file d’attente les fichiers externes (du th\u00e8me parent, et \u00e9ventuellement pour les webfonts).<\/p>\n\n\n\n Ces diff\u00e9rentes mises en file d’attente se font dans une fonction, qui sera alors \u00ab\u00a0hook\u00e9e\u00a0\u00bb sur l’action Voici sans attendre le contenu de mon fichier La m\u00e9thode d’inclusion des feuilles de style du th\u00e8me parent pr\u00e9sent\u00e9e ici est la m\u00e9thode actuelle et recommand\u00e9e.<\/p>\n\n\n\n Pr\u00e9c\u00e9demment, la m\u00e9thode \u00e9tait d’utiliser la r\u00e8gle CSS Si dans le r\u00e9pertoire de votre th\u00e8me enfant vous placez un fichier portant le m\u00eame nom qu’un fichier pr\u00e9sent dans le th\u00e8me parent (par exemple Contrairement aux fichiers de template, le fichier functions.php du th\u00e8me parent est conserv\u00e9 et charg\u00e9 apr\u00e8s celui de votre th\u00e8me enfant.<\/p>\n\n\n\n Cela permet donc d’ajouter des fonctionnalit\u00e9s sans casser celles du parent.<\/p>\n\n\n\n J’esp\u00e8re que cet article vous aura \u00e9t\u00e9 utile, et peut-\u00eatre donn\u00e9 envie de cr\u00e9er vos propres th\u00e8mes enfants.<\/p>\n","protected":false},"excerpt":{"rendered":" Un th\u00e8me enfant est un th\u00e8me reprenant toutes les fonctionnalit\u00e9s d’un th\u00e8me existant, qu’on appelera \u00ab\u00a0th\u00e8me parent\u00a0\u00bb. Pourquoi cr\u00e9er un th\u00e8me enfant ? Les th\u00e8mes WordPress disponibles offrent d\u00e9j\u00e0 un large choix d’options pour les personnaliser. Mais, par exemple, disons … Continuer la lecture style.css<\/code> du th\u00e8me. Mais cette solution pr\u00e9sente un probl\u00e8me, toute mise \u00e0 jour du th\u00e8me modifi\u00e9 \u00e9crasera nos ajustements… On pourrait se dire qu’il n’y a qu’\u00e0 ne pas faire cette mise \u00e0 jour. Mais l\u00e0 encore, c’est un soucis, car certains th\u00e8mes complexes peuvent pr\u00e9senter des failles de s\u00e9curit\u00e9.<\/p>\n\n\n\nComment cr\u00e9er un th\u00e8me enfant ?<\/h2>\n\n\n\n
wp-content\/themes<\/code> de votre r\u00e9pertoire d’installation de WordPress.<\/p>\n\n\n\nstyle.css<\/code> et functions.php<\/code>.<\/p>\n\n\n\nFichier style.css<\/h3>\n\n\n\n
style.css<\/code> doit commencer par un ent\u00eate (plac\u00e9 dans un commentaire) pr\u00e9cisant diff\u00e9rentes informations comme le nom du th\u00e8me, son auteur\u2026 et surtout le th\u00e8me parent.Plus de d\u00e9tail sur le Codex WordPress<\/a>.<\/p>\n\n\n\n\n\/*\nTheme Name: GeekEleven <- nom du th\u00e8me\nDescription: Th\u00e8me WordPress proche de celui de mon site. <- description qui sera affich\u00e9e dans le d\u00e9tail du th\u00e8me\nAuthor: GeekCommunicant <- nom de l'auteur\nAuthor URI: https:\/\/geekcommunicant.com\/ <- adresse du site de l'auteur\nTemplate: twentyeleven <- nom du dossier contenant les fichiers du th\u00e8me parent\nVersion:\t1.0 <- num\u00e9ro de version\n*\/\n<\/pre><\/div>\n\n\n
Fichier functions.php<\/h3>\n\n\n\n
functions.php<\/code> qui va permettre l’import (ou plut\u00f4t la mise en file d’attente, d’apr\u00e8s la documentation WordPress) du ou des fichier(s) CSS dont notre th\u00e8me enfant a besoin.<\/p>\n\n\n\nwp_enqueue_style()<\/a><\/code>.<\/p>\n\n\n\nwp_enqueue_scripts<\/code>, avec la fonction add_action()<\/a><\/code>.<\/p>\n\n\n\nfunctions.php<\/code> :<\/p>\n\n\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\n\nfunction my_theme_enqueue_styles() { \n wp_enqueue_style( 'twentyeleven-style', get_template_directory_uri() . '\/style.css' ); \/\/ le style de mon th\u00e8me parent (dont l'url est r\u00e9cup\u00e9r\u00e9e via la fonction get_template_directory)\n \t\n\twp_enqueue_style( 'web-font', 'https:\/\/fonts.googleapis.com\/css?family=Nova+Square' ); \/\/ style pour la web-font utilis\u00e9e par mon th\u00e8me\n \n\twp_enqueue_style( 'child-style',\n get_stylesheet_directory_uri() . '\/style.css', \/\/ l'url de mon style enfant est r\u00e9cup\u00e9r\u00e9e via la fonction get_stylesheet_directory_uri\n array( 'twentyeleven-style', 'web-font' ), \/\/ array permettant de pr\u00e9ciser l'ordre des d\u00e9pendances de mon th\u00e8me enfant\n wp_get_theme()->get('Version')\n );\n}\n<\/pre><\/div>\n\n\nInfos compl\u00e9mentaires<\/h2>\n\n\n\n
Ancienne m\u00e9thode<\/h3>\n\n\n\n
@import<\/code> au d\u00e9but de la feuille de style du th\u00e8me enfant. Mais cette technique peut ralentir les performances de vos pages sur certains navigateurs (voir l’article \u00ab\u00a0Link ou import<\/a>\u00a0\u00bb sur Alsacreations).<\/p>\n\n\n\n\u00c9crasement des fichiers du parent<\/h3>\n\n\n\n
header.php<\/code> ou page.php<\/code>, c’est le fichier de votre th\u00e8me qui sera utilis\u00e9.<\/p>\n\n\n\nAutre utilit\u00e9 du fichier functions.php<\/h3>\n\n\n\n
\n\n\n\n