...
Actualités WEB et WordPress, thèmes, plugins. Ici, nous partageons des conseils et les meilleures solutions de sites Web.

Comment faire des personnalisations avec un thème enfant

18

Ce tutoriel n’est pas pour tout le monde.

Vous n’avez pas besoin d’être un développeur expérimenté pour suivre, mais vous avez besoin d’un véritable intérêt pour en savoir plus sur WordPress et le fonctionnement des thèmes.

Si vous n’avez pas peur de travailler avec un peu de code et de vous salir les mains avec certains fichiers de thème, alors bienvenue à bord !

Dans ce guide, vous apprendrez à personnaliser votre site WordPress à votre guise en utilisant un thème enfant, mais d’abord…

Voyons exactement pourquoi vous devriez même utiliser cette chose étrange appelée "thème enfant".

Pourquoi utiliser un thème enfant ?

Répète après moi:

Je jure solennellement de ne jamais modifier un fichier de thème.

Les nouveaux utilisateurs de WordPress qui souhaitent effectuer des personnalisations avec du code modifient souvent directement les fichiers de leur thème. C’est un grand non-non.

Pourquoi?

Une raison: lorsque vous mettez à jour votre thème, WordPress remplacera votre thème existant par la nouvelle version du thème.

Alors pourquoi est-ce important ?

Imaginez que vous utilisez la version 1.04 du thème Challenger. Vous avez déplacé le menu dans le fichier header.php et ajouté un nouveau CSS à style.css. Ensuite, la version 1.05 sort et vous voyez la notification dans votre tableau de bord.

Lorsque vous mettez à jour vers la v1.05, les fichiers header.php et style.css seront remplacés par ceux de la v1.05 de Challenger. Ils ne contiendront pas les mêmes modifications que vous avez apportées, votre travail sera donc perdu et il n’y a aucun moyen de le récupérer. Cela peut être assez décourageant si vous avez passé des heures dans vos personnalisations.

Cependant, si vous placez vos personnalisations dans un thème enfant Challenger, vous pouvez mettre à jour en toute sécurité vers la version 1.05 sans perdre aucune de vos personnalisations car elles sont stockées en toute sécurité dans le thème enfant.

Cela deviendra un peu plus clair au fur et à mesure que nous passerons à un exemple réel, alors allons-y et créons un thème enfant maintenant.

Comment créer un thème enfant

Bien que je ne vais pas expliquer en détail comment tout le code fonctionne ici, ce sont les idées de base et les extraits dont vous avez besoin pour commencer.

Configuration de base

Commencez par créer un dossier vide sur votre bureau. Vous pouvez le nommer comme vous le souhaitez, mais la convention de nommage standard consiste à utiliser le nom du thème en minuscule suivi de « enfant » et de remplacer les espaces par des tirets.

Par exemple, un thème enfant pour le thème Challenger aurait un nom de dossier «challenger-child ». Ce dossier contiendra tous les fichiers du thème enfant.

Vous n’avez besoin que d’un fichier pour créer un thème enfant techniquement valide, style.css.

Créer le fichier style.css

À l’aide de l’éditeur de code de votre choix, créez un nouveau fichier dans le dossier du thème enfant et nommez-le style.css.

Le fichier style.css est, bien sûr, l’endroit où vous ajouterez tous vos CSS pour personnaliser votre site. Pour que WordPress reconnaisse votre thème enfant comme un thème valide, vous devez ajouter un en-tête de feuille de style comme celui-ci tout en haut de style.css :

