WordPress

Créer un thème enfant rapidement sur WordPress

creer theme enfant wordpress

Introduction

Les développeurs de WordPress ont ajouté la possibilité de créer des thèmes enfants afin que vous puissiez créer des sous-thèmes basés sur les caractéristiques d’un thème parent ou thème principal. Un thème enfant vous permet d’utiliser et de modifier un thème principal, puis d’enregistrer séparément le thème enfant sans affecter le thème parent. Dans ce tutoriel, vous apprendrez comment créer et personnaliser un thème enfant sur WordPress.

Pourquoi devriez-vous utiliser un thème enfant sur WordPress

Un thème enfant vous permet de modifier un thème parent autant que vous le souhaitez. Vous pouvez ensuite modifier le thème enfant sans affecter le thème parent ou tout autre projet en l’utilisant comme point d’ancrage pour ses propres thèmes enfants.

Comment les thèmes enfant WordPress fonctionnent

Un thème enfant réside dans un dossier distinct du thème parent et chaque dossier enfant doit inclure ses propres fichiers style.css et functions.php . D’autres fichiers et types de fichiers personnalisés peuvent être ajoutés au besoin, mais ces fichiers sont recommandés pour que le thème fonctionne correctement.

En utilisant les fichiers .css et .php appropriés, vous pouvez modifier tout, depuis les paramètres de style et de mise en page, jusqu’au code PHP et aux scripts utilisés par le thème enfant. Même si ces scripts ne sont pas présents dans le dossier du thème parent.

Pensez à votre thème enfant comme une superposition du thème parent. Lorsqu’un visiteur charge votre site Web, WordPress charge d’abord le thème enfant, puis hérite des styles et des fonctions manquantes du thème parent. Par conséquent, la majorité de votre code d’arrière-plan vient encore du dossier parent mais est modifié selon les paramètres du thème enfant avant que le contenu ne s’affiche sur la page.

Ce dont vous aurez besoin

Avant de créer un thème enfant,assurez vous d’avoir les éléments suivants:

  • Accès à au tableau de bord d’administration WordPress
  • Accès au gestionnaire de fichiers (recommandé) ou FTP

Étape 1 – Création d’un thème enfant dans WordPress

Créer un thème enfant n’est pas plus compliqué que le travail que ce vous avez déjà fait avec le thème principal.

Vous allez créer un dossier pour le thème enfant dans le dossier wp-content / themes. Il est préférable de maintenir une bonne organisation en ajoutant -child à la fin du nom du thème enfant. Vous pouvez également ajouter le nom du projet si vous préférez. Ne mettez pas d’espaces dans le nom du fichier car ils peuvent provoquer des erreurs. Pour créer un nouveau dossier, vous pouvez utiliser le client FTP ou le Gestionnaire de fichiers.

L’exemple suivant utilise le Gestionnaire de fichiers pour créer un thème enfant basé sur le thème Twenty Seventeen, de sorte que le chemin d’accès complet au dossier du thème enfant sera wp-content/themes/twentyseventeen-child .

  1. Accédez au panneau de configuration Hostinger et cliquez sur Gestionnaire de fichiers .
  2. Accédez à votre dossier d’installation WordPress (généralement appelé public_html ) et ouvrez le dossier wp-content -> themes .
  3. Cliquez sur l’icône Créer un nouveau dossier , entrez le nom du thème de votre enfant et cliquez sur Créer .create wordpress child theme folder
  4. Accédez au dossier du thème enfant nouvellement créé.
  5. Cliquez sur le bouton Nouveau fichier, entrez style.css comme nom de fichier, puis cliquez sur Créer .create style css for child theme
  6. Remplissez le fichier avec le code suivant:
    */
     Theme Name: Twenty Seventeen Child
     Theme URL: http://hostinger-tutorials.com
     Description: Twenty Seventeen Child Theme
     Author: John Doe
     Author URL: http://hostinger-tutorials.com
     Template: twentyseventeen
     Version: 1.0.0
     Text Domain: twentyseventeen-child
     */ Custom CSS goes after this line
  7. Changez toutes les valeurs pour qu’elles correspondent à votre thème et nom de domaine. Les champs les plus importants sont les champs Template et @import car ils indiquent à WordPress quel thème parent est basé sur votre thème enfant. Une fois que vous avez terminé, cliquez sur Enregistrer .child theme custom css with rules
  8. Ajoutez un nouveau fichier functions.php dans le même dossier, mais ne copiez / collez pas le code du fichier du thème parent, car il doit rester distinct des modifications apportées au thème enfant. Au lieu de cela, créez un fichier vierge ou ajoutez les nouvelles fonctions .php que vous voulez pour votre thème enfant.
  9. Dans la zone d’ administration de WordPress , accédez à Apparence -> Thèmes pour voir votre nouveau thème enfant et cliquez sur Activer .Screenshot 1
  10. Visitez votre site Web, et vous verrez que votre thème a quelques problèmes évidents (comme illustré ci-dessous). Ne paniquez pas, le fichier functions.php ne charge pas encore le CSS du thème parent.child visualisation
  11. Dans la zone d’administration de WordPress , accédez à Apparence -> Editeur et choisissez functions.php .
  12. WordPress a une fonction pour charger le CSS à partir de thèmes parents. Copiez et collez le code suivant dans le fichier functions.php du thème enfant:
    <?php
     add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
    
    function enqueue_parent_styles() {
     wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
     }
     ?>
  13. Cliquez sur Mettre à jour au bas de la page pour enregistrer vos modifications.
  14. Visitez votre site Web à nouveau. Vous remarquerez que le CSS est chargé et que votre thème enfant ressemble en tous points au thème parent.visualisation finaletheme enfant wordpress

