Créez votre premier thème enfant WordPress à partir de rien (avec des exemples de code)

De nombreux débutants utilisent leWordPressLors de la construction d'un site web, vous souhaitez apporter des modifications personnalisées au site sans détruire le thème d'origine. À ce stade, l'outilThème enfant C'est la solution la plus sûre et la plus souple. Voici un guide étape par étape sur la façon de créer votre premier thème enfant.

Image [1] - Créez votre premier tutoriel de thème enfant WordPress à partir de zéro

Tout d'abord, qu'est-ce qu'un thème enfant WordPress ?

Un thème enfant est un thème dépendant du thème principal (thème parent), qui hérite du thème principal (thème parent).thématiqueLe thème enfant contient des fonctionnalités et des styles, mais il est libre de modifier certains fichiers sans que cela n'affecte le thème principal. Lorsque le thème principal est mis à jour, le contenu personnalisé du thème enfant n'est pas écrasé, ce qui est idéal pour les sites nécessitant une maintenance à long terme.

Simple à comprendre :
Thème principal = Fonctions de base
Sous-thèmes = extensions personnalisées

II. préparation avant de créer des sous-thèmes

Avant de commencer, préparez les éléments suivants :

  1. Accès au backend de WordPress et à la gestion des fichiers FTP ou de l'hébergement.
  2. Le nom du dossier du thème principal (par ex. blocksyetastraetvingt-deux vingt-quatre).
  3. Un éditeur de texte (par exemple VS Code, Notepad++).

III. création de dossiers de sous-thèmes

Accès au catalogue du site wp-content/themes/Créez un nouveau dossier en respectant le format de dénomination habituel :

Nom du sujet-enfant

Disons que votre thème principal est woodmartCela.sous-thèmeLe dossier est ensuite nommé :

l'enfant de woodmart

Cela permet au système de reconnaître automatiquement la paternité et est également facile à gérer.

Image [2] - Créez votre premier tutoriel de thème enfant WordPress à partir de zéro

Quatrièmement, écrire le fichier style.css

existent woodmart-Enfant. créez un nouveau dossier nommé style.css et écrire le code suivant :

/*
Nom du thème : Woodmart Child
Modèle : woodmart
Auteur : Your Name
Version : 1.0
Description : Il s'agit d'un thème enfant du thème Woodmart.
*/Woodmart

Description :

  • Nom du thèmeNom d'affichage du sous-sujet : Nom d'affichage du sous-sujet : Nom d'affichage du sous-sujet.
  • ModèleLe nom du catalogue pour le thème principal, qui doit être rempli correctement.
  • D'autres informations peuvent être personnalisées.

Sauvé.WordPressCe n'est qu'ensuite que des sous-thèmes peuvent être identifiés.

V. Chargement du style du thème principal

Une fois le thème enfant créé, vous devez également faire en sorte qu'il hérite des styles CSS du thème principal.
Dans le répertoire du thème enfant, créez un nouveau fichier functions.php et ajoutez le code suivant :

``````

Rôle :
Ce code permet au thème enfant de charger automatiquement les fichiers de style du thème principal afin de garantir une apparence cohérente des pages.

VI. activer le sub en arrière-planthématique

Retournez dans le backend de WordPress → Apparence → Thèmes pour voir le thème enfant que vous venez de créer "Enfant de Woodmart".

Image [3] - Créez votre premier tutoriel de thème enfant WordPress à partir de zéro


Cliquez sur "Enable", le thème enfant est alors officiellement effectif. L'apparence du site ne changera pas, mais vous pouvez librement modifier les fichiers de modèle ou les styles dans le thème enfant, sans affecter le thème principal.

VII. personnaliser le contenu du thème enfant

Une fois cette option activée, vous pouvez commencer à personnaliser l'opération :

1) ModificationsCSStype

directement dans le style.css Inscrire les nouveaux styles avec une priorité plus élevée que le thème principal. Exemple :

h1 {
    font-size : 28px ; color : #0073aa ; h1 {
    color : #0073aa.
}

2. modification des fichiers modèles

Vous souhaitez modifier la structure des pages, copiez les fichiers du thème principal dans le dossier du thème enfant. Exemple :
faire une copie de header.php Il suffit d'aller dans le répertoire du thème enfant et de modifier le code qui s'y trouve.

3. ajouter des fonctions fonctionnelles

Dans la rubrique functions.php Ajoutez des personnalisations telles que l'ajout d'un nouveau menu de navigation ou la modification du logo sur la page de connexion.

VIII. essais et maintenance

remplirsous-thèmeVeillez ensuite à le tester :

  • Ouvrez la page du site web et confirmez que le style et la fonctionnalité sont corrects ;
  • Vérifiez dans la console si des erreurs ont été signalées ;
  • Mettez régulièrement à jour le thème principal afin d'en assurer la compatibilité.

Recommandation :
Sauvegardez les fichiers du thème enfant avant chaque modification afin d'éviter toute utilisation abusive.

IX. compétences avancées : ajout de modèles personnalisés

Si vous souhaitez utiliser une mise en page spéciale pour une certaine page, vous pouvez créer un nouveau fichier de modèle personnalisé dans le thème enfant.
Par exemple, la création de page-custom.phpÉcrire :

<?php
/*
Template Name: Custom Page Layout
*/
get_header(); ?>

<h2>Voici la page du modèle personnalisé</h2>

<?php get_footer(); ?>

Ce modèle peut ensuite être sélectionné lors de la création de nouvelles pages dans le backend afin de mettre en œuvre rapidement différentes mises en page.

X. Résumé des avantages des sous-thèmes

  1. Sécurité élevéeLes mises à jour du thème principal n'affectent pas le contenu personnalisé.
  2. Entretien facileLes règles de l'Union européenne sont les suivantes : clarté du code et gestion hiérarchique.
  3. Expansion flexibleLes fonctions peuvent être ajoutées ou modifiées.
  4. structurellement indépendantLes problèmes sont plus faciles à diagnostiquer.

Les sous-thèmes ne sont pas seulement la première étape pour les débutants, mais aussi un outil essentiel pour les développeurs professionnels afin de créer des sites web personnalisés. En quelques étapes simples, vous pouvez créer votre propre site web.WordPressPlus contrôlable et plus facile à entretenir.


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
Service clientèle WeChat
Tel : 020-2206-9892
QQ咨询:1025174874
(iii) Courriel : [email protected]
Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.
© Déclaration de reproduction
Auteur : linxiulian
LA FIN
Si vous l'aimez, soutenez-le.
félicitations109 partager (joies, avantages, privilèges, etc.) avec les autres
commentaires achat de canapé

Veuillez vous connecter pour poster un commentaire

    Pas de commentaires