/*
 Theme Name:   Challenger Child
 Template:     challenger
 Author:       Compete Themes
 Version:      1.0
 Author URI:   https://www.competethemes.com
 Description:  This is a child theme used to customize the Challenger WordPress theme.
 License: GNU  General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

Vous pouvez copier cet en-tête exact et l’utiliser pour vos propres thèmes enfants. Changez simplement le nom du thème avec le thème que vous personnalisez.

La partie la plus importante est la valeur « Template » qui doit être définie sur le nom du thème parent. En particulier, le nom utilisé pour le dossier contenant le thème parent.

Avec cela en place, vous pouvez déjà activer le thème enfant via le menu Apparence et l’utiliser. Cependant, votre site sera complètement sans style !

Lorsqu’un thème enfant est activé, WordPress ne chargera plus le fichier style.css du thème parent et dépendra plutôt de votre thème enfant pour le faire.

Voici comment charger les deux feuilles de style…

Créez le fichier functions.php

Dans votre éditeur de code, créez un deuxième fichier dans le thème enfant et nommez-le functions.php.

Ensuite, ajoutez le code suivant au fichier :

<?php 
function my_theme_enqueue_styles() { 
  $parent_style = 'parent-style'; 
  wp_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' ); 
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
  );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Cette fonction indique à WordPress de charger le fichier style.css du thème parent, puis de charger le fichier style.css du thème enfant par la suite. Le chargement ultérieur de la feuille de style du thème enfant facilite le remplacement des sélecteurs CSS du thème parent.

Comme je l’ai mentionné précédemment, je ne vais pas couvrir ce code ligne par ligne, mais vous pouvez trouver une explication plus détaillée de cet extrait dans le Codex WordPress.

Personnalisation avec votre nouveau thème enfant

C’est tout ce que vous devez faire pour créer un thème enfant fonctionnel !

Avec la configuration du thème enfant, vous pouvez personnaliser votre site de trois manières.

Ajouter et remplacer des styles

Vous pouvez ajouter autant de nouveaux CSS dans le fichier style.css du thème enfant que vous le souhaitez.

Lorsque vous recherchez des sélecteurs à utiliser dans votre CSS, ne vérifiez pas le fichier style.css du thème parent. Tous nos thèmes utilisent un «pré-processeur CSS », donc nous ne regardons même pas ce fichier! Au lieu de cela, suivez ce processus plus intelligent pour trouver des sélecteurs CSS, et je pense que vous aurez beaucoup plus de succès en personnalisant votre site.

Fonctions de remplacement

Avec un thème parent bien codé, vous pouvez remplacer n’importe laquelle des fonctions trouvées dans son fichier functions.php.

Par exemple, chaque fonction de Mission News est encadrée par un [function_exists()](https://php.net/manual/en/function.function-exists.php)chèque. Cela signifie que vous pouvez copier la fonction dans le fichier functions.php de votre thème enfant. Ensuite, vous pouvez apporter les modifications que vous souhaitez à la fonction là-bas.

Remplacer les modèles

Une personnalisation courante nécessitant un thème enfant est la réorganisation des éléments. Par exemple, vous souhaiterez peut-être déplacer le titre du message après l’image en vedette plutôt qu’avant.

Vous pouvez prendre n’importe quel fichier modèle trouvé dans le thème parent et en placer une copie dans votre thème enfant. La version dans le thème enfant sera alors chargée à la place. Cela vous permet d’ajouter, de réorganiser et de supprimer tous les éléments que vous souhaitez dans n’importe quelle partie du site.

Installation du thème enfant

Une fois que vous êtes satisfait de vos modifications, vous pouvez installer le thème enfant sur votre site.

Les thèmes enfants peuvent être téléchargés comme les thèmes WordPress classiques, il ne faut donc qu’une minute ou deux pour les activer sur votre site. Suivez ce tutoriel pour installer votre thème enfant :

Comment installer un thème enfant WordPress

Si vous êtes totalement nouveau dans tout cela, voici quelques outils gratuits pour vous aider.

Tout d’abord, si vous n’avez pas d’éditeur de code, consultez Visual Studio Code. C’est simple mais flexible. Il est également totalement gratuit et de nombreux logiciels professionnels sont créés avec. C’est ce que j’utilise pour créer des thèmes ici chez Compete Themes.

Deuxièmement, créer un site WordPress local (hors ligne) est un excellent moyen d’essayer du code sans affecter votre site Web réel. Bien que j’aie utilisé et recommandé MAMP dans le passé, Local by Flywheel est tellement facile et simple à utiliser que je l’adore. C’est ce que j’utilise pour le développement de thèmes et c’est aussi gratuit.

Vos mises à jour sont en sécurité

Reprenons l’exemple de tout à l’heure…

Lors de la mise à jour du thème Challenger (ou de n’importe quel thème), l’ensemble du répertoire «challenger» est remplacé, ce qui n’aura pas d’impact sur le thème enfant car il possède désormais son propre répertoire dans le dossier «challenger-child ».

Une fois votre thème enfant en place, vous pouvez effectuer en toute sécurité toutes les personnalisations que vous souhaitez et maintenir votre thème parent à jour.

Si vous débutez avec CSS et PHP, cela peut vous prendre un certain temps pour obtenir vos personnalisations comme vous le souhaitez, mais avec un thème enfant, vous disposez d’une excellente base pour travailler. N’oubliez pas de suivre ces étapes pour trouver les sélecteurs CSS à utiliser, et toutes les personnalisations de style que vous effectuez seront assez simples.

Source d’enregistrement: www.competethemes.com

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails