Débuter avec les thèmes enfants WordPress ?

Dans ce tutoriel, vous apprendrez à créer un thème enfant WordPress. Si vous êtes nouveau sur WordPress et que vous ne savez pas ce qu’est un thème enfant WordPress, je vais tout vous expliquer.

Les thèmes WordPress sont une collection de fichiers PHP, JavaScript et CSS. En termes simples, avec les thèmes WordPress, vous pouvez changer l’apparence de votre blog. Les thèmes WordPress peuvent être très puissants.

Les thèmes WordPress Premium offrent de nombreuses fonctionnalités et fonctionnalités avancées. Des milliers de thèmes WordPress gratuits et premium sont disponibles.

Vous pouvez créer un thème WordPress à partir de zéro ou vous pouvez créer un thème WordPress basé sur un autre thème. Chaque version de WordPress est livrée avec des thèmes WordPress préinstallés et si vous n’aimez pas le thème WordPress préinstallé, vous pouvez installer un autre thème WordPress ou vous pouvez créer un thème enfant.

Pourquoi les thèmes enfants WordPress ?

Créer un thème enfant WordPress signifie que vous prenez un thème existant et que vous créez votre propre thème basé sur celui-ci. Le thème enfant hérite de la plupart des fonctionnalités du thème d’origine, appelé thème parent.

Le thème enfant permet d’économiser beaucoup de travail et de temps. Créer un thème WordPress à partir de zéro prend beaucoup de temps et fait parfois progresser des connaissances en HTML, CSS, PHP et est nécessaire. Avec les thèmes enfants, vous pouvez faire beaucoup de modifications.

Si vous n’êtes pas satisfait de la personnalisation, des options et des fonctionnalités fournies par le thème WordPress que vous utilisez, vous pouvez créer un thème enfant. Même si vous souhaitez apporter une modification à votre thème WordPress, vous devez créer un thème enfant ou utiliser le plugin de l’éditeur CSS.

Vous pouvez modifier directement vos fichiers de thème WordPress existants, mais ensuite, lorsque vous effectuerez une mise à jour, vous perdrez toutes vos personnalisations. C’est pourquoi vous avez besoin d’un thème enfant.

Ce que vous pouvez faire avec les thèmes enfants WordPress

Avec les thèmes enfants WordPress, vous pouvez ajouter autant de fonctionnalités que vous le souhaitez. C’est à vous. Si vous souhaitez modifier la taille de la police ou la couleur des titres ou des liens, vous pouvez le faire très facilement avec CSS.

Vous pouvez ajouter de nouveaux menus de navigation, enregistrer de nouvelles barres latérales, créer des pages personnalisées pour les produits ou ajouter la prise en charge des polices Web personnalisées.

Ce dont vous aurez besoin :

Maintenant que vous savez ce qu’est un thème enfant WordPress et pourquoi vous devriez créer des thèmes enfants, il est temps d’apprendre à créer un thème enfant WordPress.

Il n’est pas obligatoire, mais il est recommandé de configurer une installation WordPress locale à des fins de développement et d’apprentissage. Avec l’installation locale de WordPress, vous pouvez tester rapidement et très facilement vos nouveaux plugins et thèmes.

Il existe de nombreuses façons d’installer WordPress localement. Si vous êtes un utilisateur MAC, vous pouvez utiliser MAMP, les utilisateurs Windows peuvent utiliser le programme d’installation XAMPP, WAMP ou Bitnami WordPress.

• Comment installer WordPress avec WAMP Server
• Comment installer WordPress avec MAMP
• Comment installer WordPress avec Bitnami Stack

Si vous êtes un débutant absolu, vous pouvez télécharger et installer la pile Bitnami WordPress pour créer un site Web WordPress entièrement fonctionnel sur votre MAC ou PC.

Personnellement, je préfère le serveur WAMP pour le développement local. Il n’est pas difficile d’installer WordPress sur WAMP, vous pouvez lire des tutoriels ou regarder des vidéos pour apprendre à installer WordPress en utilisant WAMP, XAMPP ou MAMP.

Vous aurez également besoin d’un éditeur de code pour éditer les fichiers de thème. Sublimetext, Brackets, Atom sont quelques éditeurs de code populaires.

Comment créer un thème enfant WordPress ?

Une fois que votre site WordPress local est prêt, nous pouvons commencer à créer notre thème enfant. Si vous utilisez le serveur WAMP, accédez à votre répertoire d’installation WAMP> WWW> WordPress> wp-content> dossier thèmes.

Dans le dossier des thèmes WordPress, créez un nouveau dossier et nommez-le vingt-six-enfants ou tout ce que vous aimez, par exemple InstantShift. Nous allons utiliser le thème Twentysixteen comme thème parent. Cela signifie que notre thème enfant sera basé sur le thème TwentySixteen.

Pour chaque thème enfant, nous avons besoin de deux fichiers.

• functions.php
• style.css

Avec dans votre dossier de thème vingt-six-enfants, créez ces deux fichiers. Ouvrez maintenant vos fichiers dans l’éditeur de texte. Pour un accès rapide, vous pouvez faire glisser votre dossier vingt-six enfants dans la barre latérale de l’éditeur de texte. Ouvrez le fichier style.css et ajoutez le code suivant.

