Comment Créer et Personnaliser un Thème Enfant WordPress

Si vous aimez votre thème actuel, mais souhaitez modifier ses caractéristiques et de regarder, la bonne façon de le faire est par la personnalisation de son thème enfant. Ce tutoriel vous expliquera pourquoi cette pratique est nécessaire et vous guidera tout au long du processus afin que vous puissiez créer et éditer un thème enfant WordPress quelles que soient vos compétences techniques.

Créez et personnalisez facilement des thèmes avec L’Hébergement WordPress Hostinger!,

Commencez ici

Pourquoi utiliser les thèmes enfants WordPress

comme un thème enfant hérite des caractéristiques d’un thème maître ou d’un thème parent, vous pouvez personnaliser son code sans casser les fonctionnalités de l’original. De cette façon, si un thème reçoit une mise à jour, toutes les modifications que vous avez apportées ne seront pas écrasées.

Une autre raison d’utiliser un thème enfant est qu’il offre une solution de sécurité intégrée si jamais vous gâchez vos modifications. De plus, il vous permet de suivre efficacement les pièces que vous avez modifiées car les fichiers d’un thème enfant sont séparés de ceux de son parent.,

Comment fonctionnent les thèmes enfants WordPress

comme brièvement mentionné précédemment, un thème enfant est stocké dans un répertoire séparé du thème parent, chacun avec son propre style.css et les fonctions.les fichiers php. Vous pouvez ajouter d’autres fichiers si nécessaire, mais ces deux sont le strict minimum requis pour qu’un thème enfant fonctionne correctement.

à l’Aide de la pertinence .css et .fichiers php, vous pouvez tout modifier, du style, des paramètres de mise en page au codage réel et aux scripts utilisés par un thème enfant, même si les attributs ne sont pas présents dans son thème parent.

Pensez-y comme une superposition., Lorsqu’un visiteur charge votre site Web, WordPress charge d’abord le sous-thème, puis remplit les styles et fonctions manquants à l’aide de parties du thème principal. En conséquence, vous tirez le meilleur parti de votre conception personnalisée sans sacrifier les fonctionnalités de base du thème.

création d’un thème enfant dans WordPress

les instructions suivantes utilisent Twenty Seventeen comme base. Vous pouvez utiliser un autre thème si vous préférez. Nous allons également utiliser le Gestionnaire de fichiers Hostinger pour ajouter et modifier les fichiers, bien que FTP fonctionne également.,

Maintenant, sans plus tarder, voici comment créer un thème enfant WordPress:

  1. Accès à votre hPanel et cliquez sur Gestionnaire de Fichiers.
  2. Accédez à public_html -> wp-content -> dossier thèmes.
  3. créez un nouveau dossier en cliquant sur son icône dans le menu supérieur. Entrez le nom de votre thème enfant et cliquez sur Créer. Il est recommandé d’utiliser le nom du thème parent suivi d’un suffixe-enfant. Dans cet exemple, nous avons nommé le dossier twentyseventeen-enfant.,

    IMPORTANT: remplacez les espaces d’un dossier ou du nom d’un fichier par des tirets (-) pour éviter les erreurs.

  4. dans le dossier, créez un style.fichier css. Remplissez son contenu avec le code suivant:
    /* Theme Name: Twenty Seventeen Child Theme URL: http://yourdomain.comDescription: Twenty Seventeen Child Theme Author: Your NameAuthor URL: http://yourdomain.comTemplate: twentyseventeen Version: 1.0.0 Text Domain: twentyseventeen-child */
  5. modifiez toutes les valeurs en conséquence. Le champ le plus important est Template car il indique à WordPress sur quel thème parent votre thème enfant est basé. Une fois cela fait, cliquez sur Enregistrer et fermer.
  6. créez un autre fichier nommé functions.,php dans le même dossier, mais ne le remplissez pas avec le code du fichier du thème parent car il doit rester séparé. Au lieu de cela, copiez et collez le code ci-dessous dans le fichier vide et enregistrez-le:
    <?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?>
  7. visitez votre site Web et accédez à Appearance – > thème. Activez le thème enfant que vous venez de créer, et vous remarquerez qu’il ressemble au thème parent.

comme vous pouvez le voir, Créer un thème enfant WordPress n’est pas plus compliqué que de travailler avec un thème maître!,

personnalisation de votre thème enfant

pour personnaliser votre thème enfant, vous avez besoin d’une compréhension de base des règles CSS et de connaissances sur la façon d’inspecter les éléments afin de pouvoir identifier leur code CSS et la classe à laquelle ils sont affectés.

