Création d’un thème enfant
Pour ne pas toucher au thème principal, que nous appellerons parent, nous allons créer un thème enfant.
Le thème enfant va hériter de toutes les fonctionnalités et caractéristiques d’un autre thème, appelé « thème parent ».
On pourrait faire cela en accédant directement au répertoire wp-content/themes et en faisant des copier-coller.
Mais pour faire plus simple on va utiliser une extension qui fera se travail pour nous.
L’extension est : Generate Child Theme
Une fois le thème enfant généré, il apparaît dans la gestion des thèmes (Apparence > Thèmes). Pour l’instant, le thème enfant est identique au thème parent: seul son nom permet de les différencier.
Personnalisation du thème enfant
Il existe deux moyens d’accéder à la personnalisation des thèmes :
- Apparence > Personnaliser
- Apparence > Thèmes > Personnaliser (sur le thème enfant)
La plupart des éléments (comme Identité du site, Menus, Widgets, Réglage de la page d’accueil et CSS additionnel) sont communs à tous les thèmes, mais certains thèmes peuvent proposer des options de personnalisation spécifiques.
La zone à droite du menu offre un aperçu en direct des modifications. Cette prévisualisation n’est là qu’à titre indicatif pour aider à la création du thème : le résultat n’est visible des internautes qu’après sa publication.
Une fois les modifications effectuées, le bouton Publier permet d’appliquer les modifications. Si aucune modification ne doit être sauvegardée, le bouton est grisé avec la mention Publié.
Vous avez déjà vu pas mal des possibilités de personnalisation.
Nous avons voir l’onglet CSS additionnel.
Personnalisation du CSS
Allez dans la partie CSS additionnel et tapez ceci :
Comment connaitre la classe ou le sélecteur CSS pour modifier un élément ?
Le click droit magique et inspecter élément.
Essayons avec notre site sur la page d’accueil normale
.
En mettant la souris sur <header id= »masthead » class= »site-header »>
On voit que ça définit l’entête.
On peut donc pointer sur l’id qui est unique et mettre dans le code CSS de personnalisation
Si maintenant on veut changer la couleur du titre Page d’accueil :
On fait la même chose:
On voit que c’est un titre de niveau 1 avec une classe entry-title
On peut donc modifier sa couleur et sa taille si on le désire :
TAF:
Je vous invite à mettre en pratique sur votre thème (n’oubliez pas de créer un thème enfant avant).
Bien sur il faut connaitre la notion de classe et d’identifiant.
Connaitre les propriétés CSS pour les différentes modification et comment se gère les couleurs et les polices de caractères.
Ce contenu est réservé aux membres du site. Si vous êtes un utilisateur existant, veuillez vous connecter. Les nouveaux utilisateurs peuvent s'inscrire ci-dessous.