/*
 Theme Name:   InstantShift
 Description:  Twenty Sixteen Child Theme for InstantShift.
 Author:       Tahir Taous
 Author URI:   http://www.instantshift.com
 Template:     twentysixteen
 Version:      0.1
*/

Le balisage ci-dessus est requis pour un thème enfant. Sans une feuille de style avec le balisage nécessaire, WordPress ne pourra pas reconnaître votre thème enfant.

Je pense que tu peux tout comprendre. Il n’y a rien à expliquer. Le nom de mon thème enfant est InstantShift mais vous pouvez nommer votre enfant comme vous le souhaitez. La chose la plus importante est le modèle : vingt-six. C’est le nom de notre thème parent. Assurez-vous de l’épeler correctement.

Si vous utilisez un autre thème comme thème parent, remplacez simplement Template: Twentysixteen par Template: parent-theme-name.

Dans l’en-tête de la feuille de style, nous pouvons également ajouter plus d’informations, mais ce n’est pas obligatoire. Connectez-vous maintenant à votre tableau de bord WordPress. Accédez à Apparence > Thèmes. Vous devriez voir le thème InstantShift sans aucune capture d’écran, car nous n’avons ajouté aucune capture d’écran pour notre thème enfant.

Passez votre souris sur le thème InstantShift et cliquez sur le bouton Détails du thème. Voici la capture d’écran de mon thème enfant.

Si vous pouvez voir cet écran, cela signifie que votre thème enfant est prêt. Nous pouvons maintenant commencer à personnaliser notre thème. Activez ce nouveau thème et visitez le front-end de votre blog. Vous verrez tout votre contenu sans aucun style.

Ne vous inquiétez pas. C’est normal. Nous ne pouvons voir aucun style car nous n’avons pas inclus le fichier de feuille de style des thèmes parents. assurons-nous que la feuille de style de notre thème enfant fonctionne. Dans le fichier style.css de votre thème enfant, ajoutez le code suivant.

body{
     background-color: #E7F5FB;
}

enregistrez votre fichier style.css, rechargez la première page de votre site WordPress local et vous devriez voir une couleur de fond bleu clair.

Enregistrement de la feuille de style du thème parent

Nous ne voulons pas créer tous les styles à partir de zéro. Nous allons juste ajouter quelques nouveaux styles avec le fichier style.css du thème enfant. Ajoutons maintenant le fichier stye.css du thème parent dans notre thème enfant.

Ouvrez le fichier functions.php et ajoutez le code suivant dans le fichier functions.php du thème enfant.

<?php
 
// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //
 
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    ks29so_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
    ks29so_enqueue_style( 'child-style',
        get_stylesheet_directory_uri(). '/style.css',
        array( $parent_style)     );
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );

Maintenant, si vous rechargez votre site WordPress local, vous verrez le thème normal avec tous les styles TwentySixteen.

C’est tout. Vous avez créé avec succès votre premier thème enfant. Vous avez également ajouté une nouvelle couleur d’arrière-plan pour le corps.

Mais nous n’avons pas créé notre thème enfant pour simplement changer l’arrière-plan du corps. Commençons à personnaliser notre thème.

Remplacement des styles de thème parent

Personnalisation de l’en-tête :

Par défaut, l’en-tête du thème Twenty Sixteen a beaucoup de rembourrage. Modifions le rembourrage et ajoutons la nouvelle couleur d’arrière-plan pour l’en-tête du site. Ajoutez le code suivant dans le fichier style.css de votre thème enfant, enregistrez votre fichier et rechargez le front-end de votre site pour voir les modifications.

.site-header {
    padding: 0 4.5455%;
    background: #CDDC39;
    margin-bottom: 2em;
}

Ici, vous pouvez voir la capture d’écran de l’en-tête du site avant et après l’ajout de nos nouveaux styles.

Personnalisation de la navigation principale

Modifions maintenant la couleur d’arrière-plan des éléments du menu de navigation principal. J’aime utiliser les outils de développement Chrome pour modifier mes styles CSS.

Après avoir modifié des pages Web avec les outils de développement Chrome, vous pouvez copier le nouveau code à partir des outils de développement Chrome et le coller dans le fichier style.css de votre thème enfant.

Ouvrez le fichier style.css de votre thème enfant et ajoutez-y le code suivant.

#menu-header > li {
    background: rgba(185, 202, 22, 0.97);
    margin-right: 4px !important;
    border-radius: 5px;
}

Ici vous pouvez voir la capture d’écran de notre nouvel en-tête. Nous avons très facilement personnalisé notre thème avec le thème enfant.

Derniers mots

Vous savez maintenant comment créer des thèmes enfants WordPress. C’est très simple et facile. Avec la compréhension de base du HTML et du CSS, vous pouvez complètement changer la conception de votre site.

Vous pouvez également ajouter de nouveaux menus de navigation, des zones de widgets, la prise en charge de nouvelles polices we, etc. avec le thème enfant. Mais on ne peut pas tout couvrir dans un seul article.

Si vous souhaitez apprendre le développement de thèmes WordPress, vous devez commencer par les thèmes enfants WordPress. Apprenez les bases de la personnalisation de thème.