maintenant, jetons un coup d’œil aux bases de la personnalisation d’un. Pour ce faire, cliquez sur Personnaliser- > CSS supplémentaire à partir de votre thème enfant actif.,

le Changement de Couleur d’arrière-plan

Insérez la règle CSS suivante si vous souhaitez changer la couleur de fond de votre WordPress thème enfant:

.site-content-contain { background-color: #DEF0F5; position: relative;}

La valeur du côté background-color: correspond au code hexadécimal de la couleur que vous choisissez., Dans cet exemple, puisque nous passons du blanc au bleu clair, le résultat ressemble à ceci:

changer la couleur de la barre latérale

Vous pouvez créer un affichage agréable de vos widgets en ajoutant de la couleur à la barre latérale avec le code CSS suivant:

.widget {background: #B9EBFA;padding: 25px;}

encore une fois, n’oubliez pas de modifier le code couleur en conséquence. Vous devriez obtenir un résultat comme ceci:

changer les types, tailles et couleurs de police

pour changer le type de police, la taille et la couleur de votre thème enfant WordPress, insérez le code ci-dessous:

p {color: teal;}p {font-family: Georgia;font-size: 18px;}

la balise p représente paragraph., Comme vous pouvez le voir ci-dessous, la règle ci-dessus a modifié l’apparence des polices du paragraphe en fonction des valeurs spécifiées.

pour changer la police d’autres parties de texte, comme le titre ou l’en-tête, inspectez d’abord les éléments pour voir leurs paramètres CSS. Par souci d’illustration, essayons de changer la couleur de police du titre.

  1. tout d’abord, faites un clic droit sur le texte et sélectionnez inspecter. Localisez le lien de style CSS et ouvrez-le dans un nouvel onglet.
  2. trouvez la partie exacte que vous recherchez en utilisant CTRL+F et copiez le code dans l’onglet CSS supplémentaire. Modifiez les valeurs en conséquence.,

Vous pouvez faire la même chose pour tous les autres éléments que vous souhaitez changer.

modification de la mise en page des publications et des Pages

tout comme le CSS personnalisé D’un thème enfant WordPress remplace le style de son thème parent, les fichiers de modèles vous permettent de créer vos propres mises en page en révoquant celles par défaut.

le nouveau modèle doit avoir le même nom de fichier et être dans les dossiers qui correspondent à l’original. C’est une bonne idée de copier le fichier de modèle principal dans votre répertoire de thème enfant WordPress et de travailler à partir de cela.

Les fichiers de template principaux se trouvent dans le dossier principal du thème., Par exemple, le modèle pour afficher un seul message est unique.php, et le modèle pour les pages est page.php.

Twenty Seventeen divise également ses modèles en parties de modèles référencées dans le modèle principal à l’aide de la fonction WordPress get_template_part(). Par exemple, si vous souhaitez modifier la page.php, vous pouvez commencer par localiser les parties du modèle pour voir si ce sont les bits que vous devez modifier. Dans notre exemple de fichier, la ligne 28 se lit comme suit:

get_template_part( 'template-parts/page/content', 'page' );

Comment lire cela? template-parts / page / est le chemin du dossier., Pendant ce temps, « contenu” fait référence au caractère dans le nom du fichier avant le trait d’Union et « page” est après le trait d’Union.

ensemble, ils forment le chemin complet de wp-content/themes/twentyseventeen/template-parts/page / content-page.php.

en suivant la structure, si vous souhaitez modifier la mise en page de content-page.php, vous devez le copier dans votre dossier de thème enfant et le placer à cet emplacement: wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php.

et c’est tout, bonne édition!,

Ajout et suppression de fonctionnalités

Un autre avantage important de la création D’un thème enfant WordPress est la possibilité d’avoir des fonctions distinctes.fichier php, qui, tout comme les plugins, est utilisé pour ajouter (ou supprimer) certaines fonctionnalités en utilisant du code PHP.

Par exemple, les lignes suivantes désactiveront la fonction de clic droit dans votre thème:

Conclusion

Les thèmes enfants WordPress offrent un moyen puissant de créer un tout nouveau projet basé sur les fonctionnalités du thème principal existant sans casser sa fonction principale., Avec un peu de codage simple et de gestion de répertoire, vous pouvez modifier le thème enfant aussi peu ou autant que vous le souhaitez, offrant un large éventail de possibilités pour votre conception.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *