Que doit-on inclure dans les fichiers style.css et functions.php d'un thème enfant WordPress ? Un tutoriel pratique complet et rigoureux.

Dans le développement de sites Web WordPress et la personnalisation de thèmes, l'utilisation deThème enfant Il s'agit de la meilleure pratique officiellement recommandée. En utilisant des thèmes enfants, il est possible d'ajuster librement les styles et les fonctionnalités sans modifier le code source du thème parent, ce qui évite de perdre le contenu personnalisé lors des mises à jour du thème parent. Cependant, de nombreux utilisateurs ignorent encore cette approche lorsqu'ils mettent en œuvre des modifications. Quels éléments doivent être écrits dans style.css et functions.php ?Cet article se concentrera sur ce thème central, en détaillant le contenu essentiel, les pratiques de rédaction recommandées et les pièges courants pour ces deux fichiers clés dans le thème enfant. Il vise à vous aider à créer et à utiliser correctement les thèmes enfants.

1. Qu'est-ce qu'un thème enfant WordPress ?

1. Définition des thèmes enfants

sous-thèmeunThèmes qui dépendent des thèmes parents pour fonctionnerIl peut hériter des éléments suivants du thème parent :

• Fichiers modèles (tels que header.php, single.php)
• Feuille de style (CSS)
• Logique des fonctions (code dans functions.php)

tout en vous permettant égalementRemplacer ou étendre dans le thème enfantCes contenus.

2. Pourquoi utiliser des thèmes enfants ?

La modification directe des fichiers du thème parent peut entraîner les problèmes suivants :

• Après la mise à jour du thème parent, toutes les modifications ont été perdues.
• Peu propice à la maintenance et au débogage
• Susceptible de causer des problèmes de compatibilité

et en utilisantsous-thèmeL'avantage réside dans :

• Le thème parent peut être mis à jour en toute sécurité à tout moment.
• Tout le contenu personnalisé est centralisé dans le thème enfant.
• Plus conforme aux normes de développement officielles de WordPress

Chaque fois que vous avez l'intention de modifier le thème, vous devez utiliser un thème enfant.

II. Structure minimale utilisable des thèmes enfants

Un thème enfant qui peut être correctement reconnu et activé par WordPress,En théorie, un seul fichier est nécessaire.: :

votre-thème-enfant/ └── style.css

Cependant, dans le développement réel,Presque tous utiliseront simultanément functions.php.: :

votre-thème-enfant/ ├── style.css └── functions.php

La raison en est :

• Le thème parent doit-il être chargé ?typedépend de la mise en œuvre du thème parent lui-même
• Pour garantir la compatibilité et la séquence de chargement des styles, il est généralement nécessaire de gérer les styles dans le thème enfant.
• Chaque fois qu'une fonctionnalité doit être ajoutée, le fichier functions.php doit être utilisé.

Résumé des responsabilités de style.css et functions.php: :

nom de fichier	Est-ce nécessaire ?	rôle principal
style.css	être	Déclarer l'identité du thème enfant, écrire le CSS
functions.php	Non (fortement déconseillé)	Contrôler le chargement du style et ajouter des fonctionnalités

• Sans style.css, le thème enfant ne peut pas être reconnu.
• La nécessité d'utiliser functions.php dépend du thème parent et des exigences réelles.
• Dans la grande majorité des projets, les deux fichiers sont utilisés simultanément.

III. Que doit contenir le fichier style.css du thème enfant ?

1. La fonction principale de style.css

Dans le thème enfant,style.css Il existe deux fonctions principales :

1. Déclarez à WordPress qu'il s'agit d'unthématique
2. Enregistrer les styles CSS propres au thème enfant

Parmi eux.Les informations relatives à la déclaration du sujet sont obligatoires.Même si vous n'écrivez pas de CSS pour le moment.

2. Informations essentielles sur l'en-tête du thème dans style.css

WordPress via style.css Utilisez les commentaires en haut du document pour identifier le sujet.

Notation minimale requise

/* Nom du thème : Mon thème enfant Modèle : dossier-du-thème-parent */

Le nom du thème et le modèle sont des thèmes enfants.indispensableChamp, description du champ :

