Un thème d'enfant dans WordPress est un «sous-thème» qui hérite du style et des fonctionnalités d'un autre thème, appelé thème parent, tout en vous permettant de créer des personnalisations en toute sécurité sans modifier les fichiers du thème d'origine.
Pour créer un thème enfant, créez un dossier dans le répertoire WP-Content / Themes. Ce dossier doit inclure un fichier de style.css personnalisé et un fichier functions.php. La feuille de style du thème de l'enfant se charge après le thème parent, permettant à votre CSS personnalisé de prendre la priorité et de s'assurer que les mises à jour du thème parent n'écraseront pas vos modifications.
Un thème d'enfant est un ensemble d'instructions qui superpose le thème original, vous permettant de mettre à jour le thème principal, comme vingt-sept, vingt-dix-neuf ou vingt-vingt, sans perdre vos personnalisations. Explorons les concepts clés, les étapes pour créer un thème enfant et les meilleures pratiques pour le développement du thème.
Quelle est la différence entre les thèmes des parents et des enfants?
Un thème parent est un thème WordPress complet avec tous les fichiers et styles nécessaires. Il a son propre dossier et un en-tête de style.css avec métadonnées. Une fois activé, il sert de thème actif pour votre site, offrant des mises en page et des styles.
Un thème d'enfant hérite des fonctionnalités et des styles de son thème parent. En faisant référence au dossier parent dans l'en-tête de la feuille de style du thème de l'enfant, WordPress charge le style du parent.css avant CSS de votre thème enfant. Cela vous permet d'ajouter ou de remplacer les fichiers de modèle et d'inclure des CSS supplémentaires sans modifier le style du thème parent .css.
Avantages de l'utilisation d'un thème enfant
Tirer parti d'un thème enfant offre plusieurs avantages pratiques, en particulier lors du maintien ou de l'extension d'un thème personnalisé complexe:
- Mises à jour sûres : la mise à jour des fichiers du thème parent n'écrasera pas vos modifications personnalisées dans le répertoire de thème de l'enfant. Vous pouvez appliquer en toute confiance les correctifs de sécurité et les améliorations des fonctionnalités au parent sans perturber l'apparence et la sensation de votre site.
- Nettoyer la séparation du code : Tous les code personnalisés, des ajustements de fichiers CSS aux extraits de code PHP, vit dans le thème de l'enfant. Cette séparation rend vos modifications faciles à suivre, à déboguer et à supprimer si nécessaire, plutôt qu'à chasser le code du thème parent.
- Développement de thème plus rapide : un créateur de thème d'enfant ou un plugin de configurateur de thème enfant (comme le configurateur officiel de thème enfant) peut échafauner un nouveau thème enfant en quelques secondes. Vous passez moins de temps à installer des dossiers et plus sur la conception et les fonctionnalités.
- Réutilisabilité : une fois que vous avez créé un nouveau thème enfant pour un site, vous pouvez l'emballer en tant que fichier zip et le télécharger dans d'autres installations WordPress, ce qui permet de gagner du temps sur des tâches de développement de thème répétitives.
- Plateforme d'apprentissage : pour les développeurs de thèmes en herbe, les thèmes enfants offrent un moyen accessible d'expérimenter avec des fichiers de modèles, des crochets d'action et des filtres sans risquer de site en direct.
Fonctions d'un thème enfant
Un thème d'enfant dans WordPress est essentiel dans la personnalisation sûre et évolutive du site. Ses fonctions clés comprennent:
- Héritage des styles et mises en page de thème parent : il se charge et s'appuie sur la feuille et la structure de style du thème parent, en préservant tous les éléments de conception originaux et mises en page.
- Styling et modèle de modèle personnalisés : les développeurs peuvent remplacer les styles, les en-têtes, les pieds de page, etc. via le fichier CSS du thème enfant et les fichiers de modèle copiés.
- Ajout ou modification des fonctionnalités : le fichier functions.php dans un thème enfant vous permet d'écrire ou de modifier le code PHP pour modifier le comportement de WordPress, sans toucher la logique du thème de base.
- Séparation du code personnalisé des mises à jour du thème : les personnalisations restent isolées des mises à jour du thème parent, vous pouvez donc maintenir la sécurité et les améliorations des performances sans perdre de modifications.
- Simplifier les tests de thème et le prototypage : idéal pour expérimenter la mise en page ou les changements de fonctionnalité sur un site WordPress sans compromettre la stabilité.
Création d'un thème enfant (étape par étape)
Vous pouvez créer un thème d'enfant manuellement ou utiliser un plugin de configurateur de thème enfant. Vous trouverez ci-dessous le processus manuel, qui vous donne un contrôle complet sur le dossier et les fichiers du thème de l'enfant.
- Créez le répertoire de thème Child : dans votre installation WordPress, accédez à WP-Content / Thèmes. Créez un nouveau dossier, par exemple, vingtone-enfant, si vous ciblez le thème de vingt et un en tant que parent. Ce répertoire de thème enfant devient le conteneur de tous vos modèles et actifs personnalisés.
- Ajoutez la feuille de style (style.css) : à l'intérieur du dossier du thème de l'enfant, créez un fichier nommé style.css. Ajouter l'en-tête suivant en haut:
/ *
Nom du thème: Vingt-et un enfant
thème de l'enfant Uri: https://example.com/twentyon-child
Description: Un enfant thème pour le vingt-et-un thème
Auteur: Votre
modèle de nom: Vingt-TwentyOe
Version: 1.0.0
* /
Changez le nom du thème, le modèle et autres champs pour correspondre au nom du thème de votre enfant et au dossier du thème parent.
- ENQUÊTEUR LE PARENT ET STYLES ENFANTS : Créez un fichier Functions.php dans le dossier du thème Child. Utilisez cet extrait de base pour charger correctement les styles:
wp_enqueue_style ('parent-style', get_template_directory_uri (). '/style.css');
wp_enqueue_style ('enfant-style',
get_stylesheet_directory_uri (). '/style.css',
array (''-style '),
wp_get_theme () -> get (' version ')
);
}
add_action ('wp_enqueue_scripts', 'my_child_enqueue_styles');
Cela garantit que la feuille de style du thème parent se charge d'abord, suivie de tout CSS personnalisé dans le thème de votre enfant.
- Activez le thème de votre enfant : zip le dossier du thème de l'enfant (si le téléchargement via le tableau de bord) ou actualisez simplement la section des thèmes en apparence. Localisez votre nouveau thème enfant, cliquez sur Activer et vérifiez correctement votre site avec la conception du thème parent et les modifications de votre thème enfant.
Comprendre les fichiers de thème de l'enfant
Un thème d'enfant entièrement fonctionnel comprend généralement:
- Style.css : tient les métadonnées d'en-tête du thème de l'enfant et tous les CSS personnalisés.
- functions.php : Ce fichier contient le code d'agitation ci-dessus et tout extrait de fichiers PHP supplémentaire, crochets ou filtres pour étendre les fonctionnalités.
- Fichiers de modèle (facultatif): Copiez n'importe quel modèle de thème parent, tel que header.php, single.php ou page.php, dans votre dossier de thème enfant pour le remplacer. WordPress utilisera votre version au lieu des parents.
- Capture d'écran.png (Facultatif): Une image d'aperçu s'affiche dans le tableau de bord des thèmes, dimensionnée à 1200 × 900 px.
- Assets / (Facultatif): un sous-dossier pour les images spécifiques au thème enfant, le JavaScript ou d'autres ressources.
Tous les autres fichiers du thème parent qui ne sont pas remplacés restent intacts, donc le thème de votre enfant «hérite» de tout, du parent, y compris les menus, les widgets et les options de thème.
Options adaptées aux débutants pour personnaliser WordPress sans thème enfant
Il existe des alternatives plus faciles à utiliser un thème enfant pour les utilisateurs qui souhaitent personnaliser leur site WordPress mais qui ne nécessitent pas de modifications de thème avancées. Ces méthodes sont idéales pour les débutants qui souhaitent modifier le style, la mise en page ou les fonctionnalités sans éditer des fichiers principaux ou créer une structure de thème distincte.
Voici les méthodes de personnalisation les plus courantes pour les débutants:
- Customissant du thème (apparence> Personnaliser): La plupart des thèmes WordPress modernes incluent des paramètres étendus dans le personnalisateur intégré, vous permettant d'ajuster les couleurs, les polices, les logos et les dispositions de page d'accueil sans toucher de code.
- Panneau CSS supplémentaire: Situé dans le personnalisateur, ce champ vous permet d'écrire des extraits CSS personnalisés qui remplacent le style du thème. Les modifications s'appliquent instantanément et sont enregistrées avec vos paramètres de thème.
- Plugins CSS personnalisés: les plugins comme CSS personnalisés simples ou WP ajoutent des CSS personnalisés offrent un moyen sûr et autonome d'ajouter des règles CSS, même si vous modifiez votre thème plus tard.
- Plugins spécifiques au site: Au lieu de modifier vos fichiers de thème, vous pouvez créer un plugin spécifique au site léger pour les fonctionnalités de base comme les shortcodes, les types de publication personnalisés ou les ajustements PHP mineurs.
- Buildeurs de page (par exemple, élémentor, Builder Beaver): ces outils de glisser-déposer fournissent un contrôle visuel sur les mises en page et la conception, ce qui facilite la personnalisation sans écrire une seule ligne de code.
Ces méthodes sont parfaites pour les utilisateurs qui souhaitent une flexibilité sans la complexité de la gestion d'un dossier de thème enfant ou des fichiers d'édition manuellement. Ils s'assurent que les modifications restent intactes dans les mises à jour du thème (dans la plupart des cas) et ne nécessitent pas une expérience d'accès FTP ou de développement du thème.
Pièges et dépannage communs
Même les développeurs de thèmes expérimentés peuvent trébucher lorsque vous travaillez avec des thèmes pour enfants. Voici quelques contrôles rapides:
- Mauvais nom de modèle : assurez-vous que la ligne de modèle dans votre style.css correspond exactement au dossier du thème parent (sensible à la cas).
- Thème de l'enfant non actif : après l'installation, n'oubliez pas d'activer le thème de l'enfant; Sinon, votre CSS et PHP personnalisés ne fonctionneront pas.
- Problèmes de mise en cache CSS : les caches de navigateur ou de plugin peuvent masquer les modifications CSS. Effacez les caches ou utilisez des feuilles de styles versés dans vos appels d'observation.
- Dépendances manquantes : si vous comptez sur une fonction de thème parent, confirmez en utilisant la priorité de crochet correcte afin que le code parent se charge d'abord.
Meilleures pratiques en matière de développement du thème
Voici quelques meilleures pratiques pour le développement du thème WP:
- Gardez les fonctionnalités dans les plugins : si vous ajoutez des fonctionnalités qui ne sont pas strictement présentation, comme les types de publiques personnalisés ou les shortcodes, envisagez de les emballer comme un plugin plutôt que d'encombrer le thème de votre enfant.
- Utilisez un configurateur de thème enfant : des outils comme le plugin de configuratrice de thème enfant peuvent automatiser la création de dossiers, la configuration d'en-tête et les routines de file d'attente, ce qui est idéal pour les en-têtes de fichiers CSS d'édition moins confortables ou les fichiers PHP manuellement.
- Maintenez le contrôle de la version : stockez votre thème d'enfant dans GIT ou un autre VCS. Les rejets de balise avant les modifications significatives pour reculer facilement si quelque chose se casse.
- Documentez vos modifications : gardez une simple lecture.md dans votre dossier de thème d'enfant répertoriant vos personnalisations, donc les collaborateurs et l'avenir vous comprenez vos modifications.
Devriez-vous utiliser un thème d'enfant WordPress?
Comprendre quand utiliser un thème enfant et quand ne pas vous faire gagner du temps et à l'épreuve de votre site. Bien que les thèmes enfants soient de puissants outils pour les développeurs et les utilisateurs avancés, ils ne sont pas toujours nécessaires pour chaque tâche de personnalisation.
Voici comment décider:
Utilisez un thème enfant si:
- Vous devez remplacer ou étendre les fichiers de modèle (par exemple, single.php, en-tête.php).
- Vous prévoyez d'écrire des fonctions PHP personnalisées ou des crochets de filtre via des fonctions.php.
- Votre thème recevra des mises à jour régulières et vous souhaitez préserver les modifications.
- Vous construisez un site client ou un environnement de mise en scène avec une logique de conception personnalisée.
Évitez un thème d'enfant si:
- Vous n'avez besoin que de réglages visuels de base, comme les changements de couleur ou de police.
- Votre thème parent prend en charge les paramètres de personnalisation robustes ou l'édition complète du site.
- Vous préférez utiliser des constructeurs de pages ou des plugins de conception pour les modifications de mise en page.
- Vous utilisez un thème basé sur des blocs (par exemple, vingt-quatre ans), où les thèmes enfants sont moins pertinents en raison des pièces de modèle et des styles mondiaux.
Conseil de pro: Pour les utilisateurs entre les deux, envisagez de commencer par des modifications mineures à l'aide du personnalisateur ou d'un plugin CSS. Si vos besoins augmentent, vous pouvez passer à un thème enfant sans perdre vos personnalisations initiales.
En pesant votre niveau de confort technique et vos objectifs de site à long terme, vous pouvez choisir en toute confiance le bon chemin, que ce soit un thème d'enfant ou une alternative plus simple.
Quand ne pas utiliser un thème enfant
Bien que puissants, les thèmes des enfants ne sont pas toujours le bon choix:
- Ajustements CSS mineurs : un plugin comme «CSS personnalisé simple» pourrait suffire à plusieurs modifications de style.
- Reads complètes : il peut être plus propre si vous construisez une mise en page entièrement nouvelle, créant un thème personnalisé à partir de zéro ou en partant d'un thème de démarrage.
- Sites sensibles aux performances : Chargement des fichiers de style multiple.css et des crochets PHP supplémentaires peuvent ajouter des frais généraux. Auditez les actifs de votre thème enfant et envisagez d'inlinger CSS critique si la vitesse est une priorité.
Téléchargement et distribution du thème de votre enfant
Une fois que le thème de votre enfant est prêt:
- Zip The Child Theme Folder : Compress the Folder (par exemple, TwentyOn-Child.zip ).
- Téléchargez via Dashboard : Accédez à Apparence> Thèmes> Ajouter un nouveau thème de téléchargement , sélectionnez votre zip et cliquez sur Installer maintenant .
- Activer et tester : après l'activation, parcourez les pages clés pour confirmer tout affichage et fonctions comme prévu.
- Partagez avec les autres : Si vous avez construit un thème enfant , envisagez de le distribuer sur GitHub ou dans le WordPress.org (directives suivant), permettant à d'autres propriétaires de sites de bénéficier.
Pensées finales
L'utilisation d'un thème enfant est le moyen le plus sûr et le plus efficace de personnaliser un thème WordPress sans toucher les fichiers d'origine. Il vous permet d'ajouter des CSS personnalisés, de modifier des modèles et de mettre à jour en toute sécurité le thème parent sans perdre de modifications. Qu'il s'agisse de créer un nouveau thème d'enfant à partir de zéro ou de peaufiner une approche innovante pour les débutants et les développeurs.
Avez-vous besoin d'une aide experte en créant votre thème WordPress Child? Seahawk offre des services professionnels pour vous aider à démarrer correctement.