Comme vous pouvez le voir la création d’un thème enfant sur WordPress est assez simple si vous vous y prenez étape par étape.

Étape 2 – Personnalisation d’un thème enfant WordPress

Vous souhaitez probablement personnaliser l’apparence de votre thème enfant. C’est pour ça que vous l’avez créé en premier lieu, non ?

Étape 2.1 – Personnalisation du look de votre thème enfant

Pour personnaliser l’aspect de votre thème, vous devez modifier le fichier custom.css du thème enfant. Vous pouvez utiliser un éditeur de texte et un client FTP, un gestionnaire de fichiers ou utiliser l’éditeur WordPress ( Apparence -> Éditeur ). Vous avez également besoin de comprendre les règles de base du CSS et savoir comment inspecter les éléments à l’aide de votre navigateur.

Par exemple, pour modifier la couleur d’arrière-plan du thème enfant WordPress, ajoutez la règle CSS suivante au fichier style.css :

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

Voir ci-dessous pour savoir comment cela va affecter votre site WordPress. Suivez un processus similaire pour tout autre élément que vous souhaitez modifier.

contenu vert theme enfant wordpress

Même chose pour tout autre élément que vous voulez changer.

Étape 2.2 – Ajout et suppression de fonctionnalités

Un autre grand avantage de l’utilisation d’un thème enfant est la possibilité d’avoir un fichier functions.php distinct qui, tout comme Plugins, est utilisé pour ajouter (ou supprimer ) certaines fonctionnalités . En ayant functions.php dans un thème enfant séparé, vous pouvez être sûr que toutes les modifications ne disparaîtront pas après une mise à jour de thème.
Pour ajouter de nouvelles fonctionnalités à votre thème, ajoutez du code PHP au fichier functions.php de votre thème enfant. Par exemple, le code suivant désactive la fonctionnalité de recherche WordPress:

function disable_search( $query, $error = true ) {
 if ( is_search() ) {
 $query->is_search = false;
 $query->query_vars[s] = false;
 $query->query[s] = false;
 // to error
 if ( $error == true )
 $query->is_404 = true;
 }
 }

add_action( 'parse_query', 'disable_search' );
add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

Conclusion

Créer un thème enfant sur WordPress est un moyen simple et puissant pour créer un thème entièrement nouveau basé sur les paramètres d’un thème principal sans affecter les fichiers du thème principal, et vice versa. Avec un peu de codage simple et une bonne organisation, vous pouvez modifier le thème enfant autant que vous voulez, offrant un large éventail de possibilités créatives !

J’espère vous avoir été utile et je vous revois très vite dans un futur tutoriel !

Ajouter un commentaire

Cliquez ici pour poster un commentaire

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Commencez à économiser dès maintenant !

Hébergement et nom de domaine tout-en-un à partir de

2
45
/mois
>