• Nom du thèmeNom affiché pour le thème enfant dans le panneau d'administration WordPress ; personnalisable mais doit être unique.
• ModèleNom du dossier du thème parent (et non le nom d'affichage du thème). Si ce champ est mal renseigné, le thème enfant ne fonctionnera pas correctement.

3. Informations complètes recommandées pour l'en-tête du thème (meilleure pratique)

Bien que ces champs ne soient pas tous obligatoires, ils s'avèrent très utiles pour les sites web didactiques, les projets d'équipe et la maintenance à long terme.

/* Nom du thème : Mon thème enfant URI du thème : https://example.com/my-child-theme Description : Thème enfant développé à partir du thème parent XX Auteur : Votre nom URI de l'auteur : https://example.com Modèle : parent-theme-folder Version : 1.0.0 */

Les fonctions de chaque champ sont les suivantes :

• URI du thèmeURL de la page de présentation ou de description du thème (facultatif)
• DescriptionBrève description du sous-thème à des fins de gestion et d'identification.
• Auteur: Nom de l'auteur du thème
• Auteur URIAdresse du site web de l'auteur ou de l'entreprise
• VersionNuméro de version du sous-thème, facilitant la maintenance et les mises à jour ultérieures.

4. Écrivez les styles dans style.css

Sous les informations d'en-tête du thème, vous pouvez écrire directement du CSS :

body { couleur d'arrière-plan : ##f5f5f5 ; }

Une chose à garder à l'esprit :

• Fichier style.css du thème enfant Ne chargera pas automatiquement les styles du thème parent.
• L'application des styles du thème parent dépend de la mise en file d'attente correcte de la feuille de style par le thème parent.

5. Pratiques déconseillées dans style.css

Les pratiques suivantes ne sont plus recommandées :

• utiliser @import Introduction des styles de thèmes parents
• Écrire du code PHP dans style.css

Exemple d'erreur :

@import url("../parent-theme/style.css");

Cette approche peut avoir un impact sur les performances et pourrait potentiellement causer des problèmes avec l'ordre de chargement des styles.

4. Que doit contenir le fichier functions.php du thème enfant ?

1. Explication de l'objectif du fichier functions.php

sous-thème functions.php À utiliser dans :

• Gestion de la séquence de chargement des styles des thèmes parent et enfant
• Ajouter ou modifier les fonctionnalités du thème
• Comportement ajouté via des hooks dans le thème parent

Il convient de préciser que :Le fichier functions.php du thème enfant Ne remplace pas le fichier functions.php du thème parent.Au lieu de cela, il s'exécutera une fois que le thème parent aura fini de se charger.

2. Le fichier functions.php est-il absolument nécessaire ?

Techniquement parlant :

• Si le thème parent a déjà chargé correctement les styles
• De plus, vous n'avez pas besoin d'ajouter de fonctionnalité.

Les thèmes enfants peuvent fonctionner correctement sans fichier functions.php.
Cependant, dans les projets pratiques, afin d'assurer la compatibilité et la contrôlabilité,Il est toujours généralement recommandé de créer un fichier functions.php..

prendre	Est-ce nécessaire ?
Activez uniquement le thème enfant, sans modifier aucun contenu.	Pas nécessairement
La séquence de chargement des styles doit être contrôlée.	besoin
Ajouter n'importe quelle fonctionnalité	nécessairement
Projets commerciaux / à long terme	presser

3. L'approche la plus courante et la plus sûre dans functions.php : chargement des styles

Vous trouverez ci-dessous l'une des approches officiellement recommandées offrant la meilleure compatibilité :

<?php add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' ); function my_child_theme_enqueue_styles() {     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) ); }

Description :

• get_template_directory_uri() Retourner au chemin d'accès au sujet parent
• get_stylesheet_uri() Retournez au chemin style.css du thème enfant.
• Garantir un ordre de chargement correct grâce aux dépendances

Avant utilisation,Il est recommandé de consulter le fichier functions.php du thème parent.Confirmez l'emplacement de sa feuille de style et la méthode utilisée pour la charger.

4. Méthodes d'extension courantes dans functions.php

Ajouter un support de thème

add_theme_support( 'post-thumbnails' ); add_theme_support( 'title-tag' );

Menu de navigation du registre

register_nav_menus( array( 'main-menu' => 'Menu de navigation principal', ) );

Inclure d'autres fichiers fonctionnels du thème enfant

require_once get_stylesheet_directory() . '/inc/custom-functions.php';

5. Remarques sur functions.php

• Les noms de fonctions doivent rester uniques et éviter les conflits avec les parents.thématiqueou des conflits de plugins
• Dans un fichier PHP pur,Recommandé : omettre les terminateurs PHPpour éviter les erreurs de sortie

V. Exemple de thème enfant entièrement fonctionnel

Exemple de style.css

/* Nom du thème : Mon thème enfant Modèle : twentytwentyfour Version : 1.0.0 */ body {   font-family: Arial, sans-serif; }

Exemple de functions.php

<?php add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' ); function my_child_theme_enqueue_styles() {     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) ); }

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.